Html总结---持续更新中 2022.8.4-CSDN博客

本文链接：https://blog.csdn.net/AO_AEO/article/details/126165312

一、网页结构/基础

文件类型为html，超文本标记语言

<!DOCTYPE html>
<!-- 注释标签，第一行代码是声明，本文件中遵循HTML5语言规范 -->
<html lang="en">
<!-- 成对的标签，开始标签，结束标签， -->
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
	主体
</body>

</html>

二、基础标签

1.img 图片标签

<img src="图片地址" alt="图片飞走了" title="椰子树">

alt: 当图片无法正常加载时，显示此提示文字

title: 当鼠标悬停在图片上时，显示此文字

绝对路径-如

C:\Users\w5725\Desktop\预科062\0704\img\161H4HI-2.jpg

相对路径-

…/ 回到上一级
./ 或直接写名字是统计文件
/ 打开下级文件

    <img src="C:\Users\w5725\Desktop\预科062\0704\img\161H4HI-2.jpg" alt="图片飞走了" title="椰子树">
    <!-- 绝对路径 -->
    <img src="../img/161H4HI-2.jpg" alt="">
    <img src="03.jpg" alt="" style="width: 200px;height: 200px;">

路径问题(重点)

相对路径:

…/回到上一级

./或直接写名字是同级的文件

/打开，下一级

2.常用标签 h1~h6 p br

p 段落标签块级标签
h1~h6 标题标签
br 块级标签

代码显示：

    <p></p>
    <h1></h1>
    <h3></h3>
    <h6></h6>
    <br>

3.超链接

最简单的书写方式
<a href=""></a>

属性

hrdf: 超链接地址可以是本地文件可以链接页面内的ID元素

taiget: 常用的值有 _blank 在打开链接时，不关闭本页

可以嵌套

<a href="#id"><img src="./image/1.jpg" alt=""></a>

在点击a标签内的元素时，跳转到a链接href

4.标签 strong em sub sup

strong 加粗
em 斜体
sub 下标
sup 上标

    <strong>加粗</strong>
    <em>斜体</em>
    <sub>下标</sub>
    <sup>上标</sup>

5.div与span

div 块级元素占满一行有宽高
span 行内元素不占满一行没宽高靠内容撑开

<div>块级</div>
<span>行内</span>

三、标签分类

行内标签
1. 不独占一行，设置宽高无效
块级标签
1. 独占一行，可以设置宽高
嵌套关系

块级元素能嵌套行内标签和块级标签

p标签不能嵌套其他块级

行内标签能嵌套行内标签

a不能嵌套自己

转换元素类型

/* 元素类型转化,转化为行内块元素 */
            display: inline-block;
            
            
            inline：行内类型
            block：块级类型
            inline-block：行内块类型

四、标签的嵌套

1.表格

    <table border="1px solid">
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
    </table>

2.无序列表

   <ul>
        <li>1111234567
            <ul>
                <li>2222</li>
                <li>2222</li>
                <li>2222</li>
            </ul>
        </li>
        <li>1111234567</li>
        <li>1111234567</li>
        <li>1111234567</li>
        <li>1111234567</li>
    </ul>

3.有序列表

    <ol>
        <li>有序列表
            <ul>
                <li>无序嵌套</li>
                <li>无序嵌套</li>
                <li>无序嵌套</li>
            </ul>
        </li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

4.标题列表

    <dl>
        <dt>一级、、</dt>
        <dd>二级
            <ul>
                <li>dhka</li>
                <li>dhka</li>
            </ul>
        </dd>
        <dd>二级</dd>
        <dd>二级</dd>
        <dt>一级</dt>
        <dd>二级</dd>
        <dd>二级</dd>
        <dd>二级</dd>
        <dt>一级</dt>
        <dd>二级</dd>
        <dd>二级</dd>
        <dd>二级</dd>
    </dl>