2.前端html之常用标签

• 标签分类，head/boday内基本标签 
• 特殊符号，id(锚点)与class标记方式
• 常用标签

1.引入
    (1)标签分类
        a.单双：
            双标签：<h1></h1>,<a href=""></a>
            单标签：<img src="" alt=""
        b.占位:
            块儿级标签：独占一行(块)
                h1-h6，p   div
                    1).块儿级标签可以修改长宽，行内标签不可以修改（修改了也不会有变化）
                    2).块儿级标签内部可以嵌套任意块儿级标签和行内标签
                       但p标签虽然是块儿级标签，但是它只能嵌套行内标签，不能嵌套块儿标签
            行内标签：自身文本多大就占多大：
                i，u，s，b  span
                    1).行内标签不能套块儿级标签，可以嵌套行内标签
    (2)以HTML架构学标签
        a.head内标签：不是给用户看到，一些配置信息给程序员/浏览器看
        b.boday内标签：用户看的，浏览器进行渲染页面


2.head内基本标签
    (1)title:双标签：网页标题
    (2)style:双标签，用于写css代码
        <style>
            h1{
                color: aquamarine;
            }
        </style>
    (3)script:双标签，写js代码，也可以用来引入外部js文件
        <script>
            alert('zcy')
        </script>
        <script src="js文件路径"></script>
    (4)link:单标签，用来引入外部css文件
        <link rel="stylesheet" href="css文件路径">
    (5)meta:单，跳转
        <meta http-equiv="refresh" content="2;url=https://www.baidu.com/">  两秒后刷新跳转到百度页面
        <meta http-equiv="x-ua-compatible" content="IE=edge">               告诉IE以最高级模式渲染文档(了解)
        <meta http-equiv="content-Type" charset="UTF8">                     指定文档的编码类型(需要知道)
        <meta name="keywords" content="教育,科研,个人学习">                  指定keywords后，后面的关键字会提高浏览器搜索到网页可能
        <meta name="description" content="个人学习-一个小白的笔记">           网页描述信息


3.boday内基本标签
    <h1>标题标签，1-6级</h1>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    <p>段落标签</p>
    <br>换行
    <hr>水平分割线


3.特殊符号
    &nbsp;  空格
    &gt;    大于号
    &lt;    小于号
    &amp;   &
    &yen;   ￥
    &copy;  版权
    &reg;   商标


5.标签两个标记方式
    (1)id值
        类似于标签的身份证号在同一个html上id值不能重复
    (2)class值
        类似名字，也类似面向对象的继承，可以同时标记多个标签
        补充：标签除了默认书写样式，也可以自定义样式，用于临时存储信息
            <p id="sd" class="cv" user='zcy' pwd="123"></p>


6.常用标签
    (1)div:  块儿级标签
    (2)span: 行内标签
        通常使用时，用div来占块，用span来嵌套文本
    (3)img：图片标签<img src="" alt="" title="" height="" width="">
            src：图片路径，可以本地也可以网上
            alt:当图片加载不出来时，显示图片描述信息
            title:当鼠标悬浮在图片上时，显示提示信息
            height/width:修改一个大小，另一个会等比例缩放，如果不按等比例两个都修改，图片会失真
    (4)a：链接标签<a href="" target="" id="">点击</a>
            href：放url(或.html文件)，点击跳转到url页面
            target:跳转方式默认_self:当前页面跳转。新建页面跳转:_blank
            id:可以设置锚如id="hr",在别的标签设置锚点id="#hr",点击锚点页面跳转到设锚处
    (5)ul>li：无序列表
            a.格式：
                <ul type="">
                    <li type="">第一项</li>
                    <li>第二项</li>
                    <li>第三项</li>
                </ul>
            b.type：默认disc：圆实心
                    circle：圆空心
                    square：方块实心
                    none:没有标识
              在引用css时：ul{list-style: ;}
            c.快速创建
                    ul>li*n：n为设置项数
                    ul>li{zcy}*3：3为设置项数，{}内为每项相同内容
                    ul>li{$}*3：3为设置项数，$为以1开始自增
    (6)ol>li：有序列表
            a.格式：
                <ol type="" start="">
                    <li>第一项</li>
                    <li>第一项</li>
                    <li>第一项</li>
                </ol>
            b.type：默认：数字自增
                    A/a：字母自增
                    I：罗马数字自增
            c.start：起始位
            d.快速创建与ul一样
    (7)dl>dt>dd：标题标签
            a.格式
                <dl>
                    <dt>第一
                        <dd>张飞</dd>
                        <dd>关羽</dd>
                        <dd>马克</dd>
                    </dt>
                    <dt>第二
                        <dd>谣</dt>
                        <dd>小米</dd>
                        <dd>梵蒂冈</dd>
                    </dt>
                    <dt>第一
                        <dd>士大夫</dd>
                        <dd>发出v</dd>
                        <dd>大十分</dd>
                    </dt>
                </dl>
            b.快速创建与ul一样,dl>dt{$}*3>dd*4