html笔记（完整版） - 好文

目录

码仙励志
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E7%A0%81%E4%BB%99%E5%8A%B1%E5%BF%97>

背景颜色 bgcolor
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%20bgcolor>

注释
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E6%B3%A8%E9%87%8A%3C!--%E6%B3%A8%E9%87%8A%E7%9A%84%E5%86%85%E5%AE%B9--%3E>

空格
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E7%A9%BA%E6%A0%BC%26nbsp%3B>

版权符©
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E7%89%88%E6%9D%83%E7%AC%A6%26copy%3B>

网页标题
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Ctitle%3E%E7%BD%91%E9%A1%B5%E6%A0%87%E9%A2%98%3C%2Ftitle%3E>

标题标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Chn%3E%E6%A0%87%E9%A2%98%E6%A0%87%E8%AE%B0%3C%2Fhn%3E>

网页编码
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E7%BD%91%E9%A1%B5%E7%BC%96%E7%A0%81%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E>

设置连接颜色link、alink、vlink
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E8%AE%BE%E7%BD%AE%E8%BF%9E%E6%8E%A5%E9%A2%9C%E8%89%B2link%E3%80%81alink%E3%80%81vlink>

强制换行标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E5%BC%BA%E5%88%B6%E6%8D%A2%E8%A1%8C%E6%A0%87%E8%AE%B0%3Cbr%3E>

换段落标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cp%3E%E6%8D%A2%E6%AE%B5%E8%90%BD%E6%A0%87%E8%AE%B0%3C%2Fp%3E>

居中对齐白标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Ccenter%3E%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E7%99%BD%E6%A0%87%E8%AE%B0%3C%2Fcenter%3E>

预格式化标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cpre%3E%E9%A2%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E8%AE%B0%3C%2Fpre%3E>

列表项目标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cli%3E%E5%88%97%E8%A1%A8%E9%A1%B9%E7%9B%AE%E6%A0%87%E8%AE%B0%3C%2Fli%3E>

无序列表标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cul%3E%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8%E6%A0%87%E8%AE%B0%3C%2Ful%3E>

有序列表标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Col%3E%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8%E6%A0%87%E8%AE%B0%3C%2Fol%3E>

定义型列表
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cdl%3E%3Cdt%3E%3C%2Fdt%3E%E5%AE%9A%E4%B9%89%E5%9E%8B%E5%88%97%E8%A1%A8%3Cdd%3E%3C%2Fdd%3E%3C%2Fdl%3E>

水平分割线标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E6%B0%B4%E5%B9%B3%E5%88%86%E5%89%B2%E7%BA%BF%E6%A0%87%E8%AE%B0%3Chr%3E>

分区显示标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cdiv%3E%E5%88%86%E5%8C%BA%E6%98%BE%E7%A4%BA%E6%A0%87%E8%AE%B0%3C%2Fdiv%3E>

字体设置标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cfont%3E%E5%AD%97%E4%BD%93%E8%AE%BE%E7%BD%AE%E6%A0%87%E8%AE%B0%3C%2Ffont%3E>

粗字体标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cb%3E%E7%B2%97%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%3C%2Fb%3E>

斜字体标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Ci%3E%E6%96%9C%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%3C%2Fi%3E>

文字下标字体标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Csub%3E%E6%96%87%E5%AD%97%E4%B8%8B%E6%A0%87%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%3C%2Fsub%3E>
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E2%80%8B>

文字上标字体标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Csup%3E%E6%96%87%E5%AD%97%E4%B8%8A%E6%A0%87%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%3C%2Fsup%3E>

下划线字体标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cu%3E%E4%B8%8B%E5%88%92%E7%BA%BF%E5%AD%97%E4%BD%93%E6%A0%87%E8%AE%B0%3C%2Fu%3E>

其它标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E5%85%B6%E5%AE%83%E6%A0%87%E8%AE%B0>

图像标记
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cimg%3E%E5%9B%BE%E5%83%8F%E6%A0%87%E8%AE%B0>

超链接的使用
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E8%B6%85%E9%93%BE%E6%8E%A5%E7%9A%84%E4%BD%BF%E7%94%A8%3Ca%20href%3D%22%22%3E%3C%2Fa%3E>

表格 <https://blog.csdn.net/tswc_byy/article/details/81530183#%E8%A1%A8%E6%A0%BC>

框架
<https://blog.csdn.net/tswc_byy/article/details/81530183#%3Cframeset%3E%E6%A1%86%E6%9E%B6%3C%2Fframeset%3E>

表单设计
<https://blog.csdn.net/tswc_byy/article/details/81530183#%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1>

码仙励志

生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方

背景颜色 bgcolor
<body bgcolor="blue"> 秦帅哥 </body>

注释

不添加注释：
<body> 秦帅哥秦帅哥 </body>

添加注释：
<body> 秦帅哥  </body

空格
<body> 秦帅哥<br> 秦帅哥 </body>

版权符©
<body> ©版权归秦帅哥所有 </body>

网页标题

<title></title>
<head> <meta charset=utf-8" /> <title>秦帅哥的网页标题</title> </head> <body> 秦帅哥
</body>

标题标记<hn></hn>

共有6个级别，n的范围1~6，不同级别对应显示大小不同的标题，h1最大，h6最小
<body> <h1>秦帅哥</h1> <h2>秦帅哥</h2> 秦帅哥 <h6>秦帅哥</h6> </body>

网页编码<meta charset="utf-8" />
<head> <meta charset="utf-8" /> <title>秦帅哥的网页标题</title> </head>
设置连接颜色link、alink、vlink

link连接的颜色

alink正在点击的颜色

vlink已经访问的连接颜色
<body link="red" alink="yellow" vlink="green"> <a
href="http://www.baidu.com">百度</a> <a href="http://www.taobao.com">淘宝</a>
</body>
强制换行标记

<br>
<body> 秦帅哥<br> 秦帅哥 </body>

换段落标记

<p></p>
<body> <p>秦帅哥</p> <p>秦帅哥</p> </body>

居中对齐白标记

<center></center>
<body> <center>秦帅哥</center> </body>

预格式化标记

<pre></pre>
<body> <pre>秦帅哥</pre> </body>

列表项目标记

<li></li>
<body> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> </body>

无序列表标记

<ul></ul>
<body> <ul> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li>
</ul> </body>

有序列表标记

<ol></ol>
<body> <ol> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li>
</ol> </body>

有序列表的type属性值

<body> <ol type="A"> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li>
<li>秦帅哥</li> </ol> </body>

指定一个新的数字起始值value
<body> <ol> <li>秦帅哥</li> <li value="5">秦帅哥</li> <li>秦帅哥</li> <li>秦帅哥</li>
<li>秦帅哥</li> </ol> </body>

列表嵌套
<body> <ol> <li>秦帅哥</li> <li> <ol type="A"> <li>秦帅哥</li> <li>秦帅哥</li>
<li>秦帅哥</li> </ol> </li> <li>秦帅哥</li> <li>秦帅哥</li> </ol> </body>

定义型列表

<dl><dt></dt><dd></dd></dl>

<body> <dl> <dt>软件说明：</dt> <dd>简单介绍软件的功能及基本应用</dd> <dt>软件界面</dt> <dd>用于选择软件的外观
<dd> </dl> </body>

水平分割线标记

<hr>
<body> 秦帅哥 <hr> 秦帅哥 </body>

分区显示标记

<div></div>
<body> <div> 秦帅哥 </div> <div> 秦帅哥 </div> </body>

字体设置标记<font></font>

设置字体的格式

<body> 秦帅哥<br> <font size="14px" color="red" face="微软雅黑">秦帅哥</font> </body>

粗字体标记<b></b>
<body> 秦帅哥<br> <b>秦帅哥</b> </body>

斜字体标记<i></i>
<body> 秦帅哥<br> <i>秦帅哥</i> </body>

文字下标字体标记

<sub></sub>
<body> 2<sub>3</sub> </body>

文字上标字体标记

<sup></sup>
<body> 2<sup>3</sup> </body>

下划线字体标记<u></u>
<body> 秦帅哥<br> <u>秦帅哥</u> </body>

其它标记

图像标记

<img>

<body> <img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px"> <img
src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px" border="5px"> <img
src="file:///D|/孤独秦哥/2/ha.pg" width="200px" height="200px" alt="灰太狼"> </body>

超链接的使用<a href=""></a>

在当前窗口中打开链接
<body> <a href="http://www.baidu.com">百度</a> <a
href="Test2.html">test2</a> </body>

在一个新的窗口中打开链接
<body> <a href="http://www.baidu.com" target="_blank">百度</a> </body>

锚点链接
<body> <a name="dingbu"></a> <a href="#dibu">到页面底部</a><br> 内容<br> <a
href="#dingbu">到页面顶部</a> <a name="dibu"></a> </body>

表格

1.<table>标记

2.<caption>标记

<head> <title>表格</title> <meta charset="utf-8"> </head> <body> <table
width="500px" height="230px" border="1px" align="center" cellspacing="0px">
<caption>表格的标题</caption> <tr> <th align="cernter">班级</th> <th>姓名</th>
<th>年龄</th> <th>成绩</th> </tr> <tr align="center" valign="center">
<td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td>
<td>李四</td> <td>14</td> <td>90</td> </tr> </table> </body>

3.<tr>标记

4.<td>和<th>

<body> <table width="500px" height="230px" border="2px" cellspacing="0px">
<tr> <td colspan="2"></td><td></td><td></td> </tr> <tr> <td></td><td></td><td
rowspan="2"></td><td></td> </tr> <tr> <td></td><td></td><td></td> </tr>
</table> </body>

<frameset>框架</frameset>

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

<html> <head> <title>框架</title> <meta charset="utf-8"> </head> <frameset
rows="190px,*,190px"> <frame> <frameset cols="20%,80%"> <frame> <frame>
</frameset> <frame> </frameset> </html>

表单设计

1.表单标记<form>...</form>

2.文本域和密码<input>标记

3.提交、重置、普通按钮

<body> <form method="post"> 账号：<input type="text" name="zhanghao" size="10"
maxlength="5"> <br> <br> 密码：<input type="password" name="mima" size="10"> <br>
<br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
</body>

4、单选框和复选框

<body> <form>  性别： <input id="man" type="radio" name="sex"
checked="checked">男 <input id="woman" type="radio" name="sex">女 </form> </body>

<body> <form>  爱好： <input type="checkbox" name='foods'
value='niurou'>牛肉 <input type="checkbox" name='foods' value='caixin'>菜心 <input
type="checkbox" name='foods' value='lianou'>莲藕 </form> </body>

5、隐藏域

当<input type="hidden">时，为隐藏表单域
<body> <form> <input type="hidden" value="隐藏的内容" name="yincang"> </form>
</body>
6、多行文本域

<body> <form> 自我介绍：<br> <textarea name="ziwojieshao" rows="5" cols="35">
</textarea> </form> </body>

7、菜单下拉列表域<select></select>标记

<body> <form> 地址：<br> <select name="dizhi"> <option
value="sichuan">四川</option> <option value="beijing">北京</option> <option
value="shanghai">上海</option> </select> </form> </body>

本篇博客来自于麦子学院视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901

热门工具换一换