一、什么是html？
HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。常见的标签包括 body、head、title、p、img、a、div、span、ol、table等。HTML可以认为就是网页内容的载体，内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
二、常用标签功能介绍
<!DOCTYPE html> 声明为文档类型
<html> 元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
<h1> 标题标签,有<h1>~<h6>六个标签。（从h1到h6字体大小由小到大）
<p> 段落标签;
<hr> 水平线标签;
<br> 换行标签;
<div> 和 <span>: 网页布局中最主要的2个盒子标签, 没有语义.
排版标签
<b>和<strong> 文字以粗体显示标签;
<i>和<em> 文字以斜体显示
<s>和<del> 文字以加删除线显示
<u>和<ins> 文字以加下划线显示
图像标签
<img src="images/pic.jpg" width="300" height="300" border="3" alt="图像不能显示时的替换文本" title="鼠标悬停显示内容" />
链接标签
href="#" ->链接依然会跳转(在地址栏会多出一个#符号)
href="javascriptvoid(0);" 或者 href="javascript:;" ->阻止链接跳转 -->
<a href="#/跳转目标" target="目标窗口的弹出方式">*文本或图像*</a>
target="_self": 默认窗口弹出方式
target="_blank": 新窗口弹出
<a href="#two"> <h3 id="two">第2集</h3>: 锚点
表格标签 (属性:border, cellspacing, cellpadding, width, height, align, rowspan, colspan)
<table>
<caption>表格标题, 居中显示在表格之上</caption> <th>表头单元标签</th> <td>单元格</td>
列表标签
<ul>
无序列表
<li>列表项</li>
</ul> <dl>
自定义列表
<dt>名称</dt>
</dl>
表单标签 (<input />标签为单标签, 含属性:type, name, value, size, checked, maxlength)
<input type="属性值" value="你好">
//常用的type属性如下:
<input type="text" name="username" value="请输入用户名" maxlength="6"> =>单行文本输入框
<input type="password" name="pwd"> =>密码输入框
<input type="radio" name="sex" value="女" checked="checked"> =>单选按钮
<input type="checkbox" name="hobby" value="打豆豆" checked="checked"> =>复选框
<input type="button" value="获取短信验证码"> =>普通按钮
<input type="submit" value="免费注册"> =>提交按钮
<input type="reset" value="重新填写" > =>重置按钮
<input type="image" > =>图像形式的提交按钮
<input type="file" > =>文件域
label标签的使用
<!-- 第一种: 用label标签直接包含input表单，适合单个表单选择 -->
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
<!-- 第二种:for 属性规定 label 与哪个表单元素绑定(通过id)。 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
文本域标签 (cols="每行中的字符数" rows="显示的行数", 我们实际开发不用.) -->
<textarea >
文本内容
</textarea>
<!-- 3.7 select下拉列表标签 -->
<select>
<option selected ="selected">选项1</option>
<option>选项2</option>
</select>
form表单域标签
<form action="url地址" method="提交方式:get/post" name="表单名称">
各种input表单控件
</form>
三、编写HTML文档的步骤（VS Code操作）
在文件（File）下新建一个工作目录——>在建好的文件夹下创建一个后缀名为html的HTML文件——>按ctrl+!+回车出现如下内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>网页标题</title>
</head>
<body>
<h1>文章标题</h1>
<p>正文内容</p>
</body>
</html>然后就可以开始编写需要的网页内容了，写完后鼠标右键选择Open In Default Browser在浏览器中打开就可以看到自己所写的网页。
四、CSS介绍
CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
五、CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练的使用CSS对网页进行修饰，首先需要了解CSS样式规则。具体格式如下：
选择器 {属性值1;属性值2;属性值3;.....}
在上面的样式规则中，“选择器”用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用英文冒号“:”分隔。多个属性之间使用英文分号“;”分隔。一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。 id选择器示例：
/* 注意：id选择器前有 # 号。 */
#sky{
color: blue;
}这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。（id选择器适用范围只有一个元素） class选择器用法一样，不过class选择器前用的不是#号而是 .号，另外元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。
六、如何在HTML文件中导入CSS文件(外部样式表用法，我个人比较倾向于使用这种，所以另外两种就不介绍了)
首先在同一工作目录下新建一个CSS文件夹，然后在文件夹下新建一个后缀名为.css的CSS文件，然后就可以在里面写入需要定义的规则样式了，写完后转到需要导入css文件的html文件里，在里面加上如下语句：
<link rel="stylesheet" href="css/mycss.css">这样就导入成功了，然后可以重新打开浏览器刷新查看新页面。
七、关于我学习HTML和CSS的感悟
用HTML和CSS编写网页是一件容易使人上瘾的事情，但是由于htnl和css的内容太多代码量又很大，所以在制作网页过程中真的很考验人的心态，有的时候就一点小小的改动就能让你的整个网页布局都乱掉。所以要想掌握好html和css对我来说还要学很长时间，只能说革命尚未成功，同志仍需努力。