HTML一遍过（学习复习专用）

<!-- //快捷键（英文）！+ TAB键 -->
 <!-- 标签与标签之间有嵌套关系和并列关系 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    网页内容
</body>
</html>

2.基本标签

基本标签多样且一般使用在body标签里，用丰富网页内容

2.1标题标签，水平线标签，段落标签，换行标签

标题标签<h1>,<h2>...标题标签用于对网页标题的强调，在标题标签内文字的字体将变大，字体加粗并且自动换行,标题标签<h n>随着n的变大字体将逐渐变小，字体仍加粗

水平线标签<hr>,在网页上生成一条颜色较浅的实线，用于分割网页布局

段落标签<p>,段落标签内内容，作为网页的内容，作为一个段落，会自动换行

换行标签<br>,用于内容的换行，或增加间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本标签</title>
</head>
<body>
    <!-- 标题标签<hn></hn>  随着标签数增大字体变小，且标题加粗-->
    <h1>第1标题</h1>
    <h2>第2标题</h2>
    <!-- <hr>水平线标签，出现一条水平线分割 -->
    <hr>
    <hr>
    <!-- 段落标签<p></p> 有间隔 -->
    <p>第一段</p>
    <p>第二段</p>
    <!-- 换行标签<br>强制换行 且无间隔-->
    <p>XXXXXXXXXXXXXXXXXXXXXXXXXbr<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</body>
</html>

2.2格式化标签

格式化标签用于修饰内容

加粗<strong>下划线<ins>倾斜<em>删除线<del

<!DOCTYPE html>
<html lang="en">
<head>
    <title>格式化标签和图片标签</title>
</head>
<body>
    <!-- 格式化标签
    加粗<strong>
    下划线<ins>
    倾斜<em>
    删除线<del> -->
    <strong>加粗选中字体</strong><br>
    <ins>在选中文字添加下划线</ins><br>
    <em>使选中文字倾斜</em><br>
    <del>在选中文字添加删除线\</del><br>
</body>
</html>

2.3图片标签

图片标签<img>,图片标签需要引入图片，需要属性src=" "，在引号内的为属性值，属性值为图片路径格式为

修饰图片的其他属性alt=" ",属性值为一段文本，可以再图片加载失败时，显示替换文本

属性title=" "，属性值为一段文本，用于鼠标悬停在图片时，显示解释文本，也可以用于标题标签<h>

属性width=" "，height=" ",属性值为数值xx px,其中‘xx’为数字，‘px’为像素单位，两者控制图片的宽和高，若仅控制一个，则根据长或宽等比例变化

基本格式为 <img src="xxx.gif" alt="xxx" title="xxxx" width="200">

2.3.1路径

路径分绝对路径和相对路径

绝对路径分 盘符"D/"和完整的网络地址"https"

相对路径分 同级目录，上级目录和下级目录

同级目录直接直接根据图片名引用

上级目录需要通过‘ ../ ’转至上级目录

下级目录需要通过‘ ./ ’转至下级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <title>格式化标签和图片标签</title>
</head>
<body>
    <!-- ！图片标签！<img> （属性名）src=""（属性值，图片路径）
     （属性名）alt=""（若图片加载失败，显示替换文本）
     （属性名）title=""（鼠标悬停于指定title会显示该文本）title标签可用于其他标签如：<hn>标签 
     （属性名）width=""和high=""（只设置一个图片会按等比例缩放，如果设这两个会根据设置的大小变化，如果比例不完美会使图片变形）
     src=""（有绝对路径和相对路径）
     绝对路径分 盘符"D/"和完整的网络地址"https"
     相对路径分 同级目录，上级目录和下级目录 -->
     <!-- 网络地址路径 -->
     <img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0" alt="wu" width="200">
     <!-- 同级目录 直接引用-->
     <img src="R-C.gif" alt="皮卡丘" title="皮卡丘竟然这么可爱！！！" width="500">
     <!-- 下级目录 使用"./文件名称"后引用-->
     <img src="./图片/OIP-C.jpg" alt="下级目录图片" width="200">
     <!-- 上级目录 使用"../"后引用-->
     <img src="../20170310192847_dzJyu.gif" alt="上级目录图片" width="200">
    <!-- 上级目录"./"和下级目录"../"可重复使用知道找到目标为止 -->
     
    <!-- <title>标签用于标题标签<h1>里,鼠标悬停显示文本 -->
     <h1 title="这里也有title的提示文本">一级标签</h1>
</body>
</html>

2.4音频标签

音频标签<audio>和<video>

1.音乐标签<audio>,与引入图片标签相同，属性名为src=" ",

其他修饰属性为（音频控制键）controls，（自动播放）autoplay，（循环播放）loop

引入音乐需要添加音频控制键，这才能显示音乐播放图像

2.视频标签<video>,与引入图片标签相同，属性名为src=" ",

其他修饰属性为（音频控制键）controls，（自动播放）autoplay，（静音播放可以自己调节）muted，（循环播放）loop

引入视频需要添加音频控制键，这才能显示视频播放图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 音频标签<audio （路径）src="" 
     （音频控制键）controls 
     （自动播放）autoplay 
     （循环播放）loop> -->
    <audio src="That Girl-Olly Murs.mp3" controls autoplay loop></audio>
    <!-- 音频标签<video （路径）src="" 
     （音频控制键）controls 
     （自动播放）autoplay 
     （静音播放可以自己调节）muted 
     （循环播放）loop> -->
    <video src="./xtdowner.com 259881 视频链接.mp4" controls autoplay muted loop width="200"></video>
</body>
</html>

2.5链接标签

链接标签<a>,可用于鼠标点击并跳转网页

属性名herf=" ",属性值为所要跳转的网页地址

（跳转方式）属性名target="",属性值为“_blank”（保留当前页面，跳转至新的界面）与“_self”,（直接在当前界面跳转，覆盖当前页面）

当herf=" "的属性值为“#”时，链接为空链接，点击将回到网页顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 链接标签<a （跳转网站）href="" （跳转方式）target=""主要有两种（"_blank"和"_self"）>点击文字</a> -->
     <!-- _blank用于保留原有界面，跳转入新的界面
          _self用于覆盖当前页面跳转 -->
    <a href="https://www.baidu.com/" target="_blank">百度跳转</a>
    <br><hr>
    <a href="https://www.douyin.com/" target="_self">抖音跳转</a>
    <br><hr>
    <!-- 空连接有两个作用，一个是回到网页顶部，另一个是作为一个空位置待定跳转 -->
    <a href="#">空连接</a>
</body>
</html>

2.6列表标签

2.6.1无序列表

无序列表标签有<ul>和<li>

<ul>标签为列表的整体里面嵌套<li>标签，<li>标签作为列表的分点，每个分点前面都会有‘ · ’，<li>标签可以嵌套其他标签，如格式化标签

2.6.2有序列表

无序列表标签有<ol>和<li>

<ol>标签为列表的整体里面嵌套<li>标签，<li>标签作为列表的分点，每个分点前面都会有数字从1开始并排列，如“1. 2. 3....”

2.6.3自定义列表

自定义列表标签有<dl>,<dt>和<dd>

<dl>标签为列表的整体里面嵌套<dt>标签，<dt>标签为列表主题里面嵌套<dd>,<dd>标签为列表的分点

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>无序列表</h1>
    <!-- 无序列表标签有<ul>和<li>两个标签
    <ul>是列表的整体，<li>是列表的分点 每个分点前面都有！"·" ！-->
    <ul>
        <li>one</li>
        <li>two</li>
        <li><strong>five</strong>five</li>
    </ul>
    <!-- 注意点
    <ul>标签里的分点只能由<li>来完成     <li>标签可以嵌套其他标签 例如<p>-->

    <h1>有序列表</h1>
    <!-- 有序列表标签有<ol>和<li>两个标签
    <ol>是列表的整体，<li>是列表的分点 每个分点前面都按数字顺序排列！"1.   2.   3."！ -->
    <ol>
        <li>one</li>
        <li>two</li>
        <li><strong>three</strong>three</li>
    </ol>
        <!-- 注意点
    <ol>标签里的分点只能由<li>来完成      <li>标签可以嵌套其他标签 例如<p>-->

    <h1>自定义列表</h1>
    <!-- 自定义标签有<dl>,<dt>和<dd>三个标签
    <dl>标签是主体部分，<dt>是列表的主题，<dd>是列表的主题内容 -->
    <dl>
        <dt>one</dt>
            <dd>one1</dd>
            <dd>one2</dd>
            <dd>one3</dd>
    </dl>
    <!-- 注意点
    <dl>是用来包裹<dt>和<dd>的       <dt><dd>可以嵌套其他标签 -->
</body>
</html>

2.7表格标签

1. 表格标签<table>,在<tabel>中嵌套<tr><caption>标签，在<tr>标签里嵌套<td><th>

<table>标签作为表格的整体 <tr>作为表格的行 <td>作为表格的内容

<th>作为一个表格单元格与<td>类似，但文字加粗并居中，多用于第一行 <caption>作为表格主题名，在<table>下面

2. 作为一个表格<table>标签，有属性border width height

border 给表格增加边界 width 修改表格宽度 height 修改表格高度

3. 表格结构标签<thead><tbody><tfoot>

<thead>设置表格头部内容 <tbody>设置表格主体内容 <tfoot>设置表格底部内容修饰的对应的<td>行改变适应的高度（下有图片显示）

注意点：！表格结构标签<thead><tbody><tfoot>修饰<tr>行或是嵌套<tr>！

4. 合并单元格标签有 rowspan="" 和 colspan=""作为单元格<td>或<th>的属性进行调节

rowspan是在列中合并，colspan是在行中合并，通过输入数值来确定合并的单元格数

注意点：！合并单元格只能在结构标签中进行，跨结构标签无作用！

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>表格基本标签</h1>
    <!-- 表格基本标签有<table><tr><td><th><caption>
    <table>标签作为表格的整体    <tr>作为表格的行     <td>作为表格的内容 
    <th>作为一个表格单元格与<td>类似，但文字加粗并居中    <caption>作为表格主题名-->
    <h2>表格属性</h2>
    <!-- 用于<table>de1表格属性有三个 border width height
    border 给表格增加边界   width 修改表格宽度   height 修改表格高度  -->
    <h2>表格结构标签</h2>
    <!-- 表格结构标签<thead><tbody><tfoot>
    <thead>设置表格头部内容  <tbody>设置表格主体内容  <tfoot>设置表格底部内容 修饰的对应的<td>行改变适应的高度 -->
    <h2>合并单元格</h2>
    <!-- 合并单元格标签有 rowspan="" 和 colspan=""作为单元格的属性进行调节
    rowspan是在列中合并，colspan是在行中合并，通过输入值来确定合并的单元格 -->
    <table border="30" width="300" height="200">
        <caption><h3>六年级一班成绩</h3></caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>90</td>
                <td>95</td>
                <td rowspan="2">95</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>98</td>
                <td>93</td>
                <!-- <td>95</td> -->
            </tr>
        </tbody>
       <tfoot>
        <tr>
            <td>平均分</td>
            <td>94</td>
            <td>94</td>
            <td>95</td>
        </tr>
        <tr>
            <td>评价</td>
            <td colspan="3">优秀</td>
            <!-- <td>优秀</td> -->
            <!-- <td>优秀</td> -->
        </tr>
       </tfoot>
    </table>
    <!-- 注意点
    三个标签的嵌套为<table> > <tr> > <td>&<th>  
    <table>内部的标签都可以嵌套其他标签
    <td>和<th>作用相似
    表格结构标签<thead><tbody><tfoot>修饰<tr>行或是包裹<tr>
    合并单元格只能在结构标签中进行，跨结构标签无作用
    -->
</body>
</html>

2.8表单标签

表单标签<input>,属性type=" "用于选择表单的类别,属性值text为文本框，password为密码框，radio为单选框，checkbox为多选框，file为文件选择，submit为提交按钮，reset为重置按钮，button为普通按钮

在文本框和密码框可使用属性placeholder(占位符)，属性值为一段提示文本，显示在文本框或密码框中，文字颜色较浅，在框中输入文字后，提示文本消失

实现单选，需要将属性name="",相同的属性值作为一组单选

实现表单的重置按钮需要配合标签<form>对需要重置的表单进行包裹

在单选和多选中可使用属性checked，实现默认选择

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>表单标签</h1>
    <!-- 表单标签<input type="text">,主要以其属性type的各种属性值来实现表单
        text为文本框，password为密码框，radio为单选框，checkbox为多选框，file为文件选择
        submit为提交按钮，reset为重置按钮为默认，button为普通按钮 -->
    <!-- 属性名占位符placeholder="",用于文本框中，作为提示文本，在文本框输入文字后消失 -->
    <!-- value属性，用于收集用户提交内容，提交后发送到后端服务器
        name属性，用于说明用户所提交内容的含义
        后端收到的信息为name=value -->
    <form>
        昵称：<input type="text" placeholder="请输入昵称" value="帅哥" name="昵称"> <br><br>
        密码：<input type="password" placeholder="请输入密码"><br><br>
        <!-- 注意点如果type的值输入错误将会默认为文本框 -->
        <!-- 在type="radio"中，name的属性值，用于分组，如果属性值相同，分于同一组，并且为单选
        checked用于在默认选中 -->
        性别：<input type="radio" name="sex" checked>男
            <input type="radio" name="sex">女<br><br>
        <!-- checkbox属性值所生成的选择空，只能通过点击选择空选中      -->
        爱好：<input type="checkbox" checked>睡觉
        <input type="checkbox">吃饭
        <input type="checkbox">打豆豆<br><br>
        <!-- multiple属性用于file的选择多文件 -->
        <input type="file" multiple><br><br>
        <!-- 提交按钮作用在于提交内容发送到后端 -->
    <input type="submit">
    <!-- reset属性与<form action="">共用，实现对内容的重置默认 -->
    <input type="reset">
    <!-- <button>属性的按钮名通过value来给与名字 -->
    <input type="button" value="普通按钮">
</form>
</body>
</html>

2.9其他表单标签

2.9.1botton标签

标签<botton>,与表单标签<input>标签相似，使用属性type=""类选择不同的按钮,属性值submit为提交按钮，reset为重置按钮，button为普通按钮

<h1>button标签的用法</h1>
    <!-- button标签是一个双标签，可通过type属性改变button的功能
    例如submit属性，reset属性，button属性，功能如input相同 -->
    <input type="text" placeholder="请输入昵称">
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
    <!-- 由于button标签是双标签可用于包裹文本，图片等 -->

2.9.2select标签

下拉列表标签<select>作为整体，里面嵌套<option>标签，作为列表的选项

下拉列表默认选择可使用属性selected

    <h1>select标签的用法</h1>
    <!-- <select>作为下拉列表的整体，<option>作为下拉列表的每一项
    下拉列表默认选中使用selected属性 -->
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>深圳</option>
    </select>

2.9.3文本域标签

文本域标签<textarea>,与文本框不同的是文本域标签可修改文本框的宽和行数

属性rows=" ",通过属性值的数值来改变文本域的行数

属性cols=" ",通过属性值的数值来改变文本域的宽度

网页中文本域右下角可调节长和宽

    <h1>文本域标签</h1>
    <!-- <textarea>标签可使用属性cols与rows，cols可修改文本域的宽度，rows可修改文本域的行数 -->
    <!-- <textarea>标签生成的文本域右下角可以拖拽改变文本域大小，推荐CSS -->
    <textarea cols="30" rows="15" placeholder="请输入你想说的话"></textarea>

2.9.4label标签

标签<label>通常与单选radio和多选checkbox配合使用，实现鼠标选中文本也可以选中该选项

第一种写法：在表单标签<input>中添加属性id=" ",再将选项文本嵌套在<label>里并添加属性for="",属性id和属性for的属性值必须相同

<input type="checkbox" id="one"><label for="one">选项1</label>

第二种写法：直接用<label>标签嵌套所要使用的表单选项上

     <label>
        <input type="checkbox">选项2
     </label>

2.10语义标签

语义标签分无语义标签和语义标签

无语义标签：<div>和<span>,两者在前端开发中使用较多

<div>标签独占一行，<span>标签一行可以多个

语义标签：<header><nav><footer><aside><section><article>

六大语义标签功能与<div>标签相同，但语义不同

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>无语意标签</h1>
    <!-- 在前端开发使用较多
    无语意标签有<div>和<span>  <div>标签独占一行   <span>标签一行中可以多个 -->
    <div>一个div</div>
    <div>一个div</div>
    <div>一个div</div>
    <span>一个span</span>
    <span>一个span</span>
    <span>一个span</span>

    <h1>有语义标签</h1>
    <!-- 六大有语义标签于<div>的功能相同但语义不同 -->
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页文章</article>
</body>
</html>

2.11实体字符

在文本中出现符号‘<’‘>’编译器会识别错误，或是文本中编译器会将多个空格和换行识别为一个空格，这是就需要实体字符来解决

例如空格可以用" "替换，"<"可以用"&lt;"替换，">"可以用">"替换

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>实体字符</h1>
    <!-- HTML存在空格合并现象，将多个空格或换行转换为一个空格 -->
    <!-- 解决这个问题，可以通过实体字符来替换 -->
    <!-- 例如空格可以用"&nbsp;"替换，"<"可以用"&lt;"替换，">"可以用"&gt;"替换 -->
    <p>xxxxxx      xxxxx</p>
    <p>xxxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;xxxxx</p>
    p标签的是这样的<p></p>
    p标签的是这样的&lt;p&gt;&lt;/p&gt;
</body>
</html>