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