HTML基础整理HTML 概念 html是一种超文本标记语言浏览器按照一定的语法对HTML结构进行解析 HTML不仅可

HTML

概念
- html是一种超文本标记语言
- 浏览器按照一定的语法对HTML结构进行解析
- HTML不仅可以单纯的表示纯文本，还支持一些富媒体资源。如图片、视频等
语法规范
1. 关键字用尖括号包裹形成标签，标签大部分都是成对出现的
  - 【结束标签比开始标签在关键字前多出一个反斜杠】<></>
2. 内容放在两个尖括号标签中间，如<p>我是一个段落标签</p>
3. 单标签又称【空标签，自闭合标签】也存在，比如<img>，<input>
HTML标签语义化
- 在HTML中有特定的标签来实现各种不同的功能，根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。所以HTML语义化就是用正确的标签做正确的事情，将标签用在合适的位置，比如段落要用p标签，标题要用h1-h6标签。
标签间的关系
1. 包含关系
  - html和body
  - html和head
2. 并列关系
  - head和body
3. 标签是可以嵌套的
标签中的属性
- 代表一定特征和功能的，可以分为内置属性，自定义属性
- 一个标签可以有多个属性
- 属性之间没有先后顺序
- 属性间加空格至少一个

基本结构

最上部有一个<!DOCTYPE html> 【文档声明】

接着是最外部由一个<html></html>标签包裹的 【主要部分】

html标签中可以声明所用语言 <html lang="zh-CN">

<html></html>中主要分为2个部分

<head></head>【页面元数据信息与样式部分】

    <!-- 元数据-字符集信息 -->
    <meta charset="UTF-8">
    <!-- 元数据-关键字-搜什么关键字能把我们的网页搜出来 -->
    <meta name="keywords">
    <!-- 元数据-描述-页面描述 -->
    <meta name="description">
    <!-- 默认浏览器版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 移动端适配？ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- title网页标题 -->
    <title>我是标题</title>
    <!-- STYLE -->
    <style></style>

<body></body>【结构与javascript部分】

    <body>
        <!-- 页面结构 -->
        <div></div>
        <!-- ..... -->
        <!-- javascript -->
        <script></script>
    </body>

整体结构

<!DOCTYPE html>
    <html lang="zh-CN"><!-- html标签又称为根元素标签 -->
        <!-- HEAD -->
        <head>
            <!-- meta是元数据【数据的数据信息】，可以在其中声明一些内容，不会渲染在页面上，但是会被浏览器读取，如字符集信息 -->
            <meta charset="UTF-8">
            <!-- meta元数据- 关键词 -->
            <meta name="keywords" content="前端">
            <!-- meta元数据- 页面描述 -->
            <meta name="description" content="我们这个页面是前端开发学习相关的内容">
             <!-- 默认浏览器版本 -->
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <!-- 移动端适配？ -->
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <!-- 【网页标题】 -->
            <title></title>
        </head>

        <!-- BODY【可视区】 -->
        <body>
            <!-- 页面结构 -->
                <div></div>
                <!-- ..... -->
                <!-- javascript -->
                <script></script>
        </body>
    </html>

快速生成HTML结构
- 新建HTML文件.html 或 .htm
- !!直接生成【vscode】
HTML字符实体【要渲染到页面上的特殊符号】
- HTML 中的预留字符必须被替换为字符实体。【一些特殊字符】
- 两种形式：可以通过 字符名称 或 字符编号 来使用
  - 名称对低版本浏览器的支持比较差
  - 编号则没有兼容性问题
- 大小写区分
- 都是特殊符号，用的的比较少，使用时现找就可以
- 示例
```
    
    &nbsp;
    &#160;
```

常见标签

标题标签 <h1></h1>-<h6></h6>
- h$*6{内容$后面是需要替换的部分}
- 字体大小逐层递减，粗细相同，优先级递减，一个页面一般只会用于logo及一些重要文字【由于比较大，一般一个页面只用一次】
```
        <h1>标题标签</h1>
        <h2>标题标签</h2>
        <h3>标题标签</h3>
        <h4>标题标签</h4>
        <h5>标题标签</h5>
        <h6>标题标签</h6>
```
段落标签p
- <p></p> 使用p标签来划分段落
```
        <p> 段落 </p>
```
图片标签img
- <img></img> 单标签，其中属性:
  - src代表图片路径
  - alt是替代文本，阅读器可以读出，帮助残障人士浏览网页【当图片加载失败时，才会显示这些】
  - title当鼠标处于图片上方时，会有文字跟随着鼠标【鼠标跟随文字】
```
        <img src="地址",alt="替代文本"，title="鼠标跟随文字">
```
超链接标签a
- 若不用js想要跳转，那指定得有个a标签
```
   <a href="跳转地址",target="在哪个窗口打开新页面"></a>
```
- a标签中href属性的值
  - <a href="要跳转的网址"></a>代表超链接地址 页面跳转
  - <a href="#"></a> 跳转到顶部
  - <a href=""></a>" 刷新网页
  - <a href="javascript:;"></a>" 禁止跳转,阻止a标签的默认行为
    - 【点按钮不会做任何操作，就相当于普通标签】
    - 通常用作跳转时不知道目标地址，需要后面获得。
  - 锚点跳转【配合盒子id使用】
    - 使a标签的href值为 #盒子id
在页面中嵌套页面标签iframe【不常用了，被框架代替了】
- <iframe></iframe> 其中属性:
  - src代表超链接地址
  - frameBorder边框
  - width宽度
  - height高度
格式化标签
- <hr> 分隔线
- <b></b> 加粗
- <strong></strong> 加粗
- <i></i> 斜体
- <em></em> 斜体
- <del></del> 删除线
- <s></s> 删除线
- <ins></ins> 下划线
- <u></u> 下划线
- <big></big> 增大字号【基本不用】
- <small></small> 减小字号【基本不用】

预格式化标签

<pre></pre> 预格式化标签
按照自己预先设定好的格式进行渲染

     <pre>
        $$$$$     $$$$$
         33        33
              ||
               ||
                ==
                  ||
       ==        ===      ==
         ==             ==
             =========
    </pre>

盒子标签div
- <div></div>大盒子标签
  - 快速生成快捷键 div*n{内容}
- <span></span>小盒子标签

三大列表

ul或li必须紧挨着li，中间不能间隔别的标签

无序列表

ul
- li

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

有序列表
- ol
  - li
```
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
```
- 无论有序无序，自带的列表的样式都不需要【在写样式时先清除】
  - 【为何清除】 在这两种列表当中，自带的点号和数字比较难看，所以一般都是自己加个盒子修改为自己需要的样式
  - 【如何清除】 清空列表前面自带的默认样式【数字或圆点】
```
    ul,li{
        list-style:none;
    }
```

自定义列表

通常会用到页面底部
dl
- dt
- dd

    <dl>
        <dt>早</dt>
        <dd>喝水</dd>
        <dd>上班</dd>

        <dt>中</dt>
        <dd>吃饭</dd>
        <dd>休息</dd>

        <dt>晚</dt>
        <dd>下班</dd>
        <dd>晚饭</dd>
    </dl>

富文本资源

音频audio

    <audio src="资源路径" controls loop autoplay></audio>

autoplay被禁用了
loop循环
controls控制器

视频video

    <video src="资源路径" controls></video>

loop循环
controls控制器

表格

table 表格
tr 行
td 单元格
th 表头【语义化】
caption表格标签
- 处于表格的上面，也可以自己用标题标签构建
thead 表头部分【语义化】
- 此标签不加也可以，加上后，无论这部分代码放在表格中的哪部分，都会被解析到表头
tbody 表格内容部分【语义化】
- 此标签不加也可以，加上后，无论这部分代码放在表格中的哪部分，都会被解析到表格
tfoot 表尾部分【语义化】
- 此标签不加也可以，加上后，无论这部分代码放在表格中的哪部分，都会被解析到表尾

整体结构

        <!-- 整体结构 -->
            <style>
                table{
                    margin:0 auto;
                }
            </style>
            <body>
                <table>
                    <caption>我是标题</caption>
                    <!-- 表头部分 -->
                    <thead>
                    <tr><!-- 第一行 -->
                        <th>早班</th>
                        <th>中班</th>
                        <th>晚班</th>
                        <th>夜班</th>
                    </tr>
                    </thead>
                    <!-- 表格内容部分 -->
                    <tbody>
                    <tr><!-- 第二行 -->
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    </tbody>
                    <!-- 表尾部分 -->
                    <tfoot>
                    <tr><!-- 第三行 -->
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    </tfoot>
                </thead>
            </body>

table的属性

width 宽

此项在css样式中也可以设置

    <body>
        <table width='100px'>
            <tr><!-- 第一行 -->
            <th>早班</th>
            </tr>
            <tr><!-- 第二行 -->
            <td>1</td>
            </tr>
        </table>
    </body>

height 高

此项在css样式中也可以设置

    <body>
        <table height='100px'>
            <tr><!-- 第一行 -->
            <th>早班</th>
            </tr>
            <tr><!-- 第二行 -->
            <td>1</td>
            </tr>
        </table>
    </body>

border 边框

写了之后所有单元格都会有边框，若在css样式中设置，只会在大盒子上有边框

    <body>
        <table border='1px'>
            <tr><!-- 第一行 -->
            <th>早班</th>
            </tr>
            <tr><!-- 第二行 -->
            <td>1</td>
            </tr>
        </table>
    </body>

cellpadding 内容到边框的距离

    <body>
        <table cellpadding='100px'>
            <tr><!-- 第一行 -->
            <th>早班</th>
        </tr>
        <tr><!-- 第二行 -->
            <td>1</td>
        </tr>
    </table>
    </body>

cellspacing 单元格到单元格的距离【边框到边框】

此属性默认有几像素，有间隔，若设置为0，则为两条紧紧挨着的边框，看起来是一条，但有两个像素宽

    <body>
        <table cellspacing='100px'>
            <tr><!-- 第一行 -->
            <th>早班</th>
            </tr>
            <tr><!-- 第二行 -->
            <td>1</td>
            </tr>
        </table>
    </body>

border-collapse 合并边框线，1px的一条边框

    <body>
        <table border='1px' border-collapse='100px'>
            <tr><!-- 第一行 -->
                <th>早班</th>
            </tr>
            <tr><!-- 第二行 -->
                <td>1</td>
            </tr>
        </table>
    </body>

table的样式
- table-layout 宽度均分
  - 前提需要给table一个宽度，然后宽度会被每列均分
```
    <style>
    table{
        table-layout:"fixed";
    }
    </style>
```

`td`单元格的属性

单元格可以同时跨行又跨列
跨行、跨列后删除多余的单元格

colspan 跨列【合并列】

     <body>
         <table cellpadding='100px'>
             <tr><!-- 第一行 -->
             <th>早班</th>
             </tr>
             <tr><!-- 第二行 -->
             <!-- 合并两列 -->
             <td colspan="2">1</td>
             </tr>
         </table>
     </body>

rowspan 跨行【合并行】

   <body>
       <table cellpadding='100px'>
           <tr><!-- 第一行 -->
           <td>0</td>
           </tr>
           <tr><!-- 第二行 -->
           <!-- 合并两行 -->
           <td rowspan="2">1</td>
           </tr>
       </table>
   </body>

跨行又跨列

     <!-- 跨行又跨列 -->
     <body>
         <table cellpadding='100px'>
             <tr><!-- 第一行 -->
             <td colspan="2" rowspan="2">0</td>
             <!-- 删掉多余的列单元格 -->
             <!-- <td>0</td> -->
             </tr>
             <tr><!-- 第二行 -->
             <!-- 合并两行 -->
             <!-- 删掉多余的行单元格 -->
             <!-- <td rowspan="2">1</td> -->
             </tr>
         </table>
     </body>

表单

表单
- form

表单元素标签`input`的属性

type 属性的属性值

text 文本

文本框样式，其中可以输入文本，为明文

   <body>
       <form>
           <!-- 输入文本 -->
           <!-- 提示文字 -->
           <!-- 字段 -->
           <!-- 非空校验 -->
           <input type= "text" placeholder="请输入用户名" name="userName" required>
       </form>
   </body>

password 密码

文本框样式，其中可以输入文本，输入信息变为隐藏的星号

    <body>
        <form>
            <!-- 输入密码文本 -->
            <!-- 提示文字 -->
            <!-- 自动获取光标 -->
            <!-- 字段 -->
            <!-- 非空校验 -->
            <input type="password" placeholder="请输入密码" autofocus name="password" required>
        </form>
    </body>

submit 提交

是一个按钮样式，点下后提交表单内容

    <body>
        <form>
            <input type="submit">
        <form>
    </body>

reset 重置

是一个按钮样式，点下后文本框中的内容清空

    <body>
        <form>
            <!-- 重置 -->
            <input type= "reset">
        </form>
    </body>

button 按钮

使用input标签来构建按钮
配合value来往按钮上添加文字

    <body>
        <form>
            <input type= "button" value="按钮">
        </form>
    </body>

单选&多选

radio 单选

在同一组的单选的input标签中添加同样的name属性值，就会实现单独选中

    <body>
        <form>
            <!-- 单选 -->
            <input type="radio" name="sex" id=""><span>男</span>
            <input type="radio" name="sex" id=""><span>女</span>
        </form>
    </body>

用label标签来包裹文字，使其for属性的值与input的id值相等，即可实现点击文字选中

    <body>
        <form>
            <!-- 单选 -->
            <input type="radio" name="sex" id="men"><label for="men">男</label>
            <input type="radio" name="sex" id="women"><label for="women">女</label>
        </form>
    </body>

checkbox 多选

    <body>
        <form>
            <!-- 多选 -->
            <input type="checkbox" >
        </form>
    </body>

placeholder 提示文字

        <body>
            <form>
                <!-- 输入文本 -->
                <!-- 提示文字 -->
                <!-- 字段 -->
                <!-- 非空校验 -->
                <input type= "text" placeholder="请输入用户名" name="userName" required>
            </form>
        </body>

checked 默认选中

        <body>
            <form>
                <!-- 单选 -->
                <input type="radio" name="sex" id="" checked><span>男</span>
                <input type="radio" name="sex" id=""><span>女</span>
            </form>
        </body>

disabled 禁止选中

        <body>
            <form>
                <!-- 单选 -->
                <input type="radio" name="sex" id="" disable><span>男</span>
                <input type="radio" name="sex" id=""><span>女</span>
            </form>
        </body>

autofocus自动获取光标

        <body>
            <form>
                <input type= "text" placeholder="请输入用户名" name="userName" autofocus>
                <input type= "password" placeholder="请输入密码" name="password" autofocus>
            </form>
        </body>

name 表单元素的字段

        <body>
            <form>
                <input type= "text" placeholder="身份证号" name="id" >
            </form>
        </body>

require 非空校验

        <body>
            <form>
                <input type= "text" placeholder="身份证号" name="id" required>
            </form>
        </body>

outline 消除四周的蓝色基线

此项适用于input和textarea,可以放在最初消除默认样式中

        <body>
            <form>
                <!-- 文本域 -->
                <textarea name="" id="" cols="30" rows="10" style="outline:none"></textarea> 
                <!-- 输入框 -->
                <input type= "text" placeholder="身份证号" name="id" required style="outline:none">
            </form>
        </body>

button按钮
- 除了使用input标签也可在表单中直接使用button标签来构建按钮
  - 此按钮默认也有提交表单的功能，想要禁止，添加type=“button”这个属性便可以禁止
```
    <body>
        <form>
            <button>支付</button>
        <form>
    </body>
```

`select`下拉框

selected 默认选中项

        <body>
            <form>
                <!-- 下拉框 -->
                <select name="" id="" >
                    <option value="">北京市</option>
                    <option value="" selected>上海市</option>
                    <option value="">杭州市</option>
                </select>
            </form>
        </body>

disable 禁止选中

        <body>
            <form>
                <!-- 下拉框 -->
                <select name="" id="" >
                    <option value="">北京市</option>
                    <option value="" selected>上海市</option>
                    <option value="" disable>杭州市</option>
                </select>
            </form>
        </body>

`textarea`文本域

resize 禁止重置大小
outline 消除四周的蓝色基线
cols 宽

rows 高

        <body>
            <form>
                <!-- 文本域 -->
                <textarea name="" id="" cols="30" rows="10">
                </textarea> 
            </form>
        </body>

伪元素

概念
- 伪元素可以理解成“虚假的元素”，它们虽然可以通过css在 指定元素 的前后 插入额外的元素
- 但实际上并不会真的有这个元素在结构中存在，在结构的源代码当中也找不到它们。
特点
- 伪元素的样式中的 content 即使没有内容，即使空置，也需要写上。
使用方式
- 选择器:伪元素{}
  - 选择器::伪元素此种写法是为了兼容老版本浏览器

常用伪元素

`::after`

可用于在元素内容之后插入一些内容。

        <style>
            .inner::after{
                content:"我饿了" ;
                font-size: 200px;
                display: block;

            }
        </style>
        <body>
            <div class="outer">
                <div class="inner">
                    <p>我不饿</p>
                </div>
            </div>
        <body>
    ```

`::befor`

可用于在元素内容之前插入一些内容。

    <style>
        .inner::befor{
            content:"吃了吗" ;
            font-size: 200px;
            display: block;

        }
    </style>
    <body>
        <div class="outer">
            <div class="inner">
                <p>我没吃</p>
            </div>
        </div>
    <body>

Html5新增标签
- 移动端【更加语义化】
  - header 头部
```
    <header></header>
```
  - footer 底部
```
    <footer></footer>
```
  - nav 导航
```
    <nav></nav>
```
  - section 大盒子【等同于div】
```
    <section></section>
```
  - article 文章
```
    <article></article>
```
  - aside 侧边栏【修饰主题内容，不重要内容】
```
    <aside></aside>
```
  - main 主体内容区
```
    <main></main>
```
  - figure 配图
    - figcaption 配图说明 写在配图标签中
```
    <figure>
        <img src="" alt="">
        <figcaption>我是一个配图说明</figcaption>
    </figure>
```
  - video 视频
    - preload 预加载
      - 当用户一打开页面就开始加载这个资源
```
    <video></video>
```
  - audio 音频
    - preload 预加载
      - 当用户一打开页面就开始加载这个资源
    - source标签 资源地址，兼容性问题，没有一种浏览器是多种音频格式都支持的【pc端】
      - 移动端不用考虑，只要兼容chrome即可
```
    <audio>
        <source src="1.mp3">
        <source src="2.ogg">
        <source src="3.wav">
    </audio>
```
- 表单
  - type="tel" 调取电话功能【移动端】
  - type="number" 仅限数字
  - type="color" 颜色面板
  - type="range" 范围(小滑轨)
  - type="file" 上传文件
  - type="date" 日期选择
  - type="search" 搜索
  - type="email" 邮箱

HTML基础整理

HTML

概念

语法规范

HTML标签语义化

标签间的关系

包含关系

并列关系

标签是可以嵌套的

标签中的属性

基本结构

整体结构

快速生成HTML结构

HTML字符实体【要渲染到页面上的特殊符号】

常见标签

标题标签 <h1></h1>-<h6></h6>

段落标签p

图片标签img

超链接标签a

在页面中嵌套页面标签iframe【不常用了，被框架代替了】

格式化标签

预格式化标签

盒子标签div

三大列表

无序列表

有序列表

自定义列表

富文本资源

音频audio

视频video

表格

table 表格

tr 行

td 单元格

th 表头【语义化】

caption表格标签

thead 表头部分【语义化】

tbody 表格内容部分【语义化】

tfoot 表尾部分【语义化】

整体结构

table的属性

table的样式

td单元格的属性

表单

表单

form

表单元素标签input的属性

type 属性的属性值

placeholder 提示文字

checked 默认选中

disabled 禁止选中

autofocus自动获取光标

name 表单元素的字段

require 非空校验

outline 消除四周的蓝色基线

button按钮

select下拉框

textarea文本域

伪元素

概念

特点

使用方式

选择器:伪元素{}

常用伪元素

::after

::befor

Html5新增标签

移动端【更加语义化】

表单

标题标签 `<h1></h1>`-`<h6></h6>`

`table` 表格

`tr` 行

`td` 单元格

`th` 表头【语义化】

`caption`表格标签

`thead` 表头部分【语义化】

`tbody` 表格内容部分【语义化】

`tfoot` 表尾部分【语义化】

`td`单元格的属性

`form`

表单元素标签`input`的属性

`button`按钮

`select`下拉框

`textarea`文本域

`选择器:伪元素{}`

`::after`

`::befor`