WEB前端第二节，认识常用标签

认识各类标签

1. img图像标签

   <img src="tlp.png" alt="" width='200' title='这是它喵的小丑特朗普'>
   属性：
   width -> 给图片设置宽(单位像素).
   height -> 给图片设置高(单位像素).
   如果只设了宽或者高,则另一个尺寸会进行等比例缩放.
   
   alt -> 当图片显示不了时的替代文字.
   src -> 图片地址(为了显示某图片).
   title -> 图片被鼠标移入时的提示文字(全局属性).

2 超链接

    <a href="http://www.baidu.com" target='_blank'>百度一下</a>
    <a href="https://es6.ruanyifeng.com/">百度一下,去es6</a>
    <a href="www.baidu.com">百度一下,你就懵逼</a>

    <!-- href属性 -> 填写需要跳转到的网页地址. -->
    <!-- 这个地址需要写完整的地址 -->
    <!-- http -> 协议,网址必不可少的部分 -->
    <!-- https -> 加密的http,更安全 -->

    <!-- target属性 -> 规定新建标签页打开网页还是当前标签打开网页 -->
    <!-- _blank -> 新建标签页打开 -->
    <!-- _self -> 当前标签页打开 -->

3 标题

<!-- 标题标签有6个.标签名是h1到h6 -->

    <!-- 常用的是h3和h2. -->
    <!-- h1一个网页只能有一个.(根seo有关) -->
    <!-- 谷歌浏览器默认的字号大小是16px -->
    <!-- 一般常用的字号大小(非标题),14px或者16px.不要用13px这个大小. -->

    <h1>大标题</h1>
    <hr />
    <h2>大标题</h2>
    <hr />
    <h3>大标题</h3>
    <hr />
    <h4>大标题</h4>
    <hr />
    <h5>大标题</h5>
    <hr />
    <h6>大标题</h6>
    <hr />

    <!-- hr -> 分割线 -->

4 强调标签

    <strong>加粗</strong>
    <em>斜体</em>

    <b>b标签的加粗</b>

    strong和em的语义都是强调的意思.
    强调的样式,一个是加粗,一个是斜体.
    注意:他们提供的不是样式,而是语义.
    提供样式的标签都已经被抛弃了.

    这里的b标签没有语义.这个标签的作用只是提供了加粗的样式.因此这个标签被抛弃了.
    

5加样式标签

  <h3>这是一个牛逼的标题</h3>

    <!-- 提供居中样式 -->
    <center>这是一个牛逼的标题</center>
    <!-- 方便给文字添加样式 -->
    <font color='red'>东京奥运会</font>
    
    <!-- center和font标签的作用都是提供样式,因此都被抛弃了. -->

6span标签

  <!-- 这里span标签提供了什么语义? -->
        <!-- 没有语义 -->

    <!-- 一般用于处理特殊的文字样式 -->

    <p>
        <span style='color:red'>东京奥运会</span>是否会取消,或者延迟.
        美国如果能够把制造业迁回美国,可以给美工提供<span style='font-size:30px'>1000</span>万个工作岗位.
    </p>

7无序列标签

  <!-- 无序列表标签: -->

    <!-- ul -> 列表 -->
    <!-- li -> 列表项 -->
    <!-- 列表，就好比一个班级，列表项，就好比一个班级的一个同学(成员) -->
    <!-- ul和li一定是嵌套关系 -->

    <!-- 什么时候用列表标签? -->
        <!-- 多个相同的类似的数据,都可以用列表装起来 -->

    <!-- 你喜欢的水果:苹果,雪梨,香蕉,山竹. -->
    <!-- 你喜欢的明星:肖战,杨幂,杨超越,周杨青,易烊千玺. -->

    <ul>
        <li>首页</li>
        <li>分类</li>
        <li>秒懂百科</li>
        <li>特色百科</li>
        <li>权威合作</li>
    </ul>  

8有序标签

  <!-- 有序列表 -> 列表项有一定的顺序排列,不能乱 -->
    <ol>
        <li>第一名：肖战</li>
        <li>第二名：杨幂</li>
        <li>第三名：易烊千玺</li>
    </ol>

9定义列表

   <!-- 定义列表：
        dl -> 列表
        dt -> 列表项的名字
        dd -> 列表项的内容 -->

    <dl>
        <dt>姓名：</dt>
        <dd>易烊千玺</dd>
        <dt>性别：</dt>
        <dd>男人</dd>
        <dt>年龄：</dt>
        <dd>20</dd>       
    </dl>

10

 <!-- br -> 换行标签 -->

    <a href="http://www.baidu.com">百度一下</a>
    <br />
    <br />
    <a href="http://www.baidu.com">百度一下</a>
    <br />
    <br />
    <a href="http://www.baidu.com">百度一下</a>

    <!-- p标签不用换行 -->
    <p>1111111</p>
    <p>1111111</p>
    <p>1111111</p>

11表单标签

 <!-- 网页中有一些标签专门用来提供给用户进行操作的。
        输入操作，点击操作，选择操作。
    这些根用户交互的标签，统一叫表单标签。 -->
    
    <!-- 提供点击操作的是按钮：
        一般按钮
        提交按钮
        重设按钮 -->
    
    一般的按钮：
        <input type='button' value='普通按钮' />
        <button>普通按钮</button>
    
        <!-- input标签的type属性,用于表明当前表单标签的类型.
            这个类型可以有很多的值.例如,button,text,radio,checkbox,password.... -->

12各种表单

 <!-- 文本框 -->
    <input type="text" value='zhanghao' />
    <!-- 密码框 -->
    <input type="password" id="" value='123456' />
    <!-- 数字框 -->
    <input type="number" id="" value='100' step='5' />
    <!-- 颜色框 -->
    <input type="color" id="" value='#0022ff' />
    <!-- 邮件 -->
    <input type="email" id="" />
    <!-- 文件框 -->
    <input type="file" id="" />
    <!-- 电话 -->
    <input type="tel" id="" />
    <!-- 日期 -->
    <input type="datetime-local" id="" />
    <input type="month" id="" />
    <input type="time" id="" />

    <!-- 滑块 -->
    <input type="range" id="" />

    <!-- value -> 用来记录用户输入的信息 -->
    <!-- 用户输入，选择的结果实际上都存在value内。 -->

    文本输入框能够输入的状态 -> 活动焦点
    不能输入 -> 失去焦点。

13复选框

 <!-- 复选框(多选框):    -->
    <input type="checkbox" id="" value='苹果' /> 苹果
    <input type="checkbox" id="" value='山竹' /> 山竹
    <input type="checkbox" id="" value='香蕉' /> 香蕉

14lable标签

  <!-- label标签用于把当前的操作转移到别的表单身上 -->
    <!-- for属性用于指明转移到哪个表单身上。 -->
    <!-- for必须填目标表单的id值 -->

    <!-- <input type="checkbox" id="apple1" class='box' value='苹果' /><label for="apple2">苹果</label>
    <input type="checkbox" id="apple2" value='苹果' /> -->

    <label for="apple1">
        <input type="checkbox" id="apple1" class='box' value='苹果' />苹果
    </label>

    <label for="text">
        账号：<input type="text" id="text" value='' />
    </label>

15单选框

    <!-- 单选框如果需要实现'单选'的效果,一定需要使用相同的name -->

    请选择你的性别：

    <label for="man">
        <input type="radio" id="man" name='sex' value='男' /> 男
    </label>

    <label for="female">
        <input type="radio" id="female" name='sex' value='女' /> 女
    </label>

16选择框

    <!-- selected -> 默认显示的选择项 -->

    请选择你的生日：   
    <select name="" id='select'>
        <option value="1998">1998</option>
        <option value="1997">1997</option>
        <option value="1996">1996</option>
        <option value="1995">1995</option>
        <option value="1994" selected>1994</option>
    </select>

17文本域

    <!-- 单行输入 -->
    <input type="text" name="" id="" />

    <!-- 文本域，多行输入 -->
    <textarea name="" id="" cols="30" rows="10" >haahahahahaha</textarea>

    <!-- cols -> 列数 -->
    <!-- rows -> 行数 -->

    <!-- textarea -> 双标签，但是输入的内容还是记录在value内。 -->

18form表单

 <!-- name属性用来给value起个名字 -->
    <!-- <input type="text" name='sq' value=''> -->

    <!-- 给后端提交一个叫sq的数据 -->
    <form action="">
        <input type="text" name='sq' value=''>
        <input type="hidden" name="hidden" value='8888'>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

    <form action="">
        <input type="email">
        <input type="submit" value="提交邮箱">
    </form>

    <!-- 什么是互联网产品，互联网产品包括什么组成部分？ -->
    <!-- 网页，app，微信，QQ..... -> 互联网产品
    互联网产品一定包括
        前端-> 后端 -> 数据库 -->
    
    <!-- 前后端交互的大概过程 -->
    <!-- 前端需要发送一些信息给后端，后端从数据库中检索前端发送来的信息，然后返回相应的结果给前端 -->

    <!-- 前端如何发送信息给后端？ -->
        <!-- 通过ajax发送(后面学) -->
        <!-- 通过form表单发送消息 -->
    
    <!-- 如果前端要发送100个信息,那么后端如何区分这个100个信息? -->
        <!-- 因此前端必须给这100个信息起名字 -->

        <!-- 账号:asdfasdfasdf
        密码:asdfasfsdfsdf2323 -->

19表单的可用和禁用属性

   <!-- disabled -> 禁用表单 -->
    <!-- enable -> 表示可用 -->
    <!-- readonly -> 表示只读(不能修改value) -->

    <input type="text" value='yyyyy' disabled readonly />
    <input type="button" value="按钮" disabled />
    <input type="checkbox" value="" disabled />
    <input type="radio" value="" disabled />

    <input type="button" value="按钮" enable />

20页面的默认标签

        <!DOCTYPE html> -> 不是标签
            它是一个文档声明.这里表示html5的文档声明.
            当前网页使用的是html5的标准.
            大白话:html5就是html的资料片(扩展内容).
        
        以下是html4.01的文档声明
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

        每个网页的解构都是:
            html里面嵌套一个head标签和一个body标签
            html标签就表示当前是一个网页
            head -> 网页的头部.
            body -> 网页的主体.(所有书写的布局标签都必须写在body内)
        
        meta(必须写在head内) -> 远标签 -> 网页的一些基本配置
            charset="UTF-8" -> 把字符集设置为utf-8

        title(必须写在head内) -> 网页标签的标题.
        link(必须写在head内) -> 引入外部的一些资源.一般是图片和css样式文件.
            rel -> 引入的资源是什么东西.

        字符集(字典)
            汉语字典 -> 中午字符集 -> gbk123
            世界语言大辞典 -> 200多个国家语言的字符集 -> UTF-8
        
        为什么要设置字符集?
            可能网页中会出现一些别的国家的语言,比如说阿拉伯文字.如果网页不支持阿拉伯文,就会出现乱码.
            如何让网页支持阿拉伯文?只要设置了utf-8字符集,只要文字在这个字符集内,就不会乱码.

21table表格标签

  
    <!-- cellpadding -> 单元格的内边距 -->
    <!-- cellspacing -> 单元格之间的距离 -->
    <!-- border -> 边框 -->

    <!-- 
    table -> 表格
    thead -> 表头
    tbody -> 表体
    tr -> 行
    th -> 表头的单元格
    td -> 表体的单元格 
    caption -> 表格的标题
·   -->

    <!-- 合并单元格：
        1：确定在哪个格子上添加跨行或者跨列的属性
        2：写colspan或者rowspan的数字。 
    -->

    <table border='1' cellpadding='30' cellspacing='10'>
        <caption>幂幂的个人资料</caption>
        <thead>
            <tr>
                <th>首播时间</th>
                <th>作品名称</th>
                <th>饰演角色</th>
                <th>作品导演</th>
                <th>备注信息</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">2020.5.01</td>
                <td>仙剑奇侠传</td>
                <td>雪见</td>
                <td>王晶</td>
            </tr> 
            <tr>
                <td>2020.5.01</td>
                <td colspan="2" rowspan="2">仙剑奇侠传</td>
                <td>雪见</td>
                <td rowspan="2">王晶</td>
            </tr> 
            <tr>
                <td>2020.5.01</td>
                <td>仙剑奇侠传</td>
            </tr> 
        </tbody>
    </table>

22标签总结

常用标签:
        div(没有语义),
        h3(标题),
        p(段落),
        span(没有语义),
        a(超链接),
        img(图片标签),
        input(表单标签),
        ul-li(列表标签)

    功能标签:
        hr
        br
        strong
        em
    
    结构标签：
        html
        body
        head
        meta
        title
        link

    其他：
        table
        iframe
    
    <!-- 样式的css
        选择器
            1：选择器用来干啥
        盒模型
            2：盒模型用来干啥 -->

23 路径

<!-- 如果html文件和图片在同一个文件夹下，src就可以直接写图片的名字 -->
    <!-- <img src="tlp.png" alt=""> -->

    <!-- 在和24.html相同的文件夹下找tlp.png -->
    <img src="./tlp.png" alt="">

    <!-- 在和24.html相同的文件夹下找yang.png -->
    <img src="./yang.png" alt="超越妹妹呢？">

    <!-- 在和24.html相同的文件夹下找img文件名,然后再在img文件夹下找yang.png -->
    <img src="./img/yang.png" alt="超越妹妹呢？">

    <!-- 图片路径：
        同级文件夹:./
        下一级文件:/
        上一级文件:../ -->

    <!-- 写路径:
        1:谁在找谁.
        2:确定层级.
            出房间是:../
            进房间:/
    -->

    <!-- 写路径:
        1:谁在找谁.
        2:确定层级.
            后退是:../
            进文件夹是:/
     -->