html总结(呕心沥血版)

你眼里有一条星河照耀着我

已于 2022-08-26 19:54:57 修改

阅读量662

点赞数 1

分类专栏：笔记文章标签： html 前端 css

于 2022-08-25 23:35:20 首次发布

本文链接：https://blog.csdn.net/qq_51986661/article/details/126521113

版权

本文详尽总结了HTML的基础知识，包括标题段落、H5语义化标签、表格、列表、form表单、以及面试常见问题。深入探讨了表格的rowspan和colspan属性、无序和有序列表的用法、form表单的各元素以及响应式图片处理，适合HTML初学者和面试复习。

摘要由CSDN通过智能技术生成

1.标题段落与文字

p	段落标签
br	换行标签（单标签，自闭和）
hr	水平线
h1~h6	标题标签
div	块元素
span	行内元素
a	连接标签

1.1文本格式化标签

b	加粗无语义
strong	加粗有语义
i	倾斜无语义
em	倾斜
u	下划线
ins	下划线
s	删除线
ins	删除线

1.2上标下标

sup	上标
sub	下标

2.H5新增语义化标签

header	文档的头部区域
nav	导航部分
section	文档的节
artcle	独立的内容
aside	页面主区域的内容
figcaption	规定独立的流内容
footer	页脚部分
img	图像标签
audio	音频标签(mp3)
video	视频标签(mp4)

3.表格

table	表示表格,表格所有内容都需要写在table标签之间
caption	表格标题(会默认居中，一个表格只能有一个)
thead	表头
tbody	身体
tr	单元行
th	每一列的标题(默认加粗),第一行标题单元格
td	单元格(存放数据)

rowspan:跨行合并。

colspan:跨列合并。

n代表合并的行数或者列数

###表格合并

<table border="1" width="500" height="249" cellspacing="0">
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVFoWoeu-1661441138062)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825212438951.png)]

若使用跨行合并第一行第一个和第二行第一个(跨行是竖向的)

跨行时rowspan=n,n代表跨行的数量,需要把相应跨越的行数中的td进行删除

<table border="1" width="500" height="249" cellspacing="0">  
        <tr> 
            <td rowspan="2">123</td> 
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
        </tr>
        <tr> 
            <td>123</td>
            <td>123</td>
        </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xzAnzKog-1661441138063)(C:\Users\24601\AppData\Roaming\Typora\typora-user-images\image-20220825212852826.png)]

若要使用跨列合并第一行第一个和第一行第二个(跨列是横向的)

跨行时colspan=n,n代表跨列的数量,需要把相应跨越的列数中的td进行删除

 <table border="1" width="500" height="249" cellspacing="0">
            <tr> 
                <td>123</td> 
                <td>123</td>
            </tr>
            <tr> 
                <td>123</td>
                <td>123</td>
            </tr>
            <tr> 
                <td colspan="2">123</td>
            </tr>
    </table>