代码就是要多多的敲，在学习Pink老师的课的时候发现，可以用代码作为笔记，看起来既直观，又有了实践的过程，一举两得。所以以后复习知识，直接打开相应的网页就可以了~
可能以后会有补充的相关问题，如果有更新建议在文章末尾处标注改变位置和时间！！
经常能用到的文本标签，如<h><p><br><title>等标签就不记了，如果遇到特殊的情况再修改。
目录
一、HTML文本标签及其涉及的属性
<body>
<h3>1.粗体 strong 和 b</h3>
<p><strong>床前明月光</strong>——使用strong标签</p>
<p><b>床前明月光</b>——使用b标签</p>
<h4>2.倾斜 em 和 i</h4>
<em>疑是地上霜</em>——使用em标签<br>
<i>疑是地上霜</i>——使用i标签
<h4>3.删除线 del 和 s </h4>
<del>举头望明月</del>——使用del标签<br>
<s>举头望明月</s>——使用s标签
<h4>4.下划线 ins 和 u </h4>
<ins>低头思故乡</ins>——使用ins标签<br>
<u>低头思故乡</u>——使用u标签
</body>
二、HTML图片标签及其涉及的属性
<body>
<h1>我是个好人</h1>
<h4>我是真不会啊</h4>
<p>大家不要和他一般见识哈</p>
<p>作者是我<br>
昨天做的
</p>
<h4>src填写图片位置</h4>
<img src="img.jpg" width="200"/>
<h4>alt 图片不显示的时候显示的文字</h4>
<img src="img1.jpg"/ alt="你看不见我，除非没有图片">
<h4>title 鼠标悬停在图片上显示的文字 </h4>
<img src="img.jpg"/ title="只有放在上边才能看见我">
<h4>width 改变图片宽度</h4>
<img src="img.jpg"/ width="500">
<h4>height 改变图片高度</h4>
<img src="img.jpg"/ width="500" height="500">
<h4>高度和宽度改变一个，另一个等比例缩放</h4>
<h4>border 给图片加边框</h4>
<img src="img.jpg"/ width="500" border="15">
</body>
三、HTML超链接
<body>
<h4>1.外部链接</h4>
<h6>_blank打开一个新的标签页<br>_self当前窗口打开页面</h6>
<h4>_blank</h4>
<a href="file:///C:/Users/Libaifei/Desktop/HTML/%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html" target="_blank">我自己的</a>
<h4>_self 这里的是绝对路径</h4>
<a href="file:///C:/Users/Libaifei/Desktop/HTML/%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5.html" target="_self">我自己的</a>
<h4 id="live">2.内部链接</h4>
<a href="图片.html">第一个网页</a>
<h4>3.空链接</h4>
<a href="#">这是个空链接</a>
<h4>4.下载链接</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接包括：文本、图像、音频、视频</h4>
<a href="https://www.msn.cn/zh-cn?OCID=fwdbahp"> <img src="img.jpg"/ width="500"></a>
<h4>4、锚点链接：跳转至本页面的以“id”标注的位置</h4>
<a href="#live">内部链接</a>
</body>
四、注释标签
<body>
<!-- 十七张牌你能秒我？ -->
<p>特殊字符 我是真不会啊</p>
<h4>大于号</h4>
<p>></p>
<h4>小于号</h4>
<p><</p>
<h4>和号&</h4>
<p>&</p>
<h4>人民币</h4>
<p>¥</p>
<h4>版权</h4>
<p>©</p>
<h4>注册商标</h4>
<p>®</p>
<h4>摄氏度</h4>
<p>°</p>
<h4>正负号</h4>
<p>±</p>
<h4>乘号</h4>
<p>×</p>
<h4>除号</h4>
<p>÷</p>
<h4>平方二（上标2）</h4>
<p>²</p>
</body>五、相对路径和绝对路径
相对路径还是比较好理解的，但是在使用绝对路径的时候出了错，主要是少了一级，导致定位不是很准了，所以“加载图片失败”。
<body>
<h2>相对路径和绝对路径</h2>
<h4>1、相对路径<br>分为同级的和不同级的</h4>
<p>同级直接引用</p>
<img src="这也是我.jpg" width="300">
<img src="我的狗.jpg">
<p>在该网页的下一级 就是“文件夹名称/目标文件名称”</p>
<img src="tupian/我的狗.jpg" height="300">
<p>在该网页的上一级</p>
<img src="../img.jpg" width="500">
<h4>绝对路径</h4>
<p>完整的路径（不是很实用）</p>
<img src="C:\Users\Libaifei\Desktop\HTML\这也是我.jpg" />
</body>
六、表格标签及其属性
在VScode里cellpadding和cellspacing不显示橙色
<body>
<h4> table 用来定义表格的标签</h4>
<!-- tr 只能嵌套在 table里用于定义表格中的行 -->
<table>
<tr>
<!-- td只能嵌套在tr里 -->
<td>单元格中的文字</td>
</tr>
</table>
<table>
<tr><td>姓名</td> <td>寝室号</td> <td>负责人数</td></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<br>
<!-- 表头单元格标签 <th> -->
<table>
<tr><th>姓名</th> <th>寝室号</th> <th>负责人数</th></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<h4>表格标签的属性</h4>
<!-- 写到table里面 -->
<p>1.align="left\center\right"表格位置</p>
<table align="center" >
<tr ><th>姓名</th> <th>寝室号</th> <th>负责人数</th></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<p>2.border边框</p>
<table align="center" border="">
<tr ><th>姓名</th> <th>寝室号</th> <th>负责人数</th></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<p>3.cellpadding单元边与内容的距离 默认1像素</p>
<table align="center" border="" cellpadding="10">
<tr ><th>姓名</th> <th>寝室号</th> <th>负责人数</th></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<p>4.cellspacing 规定单元格之间的空白 默认2像素</p>
<table align="center" border="" cellpadding="10" cellspacing="0">
<tr ><th>姓名</th> <th>寝室号</th> <th>负责人数</th></tr>
<tr><td>张家辉</td> <td>415</td> <td>5</td></tr>
<tr><td>高祥哲</td> <td>416</td> <td>6</td></tr>
</table>
<!-- 还有一个width，规定表格的宽度 -->
<h4>5.合并单元格 以左上为目标单元格</h4>
<!-- 跨行合并 竖着rowspan=“合并单元格个数” -->
<!-- 跨列合并 横着colspan=“合并单元格个数” -->
<table align="center" border="1">
<thead>
<tr>
<th>姓名</th>
<th>寝室号</th>
<th>负责人数</th>
</tr>
</thead>
<tbody>
<tr><td rowspan="2">张家辉</td> <td colspan="2">415</td></tr>
<tr><td>高祥哲</td> <td>416</td> </tr>
</tbody>
</table>
</body><thead>与<tbody>我的理解就是为了更加直观的区分标题和主体的同时也方便管理。
合并单元格很重要！！！
七、列表
<h2>表格显示数据，列表用来布局</h2>
<!-- 整齐、整洁、有序，布局自由且方便 -->
<h4>1.无序列表 你喜欢的食物</h4>
<ul>
<li>陈才艺</li>
<li>武诗凯</li>
<li>高祥哲</li>
<li>钟艺</li>
<li>赵飞翔</li>
<li>段景耀</li>
</ul>
<!-- ul中只能嵌套li -->
<!-- 但是li可以放任何元素 -->
<h4>2.无序列表 </h4>
<ol>
<li>刘德华 1</li>
<li>刘若英 0</li>
<li>高祥哲 妹有</li>
</ol>
<!-- ol天生带有数字序列 -->
<h4>3.自定义列表</h4>
<!-- 常用于对术语或名词（dt）进行解释和描述（dd），定义列表的列表项前妹有任何符号 -->
<dl> <!-- dt与dd并列关系 -->
<dt>关注我们</dt>
<dd>马化腾</dd>
<dd>马云</dd>
<dd>马化云</dd>
<dt>关注我们</dt>
<dd>马化腾</dd>
<dd>马云</dd>
<dd>马化云</dd>
</dl>我觉得自定义列表的应用场景还是比较多的 实际上自定义列表还是有着意义上的包含关系的，希望早早的学到CSS开始手痒了~
八、表单（从此开始，之前的方式不合适了）
1、id：表单的唯一标识
2、name：表单的名字
3、method：定义表单提交的方法，有两种方法： Post方法和Get方法
4、action：用于处理表单的服务器端页面（以URL 形式表示）
表单提交Post方法、Get方法——区别
1、Post方法
保密性高适合数据中有密码的表单，且传送数据的量会比较大
2、Get方法
保密性相对较低，传送数据的量会比Post小很多，但是效率高
如果这些数据是中文数据而且是非敏感数据，那么使用 get；如果用户输入的数据不是中文字符而且包含敏感数据，包含机密信息的话，建议用post数据提交方式为好；
| input属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input表单名称 |
| value | 由用户自定义 | 规定input元素值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
input属性之type属性值
1、name和value是每个表单元素都有的属性值，主要给后台人员使用
2、name表单元素的名字，要求单选按钮和复选框要有相同的name值
3、checked属性主要针对单选按钮和复选框，用来设置默认某个表单元素
4、maxlength属性可以设置表单元素输入的最大字符
web标准组成：
结构——HTML（元素、布局）
表现——CSS（美化）
行为——Javascrip
（上面这段话，以后的每篇博客里都会出现）
9594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
