【HTML5基础语法】HTML基础语法知识学习笔记汇总

兮于怀

已于 2022-06-20 11:16:58 修改

阅读量300

点赞数 4

分类专栏： web前端文章标签： html html5 学习前端 web

于 2022-06-17 15:05:36 首次发布

本文链接：https://blog.csdn.net/qq_46009744/article/details/125333652

版权

web前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

HTML5知识全集

一、html文件标签

<!-- 

    html的文件一般为一个树形结构：
    每一个标签都有是一个结点，每一个标签一般都有一个开始标签和一个结束标签
    有的标签是没有结束标签的，比如meta，这种标签就是叶子节点
    在开始标签和结束标签中间的部分就是这个结点的所有子节点，在同一级的标签都是它的兄弟结点

    例： 根节点的标签为html，html的子节点为head标签和body标签，这两个标签为兄弟节点......
 -->

<!-- 
        注释：
        html中没有单行注释，只有多行注释
        注释快捷键：ctrl+/,再按一下ctrl+/就可以取消注释
        注释时习惯记一些辅助信息:不需要给用户显示出来,但是写代码时需要看到的一些信息,比如说"这是标题"
-->

<!--
    vscode中写标签的几个技巧：
    1.写上一个标签之后，打上一个右括号，他就会自动帮我们把结束标签
    2.(更方便)可以先不写做括号，直接写标签，会出现补全，如果当前是我们想要的，按一下tab会自动补全出来
-->

<!-- 
    在vscode中，一个基础版本的html，打上一个！再按一下Tab就可以自动补全出来html框架。这是vscode的功能
 -->

<!DOCTYPE html>
<!--表示文件的类型，所有的网页都需要写上之一句，直接背过-->

<html>

<head>
    <!-- 
        head标签：存配置文件(样式文件(css文件)、js文件、标题title、meta信息...)，在网页内看不见
    -->
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <!-- 
        body标签：存内容，在网页中能看见
    -->
    <h1>Hello World</h1>
    <!--
        html中有很多标签，记几个常用的即可，其他的现用现查
        标签有很多,但是不用记那么多,现用现查就行,绝大多数标签可以看成是span和div扩展出来的,写到最后可能就无脑div了
    -->

</body>

</html>

二、文本标签

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <!--
        标签有很多,记住几个常用的即可,其他现用现查就行。一般写网站应用写到最后可能就无脑div了，写网页可能还差点。
        绝大多数标签可以看成是span和div扩展出来的。div也可以看成是从span上扩展出来的，绝大部分标签没有本质的区别，只不过是他们默认的css样式设置不一样
        html作者相当于是把公共的需求拿出来变成了一个独立标签，即在div和span的基础上加上一些特殊的样式，给它标准化了。
    -->

    <!-- div标签：
        作用：其实就是定义一堆代码块 
        优点：1）设置样式css时可以统一设置
              2）便于js处理操作，js可以直接处理操作div
        div其实就是逻辑把他们归为一类，打包在一起，方便进行整体操作
    -->
    <div>hello</div>
    <div>world</div>
    <!-- div为块状标签：可以认为默认带一个回车 -->

    <span>hello</span>
    <span>world</span>
    <!-- span为行内标签：可以认为默认不带回车 -->
    <!-- 还有img、video、audio也是行内标签  -->

    <h1>hello world</h1>
    <h2>hello world</h2>
    <h3>hello world</h3>
    <h4>hello world</h4>
    <h5>hello world</h5>
    <h6>hello world</h6>
    <!-- 大小递减，粗细递减 -->

    <p>
        到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
    </p>
    <p>
        到南京时，有朋友约去游逛，勾留了一日；
        第二日上午便须渡江到浦口，下午上车北去。
        父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。
        他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。
        其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。
        我再三劝他不必去；他只说：“不要紧，他们去不好！”
    </p>
    <!-- P标签就是一段段落,即在div的基础上加了一些两个限制，加了前后行间距(因为段落与段落之间会加一些行间距)-->
    <!-- p标签和绝大多数html标签会把空格和换行过滤掉 -->

    <!-- ><大于号小于号是在html是特殊字符，需要转义 -->
    <pre>
#include &lt;iostream&gt;
using namespace std;
int main () 
{
    int a, b;
    cin >> a >> b;
    cout << a + b << endl;
    return 0;
}
    </pre>
    <!-- pre标签与p标签的区别：pre标签会保留原文格式，是等宽字体，并且保留空格和换行 -->
    <!-- 等宽字体：是指每一个字符的宽度是都是一样的，一般代码都是等宽字体 -->

    <hr>

    <p>#include &lt;iostream&gt;<br>
        using namespace std;<br>
        int main () {<br>
        int a,&nbsp; b;<br>
        cin >> a &nbsp;>> b;<br>
        cout << a + b << endl; <br>
            return 0; <br>
            } <br>
    </p>

    <hr>
    <p>
        到<i>南京</i>时，有朋友约去游逛，勾留了一日；<br>
        <b>第二日</b>上午便须渡江到浦口，下午上车北去。<br>
        父亲因为事忙，<del>本已说定不送我，</del>叫旅馆里一个熟识的茶房陪我同去。<br>
        <ins>他再三嘱咐茶房，</ins>甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。<br>
        其实我那年已二十岁，&nbsp;&nbsp;北京已来往过两三次，是没有什么要紧的了。<br>
        <mark>他踌躇了一会，</mark>终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
    </p>
    <hr>
    <!-- br标签也能实现换行，空格的话在文本内加&nbps; 想要加几个空格就加几个&nbps; -->
    <!-- hr标签就是加一个水平线 -->
    <!-- i标签是斜体 -->
    <!-- b标签是加粗 -->
    <!-- del标签是删除线 -->
    <!-- ins标签是下划线 -->
    <!-- strong标签也是加粗 -->
    <!-- mark标签把标记的内容换背景色 -->
    <!-- 这些标签本质上都是span(下滑)标签给加了不同的样式 -->
</body>

</html>

三、图片

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>Hello World</h1>

    <img src="https://cdn.acwing.com/media/article/image/2022/03/01/1_3ec4c1cf99-mountain.jpg" alt="">
    <img src="/Learn1-html基础/images/mountain.jpg" alt="">

    <br>
    <img width="300" src="/Learn1-html基础/images/mountain.jpg">
    <img height="100" src="/Learn1-html基础/images/mountain.jpg">
    <img width="50" height="100" src="/Learn1-html基础/images/mountain.jpg">

    <br>
    <img width="250" height="100" src="/Learn1-html基础/images/mountain.jpg" alt="大山">
    <img width="250" height="100" src="/Learn1-html基础/images/mountainssssss.jpg" alt="大山">

    <!-- 
        img标签是行内标签，一行放不过来时就会自动换行(图片是一种特殊的文本)
        img标签有四个属性：src、alt、height、width，其中src是必须要写的，alt建议也带上
        src：设置图片的地址，可以用图片web链接地址，也可以用本地的图片的绝对路径(也可以看成是相对路径，从/开始写,/就是当前项目工程的根目录)
        height：设置高度，单位是像素，如果只设置高度，会把宽度等比列缩放
        width：设置宽度，单位是像素，如果只设置宽度，会把高度等比例缩放
        alt：当图片无法显示时，会显示alt中的内容，alt中一般写这个图片表示什么含义
     -->
</body>

</html>

四、视频与音频

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>Audios</h1>


    <!--
        audio标签也是行内标签
        audio标签有两种写法：在开始标签中要加上controls,controls是播放控制栏
        1）使用src属性播放
        2）利用source标签添加多个视频，按照顺序智慧出现一个视频。如果第一个无法播放，就播放第二个。
     -->

    <audio controls src="/Learn1-html基础/audios/bgm.mp3">无法播放</audio>
    <audio controls src="/Learn1-html基础/audios/bgmmmmmm.mp3">无法播放</audio>

    <br>

    <audio controls>
        <source src="/Learn1-html基础/audios/sound1.mp3" type="audio/mpeg">
        <!-- source标签一定要加上type属性，不知道填啥直接查,type就是填该资源的格式 -->
        <source src="/Learn1-html基础/audios/sound2.mp3" type="audio/mpeg">
    </audio>

    <br>
    <audio controls>
        <source src="/Learn1-html基础/audios/sound11111.mp3" type="audio/mpeg">
        <source src="/Learn1-html基础/audios/sound2.mp3" type="audio/mpeg">
    </audio>

    <br>


    <h2>videos</h2>

    <!-- 
        video也是行内标签，video的使用与audio一样，不过可以设置视频在页面中显示的高度和宽度属性
        controls为播放控制栏，不加没法播放
        autoplay为自动播放，没法暂停
        想要看细节去MDN查就可以了 
     -->

    <video controls src="/Learn1-html基础/videos/video1.mp4"></video>
    <video controls width="300" height="500" src="/Learn1-html基础/videos/video1.mp4"></video>
    <video controls width="300" src="/Learn1-html基础/videos/video1.mp4"></video>
    <br>

    <video controls width="500">
        <source src="/Learn1-html基础/videos/video2.mp4" type="video/mp4">
        <source src="/Learn1-html基础/videos/video1.mp4" type="video/mp4">
    </video>


</body>

</html>

五、超链接

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>超链接</h1>
    <!-- 
        超链接是a标签：点开超链接就会跳到一个新页面
        1.href属性：写地址，两种写法。1）可以跳到其他网站但要注意加上协议https 2）可以跳到站内,即同一项目目录文件下的网页
        2.target="_blank":在新标签页面中打开该页面
        3.a标签是行内标签
        4.开始标签和结束标签中一定要加内容，也可以加任意嵌套的标签，内容是显示在网页上能看到的(图片是一种特殊的文本)
     -->
    <a href="https://www.acwing.com/" target="_blank">AcWing</a>
    <a href="/Learn1-html基础/html/1.2文本标签.html">文本标签</a>

    <a href="https://www.acwing.com/" target="_blank">
        <img width="300" src="/Learn1-html基础/images/logo.png" alt="logo">
    </a>


</body>

</html>

六、表单

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>表单From</h1>
    <!-- 
        表单以前用的比较多，现在用的少了。如果写web应用的话，一般直接用Ajax，Ajax就不用写显示表单了。
        表单是方便跟后端服务器交互的功能。比如登录一个界面，传用户名密码。
        表单中的标签都是行内标签，不换行
        form即是表单标签，action属性中填的是地址，这个地址可以是一个后端函数，也可以是一个其他页面地址
        input是输入标签，其中可以有很多属性，具体的去MDN中查就行了，记住几个常见的即可。
        使用input时，一定要声明写上type属性，type属性中有很多样式值，表示不同类型的input输入标签，比如：text是写一个文本。

        id的作用：
        input标签使用时通常会绑定一些label标签结合使用，label是用来绑定某一个输入元素的，绑定时通过id来绑定，id在每一个页面中要唯一确定。
        label中的for对应input中的每个id,而不是name
        好处：这样label和input其实就是一个东西，绑在一块了。

        name的作用：
        提交之后会发现，网页链接后会有参数。url?参数名1(name)=参数值(填的值)&参数名2=参数值
        url网址链接以一个?分隔,?之后的为参数，每一个参数都是参数名称=参数值的形式
        会发现：name就是参数名称，填的值就是参数的值。所以传给后端的时候，就是把name和值对应起来通过url传给后端
        这个参数是浏览器自己拼接自己做的,在本地看到是明文，如果使用的是https协议,传给服务器后端的是加密过的密文
        name和id不一定一样，可以随便起。

        maxlength：规定填写内容最大长度
        minlength：规定填写最小长度
        required:是否必填,用的时候直接加上加这个单词即可，加上必须填，不加可以不填
        placeholder：当表单控件为空时，控件中显示的内容
        

        button是按钮标签。


     -->

    <form action="https://www.acwing.com/">
        <!-- 
            action是全部要求输入提交之后访问某个函数，也可以访问某个链接
            提交之后会自动跳转到这个链接页面
            submit也有一个跳转的作用，跟直接点链接的区别是：
                链接是直接跳到这个链接，而表单是先把数据交给服务器，服务器根据提交的数据再返回表单，多了向后端发数据的操作。
                即一个是get()只获取数据，一个是post()可以修改数据
         -->

        <label for="usename">用户名</label>
        <input type="text" placeholder="用户名" maxlength="10" required minlength="3" name="usename2" id="usename">
        <!-- 输入框的提示是浏览器自带的 -->

        <br>
        <label for="age">年龄</label>
        <input type="number" name="age" id="age">

        <br>
        <label for="email">邮箱</label>
        <input type="email" name="email" id="email">
        <br>
        <label for="email"></label>
        <input type="email" placeholder="邮箱" name="email" id="email">

        <br>
        <label for="password">密码</label>
        <input type="password" name="password" id="password">

        <br>
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file">

        <br>
        <label for="cpp">cpp</label>
        <input type="radio" name="ggg" value="cpp" id="cpp">
        <br>
        <label for="java">java</label>
        <input type="radio" name="ggg" value="java" id="java">
        <br>
        <label for="cpp">python</label>
        <input type="radio" name="123123" value="python" id="python">
        <!-- 
            注意：所有name完全一样的radio会构成一组，一组radio中最多只能选一个。
            即所有名称name一样的radio是互斥的，只能选一个
            比如:python跟cpp和java就构成了多选
         -->

        <br>
        <label for="ggg">文本编辑框</label>
        <textarea name="ggg" id="ggg" cols="50" rows="10"></textarea>
        <!-- 表示一个多行纯文本编辑控件，常用于评论或反馈表单中的一段意见，cols和rows在这里初始化行数和列数，只是初始化不是固定死的 -->


        <br>
        <button type="submit">提交</button>

        <!-- 
            在同一个form中，点击button会把form中所有的input里的内容提交，这个只是默认定义的，自己也可以用div+js实现
         -->


    </form>


    <form action="https://www.acwing.com/">
        <label for="lang">语言</label>
        <select name="lang" id="lang">
            <option value="">请选择</option>
            <option selected value="cpp">cpp</option>
            <option value="python">python</option>
            <option value="java">java</option>
        </select>
        <!-- select是多选框,option是各个选项，加selected是默认选项，js可以访问这些属性 -->

        <br>
        <button type="submit">提交2</button>
    </form>

</body>

</html>

七、列表

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>列表List</h1>
    <!-- 
        列表是div的扩展，list有两种：
        ul: unordered list 无序列表
        ol: ordered list 有序列表
        列表中内容的显示要用li标签括起来
     -->
    <ol>123</ol>
    <ol>
        <li>123</li>
    </ol>
    <ul>
        <li>123</li>
    </ul>

    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
    </ul>
    <!-- 内容前面是点，样式中加了内边距 -->

    <ol>
        <li>Fee</li>
        <li>Fi</li>
        <li>Fo</li>
        <li>Fum</li>
    </ol>
    <!-- 内容前面把点换成了123... -->

    <!--
         列表的嵌套，ol与ul之间可以随意嵌套
         列表中内容的显示要li括起来
         可以发现：无序列表前面的符号每一级是有变化的，有序列表没有变化
     -->
    <ol>
        <li>
            知识点
            <ul>
                <li>1.1 vscode的安装与配置</li>
                <li>
                    1.2 html基础标签
                    <ul>
                        <li>1.2.1 html文件结构</li>
                        <li>
                            <a href="https://www.acwing.com/file_system/file/content/whole/index/content/4084683/">1.2.2
                                文本标签</a>
                        </li>
                        <li>1.2.3 图片</li>
                        <li>1.2.4 音频与视频</li>
                        <li>1.2.5 超链接</li>
                        <li>1.2.6 表单</li>
                        <li>1.2.7 列表</li>
                        <li>1.2.8 表格</li>
                        <li>1.2.9 语义标签</li>
                        <li>1.2.10 特殊符号</li>
                    </ul>
                </li>
                <li>1.3 MDN官方文档</li>
            </ul>
        </li>
        <li>作业</li>
    </ol>



    <!-- 
        dl列表，对应一些名词解释 ，有三个参数：
        
        dl:定义这个列表
        dt:title名称 不缩进
        dd:describe描述 缩进
    -->
    <dl>
        <dt>Name</dt>
        <dd>Godzilla</dd>
        <dt>Born</dt>
        <dd>1952</dd>
        <dt>Birthplace</dt>
        <dd>Japan</dd>
        <dt>Color</dt>
        <dd>Green</dd>
        <dd>Orange</dd>
    </dl>
</body>

</html>

八、表格

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>表格table</h1>
    <!-- 
        table现在在h5里面用的非常少了，布局一般都直接用div标签实现，除非真的要做一个表格才会用table。
        (table表格很好写，所见即所得)

        table用来定义表格：
        有三部分构成：
        caption标签：表示表格名称，可以不加
        thead标签：头部区域，表头，默认加粗
        tbody标签：数据区域

        其中：
        不管头部区域还是数据区域，其中每一行要用tr标签括起来，r是row行
        头部区域中的每一个单元格用th表示
        数据区域中的每一个单元格用td表示

        其他的样式比如加粗、分割线、背景都可以在css中设置

     -->
    <table>
        <caption>成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>swl</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>小帅</td>
                <td>90</td>
                <td>90</td>
                <td>95</td>
            </tr>
        </tbody>
    </table>


</body>

</html>

九、语义标签

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>语义标签</h1>
    <!-- 
        语义标签其实就是替代了常见的一些加上class意义的div，因为div只有语法上的作用，没有实际的含义意义
        即以下两种写法是等价的，直接看语义标签，不需要看div的class就知道它是什么含义。

        h5中的语义标签让我们在写代码的时候更加简洁，而且让标签更具有实际的含义
        语义标签在使用的时候并没有硬性的规定，即任何你认为是标题的区域都可以用header，只要符合你的需求即可，按照你认为的意思来写即可

     -->
    <div class="header"></div>
    <div class="nav"></div>
    <div class="content"></div>
    <div class="footer"></div>

    <header></header>
    <nav></nav>
    <section></section>
    <article></article>
    <footer></footer>
    <figure>
        <figcaption></figcaption>
    </figure>

    <!-- 比如想做一个我的收藏的界面 -->

    <header>
        <h3>我的收藏</h3>
        <ul>

            <li><a href="/eidt.html">编辑</a></li>
            <li><a href="/contact.html">联系我</a></li>
            <li><a href="/about.html">关于我</a></li>
        </ul>
    </header>
    <hr>

    <section>
        <h4>图片</h4>
        <figure>
            <img width="100px" src="/Learn1-html基础/images/logo.png" alt="logo">
            <figcaption>logo</figcaption>
        </figure>
        <figure>
            <img width="100" src="/Learn1-html基础/images/mountain.jpg" alt="山">
            <figcaption>山</figcaption>
        </figure>
    </section>
    <hr>

    <section>
        <h4>文章</h4>
        <article>
            <h5>背影</h5>
            <p>
                到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三劝他不必去；他只说，“不要紧，他们去不好！”
            </p>
            <p>
                我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好坐位。他嘱我路上小心，夜里警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！
            </p>
        </article>
        <article>
            <h5>春</h5>
            <p>
                盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
            </p>
            <p>
                小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
            </p>
        </article>
    </section>
    <hr>

    <footer>
        &copy;版权所有 swl 起始-2022
    </footer>

</body>

</html>

十、特殊符号

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <!-- 存放编码形式 -->
    <meta name="description" contest="自古逢秋悲寂寥 ">
    <!-- despcription 是在搜索到网站时在标题下会出现的一些显示内容 -->
    <meta name="keywords" constest="算法，计算机，编程">
    <!-- keywords 是在搜索的时候搜哪些关键字可以让用户搜到我们的网站 -->
    <title>ggg</title>
    <!-- title标签：定义网页的标题以及在搜索引擎中显示该标题 -->
    <link rel="icon" href="/Learn1-html基础/images/logo.png">
    <!-- icon表示是图标的意思,标题上面带着的图标 ,hrep后面的图片要在当前文件目录下,一般要写成绝对路径即从/开始写 -->
</head>

<body>
    <h1>特殊符号</h1>
    <!-- 
        在html中，当我们需要用到一些特殊符号字符的时候，需要用转义字符来表示
     -->

    #include <iostream>
        <br>

        #include &nbsp;&nbsp;&nbsp;&nbsp;&lt;iostream&gt;
        &amp;
        &quot;
        &reg;
        &copy;
        &trade;

        <!-- 
            写web应用和直接写html页面的区别：
            写web时js会更多一些，操作的逻辑会更加复杂。主要是写页面以展示图文为主，应用的话一般以交互为主。侧重点不同。
            写页面的话大部分时间在写html和css，如果写应用的话，大部分时间在写js
        -->


</body>

</html>