1. HTML5 基础

HTML 5 基础

一、什么是 HTML？

• ​ HTML 是用来描述网页的一种语言。
• ​ HTML 是超文本标记语言（hyper Text Markup Language）
• ​ HTML 不是一种编程语言，而是一种标记语言(Markup Language)
• ​ 标记语言是一套标记标签
• ​ HTML 使用标记标签来描述网页

二、HTML 标签

​ HTML 标记标签通常被描述为HTML 标签(HTML Tag)

• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 <b>和</b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签

三、常见标签（标记）

双标记：<标记名></标记名>

单标记：<标记名 />

常用标签：

1. html 标题

   <h1>This is a heading</h1>
   <h2>This is a heading</h2>
   <h3>This is a heading</h3>
   <h4>This is a heading</h4>
   <h5>This is a heading</h5>
   <h6>This is a heading</h6>
   

2. html 段落

   <p>我是段落<p/>
   

3. 换行

   <br />
   

4. 加粗

   <b>加粗1</b>   
   <strong>加粗2</strong>  加重
   

5. 倾斜

   <em>$200</em>  加重
   <i>￥200</i>
   

6. 删除线

   <del>删除线1</del>
   <s>删除线2</s>
   

7. 下划线

   <u>下划线</u>
   <ins>下划线2</ins>
   

8. 双引号

   <q>李白</q>
   

9. 上下标

   2<sup>3</sup> 上标
   CO<sub>2</sub> 下标
   

10. 下划线

    <hr />
    

11. html 字符实体

        空格
    < 小于号
    >  大于号
    © 版权
    ® 注册商标
    × 乘号
    ¥ 元
    ÷  除号
    

12. html 注释

    <!-- 我是注释 -->
    

13. emmet 语法快速生成代码语法

    ul>li*2
    ul>li{内容}*2
    

14. 列表

    1. 无序列表
        <ul>
            <li style="list-style-type: none;">中国内地</li>
            <li>中国内地</li>
            <li>中国内地</li>
            <li>中国内地</li>
            <li>中国内地</li>
        </ul>
    2. 有序列表
        <ol type="1" start="5">
            <li>中国</li>
            <li>中国</li>
        </ol>
    
    3. 自定义列表
    <dl>
        <dt>html</dt>
        <dd>标记语言</dd>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
    </dl>
    

15. 链接

    <a href="https://www.baidu.com" target="_blank" title="百度">百度一下，马上出发</a>
    href 链接地址
    target 表示在目标位置打开 _self 默认值 表示在当前窗口打开   _blank 表示在新窗口打开
    title 鼠标悬停文本
    name 锚点名称
    

16. 图片

    <img width="200" height="300" src="./img/logo.png" alt="提示文本" title="我是文本" />
    
    src 源属性 图像的 URL 地址
    alt 替换文本属性
    title 鼠标悬停文本
    width 宽度
    height 高度
    

17. 表格

    <table border="1" cellspacing="1">
        <caption>表格标题</caption>
        <thead>
            <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td>陈达</td>
            <td>语文</td>
            <td>96</td>
            </tr>
            <tr>
            <td>陈达</td>
            <td>数学</td>
            <td>80</td>
            </tr>
            <tr>
            <td>张三</td>
            <td>语文</td>
            <td>74.5</td>
            </tr>
            <tr>
            <td>张三</td>
            <td>数学</td>
            <td>99.5</td>
            </tr>
            <tr>
            <td>&nbsp;</td>
            <td>语文</td>
            <td>100</td>
            </tr>
    	</tbody>
    </table>
    
    <table> 定义表格
    <caption> 定义表格表头
    <th> 定义表格标题
    <tr></tr> 定义表格行
    <td></td> 定义单元格
    <thead></thead> 定义表格页眉
    <tbody></tbody> 定义表格主体
    

18. 表单

    作用：收集用户信息

    action 属性 表单提交的后台地址

    method 属性 表单的提交方式 get/post

    表单元素 input:text/password/radio/checkbox/buttom/submit/reset/image/file

    ​ select option

    ​ textarea

    	<form action="" method="">
           <div>
               用户名 <input type="text" disabled name="uname" maxlength="5" placeholder="张**"/>
            </div>
           <div>密码 <input type="password" name="pwd" /></div>
           <div>
               <!--name取值一样 单选按钮互斥-->
               性别 <input type="radio" name="sex" checked value="m">男
               <input type="radio" name="sex" value="w">女
           </div>
           <div>
               您最喜爱的前端框架
               <input type="checkbox" name="fav" id="" value="jQ">jQuery
               <input type="checkbox" checked name="fav" id="" value="Vue">Vue
               <input type="checkbox" name="fav" id="" value="React">React
               <input type="checkbox" name="fav" id="" value="jQ">Flutter
               <input type="checkbox" name="fav" id="" value="jQ">electron
           </div>
           <div>
               上传文件
               <input type="file" name="tx" id="">
           </div>
           <div>
               您最近想去的城市
               <select name="city" id="" size="3" multiple>
                   <option value="beijing">北京</option>
                   <option value="shanghai">上海</option>
                   <option value="chengdu" selected>成都</option>
                   <option value="suzhou">苏州</option>
               </select>
           </div>
           <div>
               自我评价
               <textarea name="desc" id="" cols="30" rows="10"></textarea>
           </div>
           <div>
               <input type="button" value="普通按钮">
               <input type="submit" value="提交">
               <input type="reset" value="重置">
               <input type="image" src="jiazhuang.png" width="100">
           </div>
         </form>