大家好，今天我要和大家分享一下我学习Web前端的一些入门知识，包括HTML和CSS的基础语法和用法。
Web前端开发简介
Web前端开发主要负责将数据以美观的样式呈现在网页上，让用户能够直观地浏览和交互。一个完整的网页由多个部分组成，例如文字、图片、音频、视频、超链接、表格等等。
网页背后的本质是程序员编写的前端代码，而浏览器负责将这些代码解析和渲染成用户看到的网页。不同的浏览器内核不同，对相同代码的解析效果也可能存在差异，因此我们需要遵循统一的Web标准，例如HTML、CSS和JavaScript，以确保网页在不同浏览器上的展示效果一致。
HTML快速入门
首先，我们需要了解HTML页面的基本结构：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>
在 <head> 标签中，我们可以定义网页的标题和样式等。在 <body> 标签中，我们编写网页的主体内容，例如文字、图片、视频等。
HTML：网页的结构
HTML（超文本标记语言）负责定义网页的结构，包括页面元素和内容。HTML标签是预定义好的，例如<h1>定义一级标题，<img>定义图片，<a>定义超链接。
CSS：网页的表现
CSS（层叠样式表）负责控制网页的样式，例如颜色、大小、位置等。CSS可以通过三种方式引入：
- 内联样式：在标签内使用
style属性设置样式，例如<h1 style="color: red;">。 - 内部样式：在
<style>标签内定义样式，作用于当前页面的指定标签，例如<style> h1 { color: red; }</style>。 - 外部样式：通过
<link>标签引入外部CSS文件，实现HTML和CSS的分离，例如<link rel="stylesheet" href="css/news.css">。
常见HTML标签与CSS样式
- 标题标签：
<h1>到<h6>定义不同级别的标题，字体大小依次递减。 - 图片标签：
<img>定义图片，src属性指定图片路径，width和height属性设置图片尺寸。 - 段落标签：
<p>定义段落，<br>定义换行。 - 文本格式标签：
<b>、<strong>定义加粗，<i>、<em>定义倾斜，<u>、<ins>定义下划线，<s>、<del>定义删除线。 - 盒子模型：将页面元素看作盒子，包括内容区域、内边距、边框和外边距。
- 布局标签：
<div>和<span>用于布局，<div>独占一行，可以设置宽高，<span>一行可以显示多个，不能设置宽高。 - 表格标签：
<table>定义表格，<tr>定义行，<td>定义单元格。 - 表单标签：
<form>定义表单，action属性指定提交地址，method属性指定提交方式（GET或POST）。<input>定义表单项，type属性控制输入形式，例如text、password、radio、checkbox等。 - 颜色表示：颜色可以用关键字、RGB、RGBA和十六进制表示。
新浪新闻页面案例
为了更好地理解HTML和CSS的应用，我们以新浪新闻页面为例，实现了标题部分和正文部分的排版和样式。通过学习，我们掌握了以下技能：
- 使用
<img>标签插入图片，并设置图片大小和路径。 - 使用
<h1>标签定义标题，并通过CSS设置标题样式，例如字体颜色和大小。 - 使用
<hr>标签添加水平分割线。 - 使用
<a>标签创建超链接，并设置打开方式（当前窗口或新标签页）。 - 使用
<video>标签插入视频，并设置视频控件、宽度和高度。 - 使用
<p>标签定义段落，并通过CSS设置段落样式，例如行高和首行缩进。 - 使用
<strong>标签加粗文本。 - 使用
<span>标签组合行内元素。 - 使用
<div>标签进行页面布局，并通过CSS设置宽度和外边距。 - 使用
<table>标签创建表格，并通过CSS设置表格样式，例如边框和宽度。 - 使用
<input>标签创建不同类型的表单项，例如文本框、密码框、单选框、复选框等。
开发工具
为了方便开发，我们可以使用专业的代码编辑器，例如VS Code。VS Code对前端代码有强大的支持，并提供丰富的插件库，可以大大提高开发效率。
基础标签 & 样式
以新浪新闻页面为例，我们可以学习一些常见的HTML标签和CSS样式：
- 标题排版： 使用
<img>标签插入图片，使用<h1>标签定义标题，使用<hr>标签定义水平分割线。 - 标题样式： 使用CSS设置字体颜色、大小等样式，并通过三种引入方式（内联样式、内嵌样式、外联样式）将样式应用到HTML标签上。
- 超链接： 使用
<a>标签定义超链接，并通过href属性指定链接地址，通过target属性指定打开方式（_self在当前页面打开，_blank在新标签页打开）。 - 正文排版： 使用
<video>标签插入视频，使用<p>标签定义段落，使用<strong>和<em>标签定义加粗和倾斜文本。 - 页面布局： 使用CSS盒子模型和布局标签（
<div>和<span>）进行页面布局，并通过设置边距和填充来控制元素的位置和间距。
表格标签 & 表单标签
- 表格标签： 使用
<table>,<tr>,<td>等标签定义表格，并通过CSS设置表格样式。 - 表单标签： 使用
<form>标签定义表单，并通过action和method属性指定表单提交地址和方式。使用<input>,<select>,<textarea>等标签定义表单项，并通过type属性控制输入形式。
总结
通过学习HTML和CSS，我们可以掌握网页设计和布局的基础知识，为后续学习JavaScript和前端框架打下基础。
学习Web前端是一个循序渐进的过程，希望大家能够不断实践和探索，打造出精美的网页作品！
