HTML标签入门—day1

1.注释的写法：这是注释的写法

<html>
    <head>
        <title>我的网页</title>
    </head>
    <body>
        这是我的第一个网页，怎么样，厉害吧！
        <!--这是主体内容-->
    </body>
</html>

2.标题使用：
一级标题：<h1></h1>
二级标题：<h2></h2>
...
六级标题：<h6></h6>

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <h1>第一个网页</h1>
        <h2>第一个网页</h2>
        <h3>第一个网页</h3>
        <h4>第一个网页</h4>
        <h5>第一个网页</h5>
        <h6>第一个网页</h6>
        这是我的第一个网页，怎么样，厉害吧！
    </body>
</html>

3.排版标记：<p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>2019年全国两会来了。回顾2013-2018年全国两会，习近平先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。</p>
    <p>十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。</p>
</body>
</html>

4.水平线：<hr />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    2019年全国两会来了。回顾2013-2018年全国两会，习近平先后36次“下团组”，和代表委员亲切交流、共商国是，讲话涉及科技创新、脱贫攻坚、深化改革、作风建设等。
    <hr />
    十三届全国人大二次会议3月4日（星期一）上午11时15分在人民大会堂新闻发布厅举行新闻发布会，由大会发言人就大会议程和人大工作相关的问题回答中外记者提问。
</body>
</html>

5.换行：<br>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    今天<br />明天<br />后天
</body>
</html>

6.字体标记:
粗体：<b></b>
斜体：<i></i>
下划线：<u></u>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <b>加粗的字</b>
    <i>倾斜的字</i>
    <u>带有下划线的字</u>
</body>
</html>

7.强调标记：<strong>、<em>、<ins>
强调标记，通过加粗来强调：<strong></strong>
强调标记，通过斜体来强调：<em></em>
强调标记，通过下划线来强调：<ins></ins>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <strong>加粗的字</strong>
    <em>倾斜的字</em>
    <ins>带有下划线的字</ins>
</body>
</html>

(1)字体标记和强调标记都能实现视觉效果，但含义是有区别的，强调标记在SEO（搜索引擎优化）的角度，权重更高；
(2)强调标签具有语义化，语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前

8.小案例：<h1>、<h6>、<hr />、<p>的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>中央气象台发暴雨蓝色预警 东北局部地区有大暴雨</h1>
    <h6>2018-08-23 06:07:00 来源：中国新闻网（北京）</h6>
    <hr />
    <p>(原标题：中央气象台发布暴雨蓝色预警 东北局部地区有大暴雨)</p>
    <p>中新网8月23日电 中央气象台8月23日06时发布暴雨蓝色预警：</p>
    <p>预计8月23日08时至24日08时，黑龙江东北部、吉林中东部、辽宁东部、云南西南部、贵州中部、重庆南部、福建西北部和东南部以及台湾岛等地的部分地区有大到暴雨，其中，吉林东南部、辽宁东部、贵州中部以及台湾岛东部局地有大暴雨或特大暴雨(250~300毫米)；上述部分地区伴有短时强降水(小时雨量20~50毫米，最大可达60毫米以上)，局地有雷暴大风等强对流天气。</p>
</body>
</html>

9.标签的属性

1.标签的分类

双标签：成对出现的标签叫双标签，内容写在标签中间-----><p>段落</p>
单标签：单个的标签叫做单标签，没有内容只有属性-----><hr>

2.属性

每个标签都有自己的属性（特性）-----单标签和双标签都有属性
一个标签可以有多个属性
每个属性都有对应的值，值要用引号引起来（单引号和双引号都可以）
属性之间使用空格隔开
属性没有顺序

3.属性的使用

语法：<标签名属性1="值1" 属性="值2"></标签名>

<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        <font size="7" face="叶根友毛笔行书2.0版" color="red">字体标签</font>普通文字
    </body>
</html>

10.pre预排板标签： <pre>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <pre>
                                 上
    左                                                      右
                                 下
    </pre>
</body>
</html>

11.字体标记：<i>、<u>、<b>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!--
双标签，成对出现的
对应word文档中的文字加粗，文字倾斜和文字下划线
-->
    阿斯顿发<i>文字倾斜</i>阿萨<u>德刚阿</u>萨德刚<b>摇人</b>阿斯顿发阿斯顿发阿斯顿发撒旦法
    <hr>
    阿斯顿发<em>文字倾斜</em>阿萨<ins>德刚阿</ins>萨德刚<strong>传智播客</strong>阿斯顿发阿斯顿发阿斯顿发撒旦
</body>
</html>

12.标签属性：color、face、size

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <hr width="500"><!-- width：宽度 -->
    <font color="red" face="华文行楷" size="7">标签属性</font>
</body>
</html>

13.列表标签： <ul type="disc">、<li>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!--
    列表标签，不是一个，需要配合li使用
    无序列表：每一项不区分顺序
    ul控制列表前面的标志的属性：type------disc(小圆点)/circle(小圆圈)/square(实心方块)
-->
    <ul type="disc">
        <li>这是第一条</li>
        <li>这是第二条</li>
        <li>这是第三条</li>
    </ul>
</body>
</html>

14.有序列表

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!--
有序列表：ol配合li
控制序号的属性：type------a/A/i/I/1
控制序号开始的属性：start----必须是数字
-->
    <ol type="a" start="2">
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ol>
</body>
</html>

15.自定义列表：dl、dt、dd

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- 
html定义网页结构的-----标签来定义
css----修饰标签的
-->
    <!--
自定义列表：dl dt dd
注意：dt和dd是同级别的标签（兄弟关系）
-->
    <dl>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
    </dl>
</body>
</html>

16.案例:四大名著

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- 标题标签的快捷方式：ctrl+1就是h1 -->
    <h1>四大名著</h1>
    <ul>
        <li>
            <h3>《水浒传》</h3>
            <p>
                《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。
            </p>
        </li>
        <li>
            <h3>《三国演义》</h3>
            <p>
                《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本
                。
            </p>
        </li>
        <li>
            <h3>《西游记》</h3>
            <p>
                西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。
                。
            </p>
        </li>
        <li>
            <h3>《红楼梦》</h3>
            <p>《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。
            </p>
        </li>
    </ul>
    <h1>四大名著</h1>
    <ul>
        <li>
            <h3>《水浒传》</h3>
            <p>
                《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。
            </p>
        </li>
        <li>
            <h3>《三国演义》</h3>
            <p>
                《三国演义》是综合民间传说和戏曲、话本，结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料，以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早，分24卷，240则。清初毛宗岗父子又做了一些修改，并成为现在最常见的120回本
                。
            </p>
        </li>
        <li>
            <h3>《西游记》</h3>
            <p>
                西游记以民间传说的唐僧取经的故事和有关话本及杂剧（元末明初杨讷作）基础上创作而成。
                。
            </p>
        </li>
        <li>
            <h3>《红楼梦》</h3>
            <p>《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本，定名《红楼梦》。亦有版本作《金玉缘》。
            </p>
        </li>
    </ul>
</body>
</html>

17.超级链接: <a href="科比.pptx">

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- 内部链接 -->
    <!--<a href="https://www.baidu.com/">百度</a>-->
    <!-- 外部链接 -->
    <!--<a href="12-四大名著.html">四大名著</a>-->
    <!-- 下载链接 -->
    <a href="科比.pptx">看科比</a>
</body>
</html>

18.锚点链接:<a href="#top">

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!--<a href="#top">回到顶部</a>-->
    <div style="width:20px;">
        上次写了古装剧的幕后拍摄，为大家“揭秘”了一下古装剧中的一些情节到底是怎么拍出来的。这次呢，就趁热打铁，让我们一起走近现代剧，看看现代剧的拍摄中有什么“不为人知的秘密”吧~
        <p id="dibu">这是底部</p>
        大家都知道，影视剧中经常会出现“追车”的情节，看着演员边努力奔跑边声嘶力竭喊话的样子，有的时候还真的挺心疼的~
    </div>
    <a href="#dibu">直达底部</a>
</body>
</html>

19.相对路径:../../a.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- 相对路径 -->
    <!-- 当前文件夹 -->
    <!--<a href="./12-四大名著.html">看四大名著</a>-->
    <!-- ../代表上级文件夹：当前文件夹的上级文件夹 -->
    <a href="../../a.html">看四大名著</a>
    <!-- 绝对路径 -->
</body>
</html>
<!-- 相对路径 -->
<!-- 当前文件夹 -->
<!--<a href="./12-四大名著.html">看四大名著</a>-->
<!-- ../代表上级文件夹：当前文件夹的上级文件夹 -->
<a href="../../a.html">看四大名著</a>
<!-- 绝对路径 -->
</body>
</html>

20.绝对路径:<a href="file:///C:/Users/langye/Desktop/1-html1/dd.html">

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- 绝对路径，从电脑的根目录找 -->
    <a href="file:///C:/Users/langye/Desktop/1-html1/dd.html">看四大名著</a>
</body>
</html>

21.加载图片路径:<img src="C:\Users\langye\Desktop\1-html1\ddd\1.png" alt="瓷娃娃" title="紫色的娃娃" width="400" height="100">

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
</head>
<body>
    <!-- source源 src="图片的路径"   image   img      -->
    <img src="C:\Users\langye\Desktop\1-html1\ddd\1.png" alt="瓷娃娃" title="紫色的娃娃" width="400" height="100">
    <a href=""></a>
</body>
</html>