HTML复习之基础标签

基础介绍

学习HTML->HTML标签->HTML标签语义
在合适的位置使用合理的标签，设计网页结构
标签：

注释标签

标题标签

段落标签

无语义标签

图像标签

超链接标签

列表标签

表格标签

表单标签

常用基础标签

注释标签

作用：给代码做注释，方便程序员阅读代码
程序不会执行注释内容

标题标签（重要）

作用：让网页更具有语义化
组成：6级标题标签，成对标签h1h6分别表示一级标题六级标题
特征：
- 独占一行->块元素
- 有垂直间距文字加粗
- 字号逐渐减小，一级最大，六级最小
- 重要性递减，即一级标题要比二级标题重要...

段落标签（重要）

作用：文字分段呈现，文字更有条理
组成：p，成对标签
特征：
- 独占一行->块元素有垂直间距

换行标签

作用：强制换行
组成：br，单标签
特征：简单的开始新的一行呈现内容

分割线标签

作用：分割内容
组成：hr，单标签
特征：页面呈现一条水平分割线

无语义标签（重要）

作用：相当于盒子，装内容
组成：
- div，span
- 无特定含义，使用频率很高
特征：
- div：
- 块元素->独占一行
- 默认：一行放一个div
- span：
- 行内元素->和其他元素共占一行
- 一行放多个span

文本格式化标签

作用：突出文字的重要性
分类：
- 加粗：strong b
- 倾斜：em i
- 下划线：ins u
- 删除线：del s
特征：
- 可以为文字设置加粗、倾斜、下划线、删除线效果

特殊标签

<：&lt;
>：&gt;  
空格：&nbsp;   &ensp;  &emsp;
&：&amp;

简单案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
            注释标签：
                给代码做注释，方便程序员阅读代码
                程序不会执行注释内容
         -->
        <!-- 
            标题标签：
                作用：让网页更具有语义化
                组成：6级标题标签，成对标签h1~h6分别表示一级标题~六级标题
                特征：
                    独占一行->块元素
                    有垂直间距
                    文字加粗
                    字号逐渐减小，一级最大，六级最小
                    重要性递减，即一级标题要比二级标题重要...
         -->
        <h1>静夜思</h1>
        <h3>李白</h3>
        <!-- 
            段落标签：
                作用：文字分段呈现，文字更有条理
                组成：p，成对标签
                特征：
                    独占一行->块元素
                    有垂直间距
         -->
        <p>床前明月光</p>
        <p>疑是地上霜</p>

        <!-- 
            换行标签：
                作用：强制换行
                组成：br，单标签
                特征：
                    简单的开始新的一行呈现内容
        -->
        <p>
            老舍（1899年2月3日—1966年8月24日），男，原名舒庆春，字舍予，另有笔名絜青、鸿来、非我等。
            <br>
            因为老舍生于立春，父母为他取名“庆春”，大概含有庆贺春来、前景美好之意。上学后，自己更名为舒舍予，含有“舍弃自我”，亦即“忘我”的意思。北京满族正红旗人。
            [1] 中国现代小说家、作家、语言大师、人民艺术家、北京人艺编剧 [2] ，新中国第一位获得“人民艺术家”称号的作家。代表作有小说《骆驼祥子》《四世同堂》，话剧《茶馆》 [34] 《龙须沟》 [35] 。 [3]
        </p>
        <!-- 
            分割线标签：
                作用：水平的分割线
                组成：hr，单标签
                特征：页面呈现一条水平分割线
         -->
        <hr >
        <p> 老舍的一生，总是忘我地工作，他是文艺界当之无愧的“劳动模范”。1966年8月24日，由于受到文化大革命运动中恶毒的攻击和迫害，老舍被逼无奈之下含冤自沉于北京太平湖。 [4] 1978年，老舍得到平反，恢复“人民艺术家”的称号。
            [6] 2017年9月，中国现代文学长篇小说经典《四世同堂》由东方出版中心出版上市。这是该作自发表以来第一次以完整版形式出版。 [5] 墓碑上刻写着老舍的一句话：“文艺界尽责的小卒，睡在这里。”
        </p>
        <!-- 
            无语义标签：
                作用：相当于盒子，装内容
                组成：div，span
                    无特定含义，使用频率很高
                特征：
                    div：
                        块元素->独占一行
                        默认：一行放一个div
                    span：
                        行内元素->和其他元素共占一行
                        一行放多个span
         -->
         <div>
             <p>举头望明月</p>
             <p><span style="color: red;">低</span>头思<span style="color: aqua;">故乡</span></p>
         </div>
         <!-- 
            文本格式化标签：
                作用：突出文字的重要性
                分类：
                    加粗：strong  b
                    倾斜：em  i
                    下划线：ins  u
                    删除线：del  s
                特征：
                    可以为文字设置加粗、倾斜、下划线、删除线效果
         -->
        <p><strong>今天</strong><em>天气</em>很<ins>好</ins></p>
        <!-- 
            特殊标签：&xxx;
                <：&lt;
                >：&gt;  
                空格：&nbsp;   &ensp;  &emsp;
                &：&amp;
         -->
        <!-- a加粗d -->
        <!-- a<b  c>d -->
        a&lt;b&ensp;c&gt;d
        
        &amp;
    </body>
</html>