html代码大全（HTML网页代码）

行级标签

行级标签特点：所有行级标签默认在一行内显示，并且该类标签都没有高和宽的概念。

<i>字体斜体</i>
<em>字体斜体（语义化标签，表示强调）</em>
<b>字体加粗</b>
<strong>字体加粗（语义化标签，表示着重）</strong>
<s>删除线</s>
<del>删除线（语义化标签，表示删除）</del>
<!–target默认值_self表示在当前窗口打开，_blank表示在新窗口打开–>
<a href=”https://www.baidu.com” target=”_blank”>超链接</a>
<!–锚链接中href属性指定是页面某个标签的id，点击后自动跳转到该标签位置–>
<a href=”#id”>锚链接</a>
<!–图片标签–>
<img src=”图片地址” alt=”图片地址失效时展示内容”>
<span>包裹容器，无特殊含义</span>

块级标签

块级标签特点：默认高度为auto，宽度（100%）为其父节点的宽度。

<h2>标题标签（h2~h6）</h2>
<p>段落标签</p>
<div>容器标签，无特殊含义</div>
<!– br标签为换行符标签，表示在此处强制换行，当前写法为单标签的完整写法 –>
<br />
<!– hr标签为水平线标签，表示一条水平线，当前写法为单标签的简写形势 –>
<hr>

列表标签

无序列表

<!– ul-li组成无序列表，ul和li必须是嵌套关系，并且ul标签内，只能嵌套li标签，其他标签可以写，但是无效。 –>
<!– li标签是块级标签，li内可以嵌套任何标签 –>
<!– 无序列表在后期处理网页效果时，很常用，但是会清除他原有的样式，只保留他的骨架。方便对代码内容进行分组 –>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>

有序列表

<!– ol标签的type属性取值范围：1表示阿拉伯数字（默认），a表示小写英文字母排序，A表示大写英文字母排序，I表示大写罗马数字排序，i表示小写罗马数字排序 –>
<!– ol标签的start属性表示排序初始值，默认是1 –>
<!– ol标签的reversed属性表示倒序排序，属性名和属性值必须一致，简写为reversed –>
<ol type=”A” start=”3″ reversed=”reversed”>
<li>第一个内容</li>
<li>第二个内容</li>
<li>第三个内容</li>
</ol>

表格标签

<!– table标签的width属性表示表格的宽度，border的值表示边框的粗细 –>
<table width=”50%” border=”1″>
<caption>web01班人员信息</caption><!– 表格标签专用的表格标题 –>
<thead><!– thead表示表格的头部内容，只能存在一个，thead标签写在table的任意位置，都会在第一行显示 –>
<tr>
<!– th标签是单元格专用的标题，特点是加粗且自动居中，不推荐大量使用th –>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody><!– tbody表示表格的数据内容，可以存在多个 –>
<tr align=”center”><!– align属性来控制文本对齐方式，但是不推荐使用，这种活交给CSS更合理！！！ –>
<td>张三</td>
<td rowspan=”2″>男</td><!– rowspan=”2″表示该单元格占据两行的高度，称为合并行 –>
<td>22</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>王小红</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
<tfoot><!– tfoot表示表格的底部内容，只能存在一个，在table的任意位置写都会在最底部展示 –>
<tr>
<td>总人数</td>
<td colspan=”2″>3</td><!– colspan=”2″表示该单元格占据两列的宽度，称为合并列 –>
</tr>
</tfoot>
</table>

表单标签

表单标签和表单元素的区别：

表单标签就是指form标签

表单元素有：input、select、textarea和button按钮

<!– form标签内的提交按钮被点击，会提交该form标签内的所有有name属性的表单元素 –>
<!– action属性控制提交的服务器地址，没有给值则提交给自己 –>
<!– method属性表示提交类型：GET或POST，默认为GET提交 –>
<!–
GET提交时，表单内的内容会在地址栏直接显示，POST提交时，地址栏不会显示内容
GET提交时，携带的参数容量较小，造成原因是：浏览器对地址栏长度有限制，容量大概在2kb-8kb之间，不同浏览器和相同浏览器的不同版本之间都会有一定差异，需要具体问题具体分析。
post携带参数容量较大，理论无上限，但是浏览器和服务器容器对于请求有限制。
GET请求不安全，POST请求安全—–错！！！！
post相较于get请求安全，但是不是绝对安全
–>
<form action=”” method=”POST”>
<div>
<label for=”username”>用户名</label>
<!– type值为text表示普通文本输入框，可以输入任意内容 –>
<!– name属性非必选项，但是推荐要写name属性，否则该标签可能无意义 –>
<!– name属性只在表单标签内有效 –>
<!– placeholder属性在文本框内容为空时显示值，其他情况自动隐藏 –>
<!– value属性表示文本框的默认值，后期在JS操作中会经常使用 –>
<!– autocomplete属性控制是否让浏览器帮助自动填充，on表示启动，off关闭 –>
<!– readonly属性表示该标签的值只能是初始值，不可修改，但是可以提交 –>
<!– disabled属性表示该标签的值只能是初始值，不可修改，且不可以提交（代码在年龄输入框） –>
<!– tabindex属性控制键盘操作的tab按键选择顺序，从小到大排序(0-32767)，但是默认值为0时排在最后，赋值为-1时不会被tab选中，disabled的标签也不会被选中 –>
<input type=”text” name=”username” id=”username” autocomplete=”off” placeholder=”请输入用户名” value=”我是input标签的默认值” readonly tabindex=”1″>
</div>
<div>
<label for=”password”>密码</label>
<input type=”password” tabindex=”7″ id=”password” name=”password” placeholder=”请输入密码”>
</div>
<div>
<label for=”file”>头像</label>
<input type=”file” id=”file” name=”file” tabindex=”5″>
</div>
<div>
<label for=”age”>年龄</label>
<!– step属性表示每次叠加的数字，但是要求他的值必须能够被max-min的值整除 –>
<input type=”number” value=”7″ tabindex=”3″ disabled id=”age” name=”age” max=”120″ min=”0″ step=”7″ placeholder=”请输入年龄”>
</div>
<div>
性别
<!– 单选框要求同组内name值相同 –>
<!– 默认选中属性：checked=”checked” –>
<!– 单选框或者复选框不给value属性无意义 –>
<input type=”radio” name=”sex” checked value=”男” id=”boy”>
<!– label标签为辅助标签，for属性的值要和当前页面某个ID的值相同，则会自动绑定为此ID的辅助控件 –>
<label for=”boy”>男</label>
<input type=”radio” name=”sex” value=”女” id=”girl”>
<label for=”girl”>女</label>
</div>
<div>
爱好
<!– 复选框没有强制要求name值必须相同，但是推荐大家把name设置为相同的值 –>
<input type=”checkbox” name=”hobby” id=”lq” value=”篮球”>
<label for=”lq”>篮球</label>
<input type=”checkbox” name=”hobby” id=”pq” value=”排球”>
<label for=”pq”>排球</label>
<input type=”checkbox” name=”hobby” id=”zq” value=”足球” checked>
<label for=”zq”>足球</label>
</div>
<div>
<label for=”address”>地址</label>
<select name=”address” id=”address”>
<option value=”徐州”>徐州</option>
<option value=”南京”>南京</option>
<option value=”上海” selected>上海</option>
<option value=”广东”>广东</option>
</select>
</div>
<div>
<label for=”detail”>详细地址</label>
<textarea name=”detail” tabindex=”6″ id=”detail” placeholder=”请输入详细地址” rows=”10″ cols=”50″></textarea>
</div>
<div>
<!– submit会让表单内容进行提交 –>
<!– reset会让表单内容重置为初始状态，切记，重置不是清空表单！！！！ –>
<input type=”submit” value=”提交”>
<input type=”reset” value=”重置表单”>
<input type=”button” value=”普通按钮”>
</div>
<div>
<!– 推荐使用button标签方式创建按钮，更佳具有语义化，并且button按钮是双标签，标签内可以插入图片实现功能更强大的作用 –>
<!– button标签在使用时，type属性非必选项，但是我们在写的时候，必须加上type的属性 –>
<!– IE浏览器下button标签的type属性的默认值是submit，其他浏览器的默认值是button –>
<button type=”submit”>提交按钮</button>
<button type=”reset” tabindex=”-1″>重置按钮</button>
<button type=”button”>普通按钮</button>
</div>
</form>

多媒体标签

embed标签

object标签

audio标签（音频处理）

<!– audio标签用来播放音频 –>
<!– autoplay属性设置自动播放，部分浏览器会失效，后续我们使用JS来控制自动播放，兼容性更好 –>
<!– controls属性设置是否显示控制条 –>
<!– loop属性设置是否循环播放 –>
<!– audio标签内可以嵌套多个sourec标签来解决浏览器兼容格式的问题 –>
<audio src=”media/bgsound.mp3″ autoplay controls loop>
<!– <source src=”mdeia/bgsound.wav”> –>
</audio>

video标签（视频处理）

<!–poster设置视频播放前的封面，不设置则默认为视频的第一帧 –>
<video src=”media/mp4.mp4″ autoplay loop controls width=”500″ height=”500″ poster=”media/ad-3.png”>
<!– <source src=”media/mp4.ogg”> –>
</video>

路径的概念

绝对路径

真实的磁盘路径地址或者完整的网络地址。该方案一般只在引入网络地址时使用，本地文件引用尽量使用相对路径。因为绝对路径在网站位置发生改变后，本地文件的引用会失效。

相对路径

以网页所在位置作为参考而建立的一套路径体系。当不同的网页引用同一个资源时，因为参照系不同，地址也会不同。

特殊符号

SEO优化相关

<!– 设置编码格式，为了解决可能出现的中文乱码问题 –>
<meta charset=”utf-8″>
<!– 标题 –>
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!– 网站描述 –>
<meta name=”description” content=”京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!”>
<!– 搜索关键字 –>
<meta name=”keywords” content=”网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东”>
<!– 设置浏览器图标 –>
<link rel=”shortcut icon” href=”favicon.ico”>