一、整体代码布局
<head> </head>：是头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项 <body> </body>：body内的内容直接显示在页面上。内容一定要写在标签内。
二、常用标签
注意：大多数标签成对出现，后边的标签比前边的多一个 /
1. 标题标签
- <h>：标题标签
：段落标签
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><p>风雨犹祝，山海同欢，是承天地之佑。星移斗转，沧海桑田，烟火人间依旧。</p>
2. 字样标签
：换行
：分割线- 、：字体加粗
- 、：斜体字
- ：大字体
- ：小字体
- ：下划线
：删除线- ：上标
- ：下标
这里是<!-- （换行符） --><br>换行操作。<hr> <!-- 分割线 --><strong>加粗</strong><b>加粗</b><i>斜体</i><em>斜体</em><big>大字体</big><small>小字体</small><u>下划线</u><del>删除线</del><sub>上标</sub><sup>下标</sup>2<sup>4</sup><b>32<sup>4</sup></b>
3. 图片标签
：图片标签
属性：
src 路径，即图片存放的位置。
alt 加载失败时的提示文字。
width height 宽高。
属性：
a之间填写显示的文字。
href：将要跳转去的地址链接。
target：target="_blank" 在新建标签页打开。
title ：鼠标放到图片上会显示的文字。
<img src="../image/1.jp" alt="图片加载失败" width="500px" height="300px"><br><img src="../image/1.jpg" alt="" width="500px" height="300px"><br><hr><p>百度一下<q>你就知道</q></p><a href="https://www.baidu.com/" target="">Baidu</a><a href="https://www.baidu.com/" target="_blank">Baidu</a><br><a href="https://www.baidu.com/" title="点击将跳转到百度"><img src="../image/1.jpg" alt="" width="80px" height="40px"></a>
4. 列表标签
（1）有序列表
ol 为整个列表，li 表示每一个项。
可以利用 type 属性来改变序号的样式：type=" "，默认为数字1
1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字。
（2）无序列表
同上。type属性默认是disc小圆点，其他还有 circle圆圈、square方块。
（3）自定义列表
dl为整个列表，dt为列表头，dd为列表项。
<!-- 有序列表 --><ol type="a"><li>计算机</li><li>计算机</li><li>计算机</li></ol><!-- 无序列表 默认disc小圆点，circle圆，square方块--><ul type=""><li>计算机</li><li>计算机</li><li>计算机</li></ul><!-- 自定义列表 --><dl><dt>列表头</dt><dd><b>列表项</b></dd><dd>列表项</dd><dd>列表项</dd></dl>
5. 表格标签
（1）创建表格：
表格有三层，最外层是table；中间层是tr，表示行；最内层是td，表示列。
caption 表示表格标题。
th 表头，自带加粗效果。 （注：th要写在tr内。）
（2）表格属性：
border为边框，不写border表示没有，一般写1。
width height 是需要定义的宽高。
cellspacing 表格之间的空隙，一般把cellspacing设为0。
align = “center” 水平居中。写在 tr 或 td 都可。
<table border="1" width="200" height="100" cellspacing="0"><caption>标题</caption><tr align="center"><th>(1,1)</th><td>(1,2)</td></tr><tr align="center"><th>(2,1)</th><td>(2,2)</td></tr></table>
（3）合并单元格
合并列：
colspan （跨列合并），左合并右，把右边的删掉，删除的是同一个tr内的td。
合并行：
rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。删除的是不同tr内的td。
（4）练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table border="1" width="400" height="200" cellspacing="0" align="center"><tr><td></td><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th></tr><tr><td rowspan="2">上午</td><td>123</td><td>456</td><td>789</td><td>000</td><td>145</td><td>789</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td colspan="7">午休</td></tr><tr><td rowspan="2">下午</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr></table></body></html>
本文转载自: https://blog.csdn.net/m0_46317766/article/details/141397025
版权归原作者 what️ 所有， 如有侵权，请联系我们删除。
版权归原作者 what️ 所有， 如有侵权，请联系我们删除。