壹、HTML

一、标签

1.1 标题标签

块级元素;

<h1>    好好学习	 </h1>		h1 最大
<h2>    好好学习	 </h2>
<h3>    好好学习	 </h3>
<h4>    好好学习	 </h4>
<h5>    好好学习	 </h5>
<h6>    好好学习	 </h6>		h6 最小

1.2 段落标签

块级元素;

<!-- 段落之间存在间隙，独占一行 -->
<p> 好好学习，找工作。</p>

1.3 换行标签

<br />

1.4 水平线标签

<hr />

1.5 文本格式化标签

行内元素;
后面一种代码方式表示 强调语义（重要）（视觉效果上没有区别）;

<b>  加粗  </b>		<strong>  加粗  </strong>
<u>  下划线  </u>		<ins>  下划线  </ins>
<i>  倾斜  </i>		<em>  倾斜  </em>
<s>  删除线  </s>		<del>  删除线  </del>

1.6 图片标签

行内块元素;

<img src="图片途径" 
     alt="当图片加载不出来的时候显示的文本" 
     title="提示文本（当用户鼠标悬停在图片上显示）">

alt（替换文本）：当 图片加载失败 的时候显示的文本;
title（提示文本）：当用户将 鼠标放在图片上 的时候，显示的文本;
- title 属性还可以用于其他的标签;

1.7 绝对路径

指目录下的绝对位置，可直接到达目标位置，通常是以盘开始的路径
	盘符开头：F:\Giete\壁纸+头像\wallpaper-avatar\头像
	网址：https://gitee.com/draw-a-beautiful-yarn/projects?scope=（完整的网址）

1.8 相对路径

已 引用文件所在位置为参考基础，而建立的目录路径
	../	父级目录
	./	当前目录
	/	下一级目录

1.9 超链接标签

行内元素

<a href="跳转地址" target="_blank"></a>	
    去除超链接的下划线 a { text-decoration: none; }
    目标网页的打开方式 ：target = " _self"（默认值：在当前页面打开） 
                                       " _blank"（在新页面打开）

a标签 打开 内部链接 和 外部链接 的区别？
- 外部链接：必须是 http:// 或 https:// 开头；
- 内部链接：直接写入文件的路径；

下载链接 如何实现？

<a href="下载的文件（包括文件的扩展名）"></a>
<a href="img.zip"></a>

点击链接跳转到 具体的某一张图片 怎么实现？

<a href="图片名称（包括图片的扩展名）"></a>
<a href="img.jpg"></a>

点击链接回到 页面顶部
```
<a href="#"></a>
```

1.10 锚点链接

找到 目标标签 位置，里面添加 id属性；
在链接文本的 href属性 中，设置 属性值 为 #id名称 的形式；
- 代码展示：
```
<a href="#two">第2集</a>
<h3 id="two">第2集介绍</h3>
```

二、转义字符

空格：&nbsp;
大于号：&gt;
小于号“：&lt;

三、表格

table（表格） ➡ 块级元素；
tr、th、td（行、表头单元格、单元格） ➡ 行内块元素；

<!-- 表格 -->
<table>
<!-- 表格大标题 -->
  <caption></caption>	
  <!-- 行 -->
  <tr>
    <!-- 表头单元格（每一行的标题）（默认居中加粗） -->
    <th></th>
  </tr>
  <tr>
    <!-- 单元格 -->
    <td></td>
  </tr>
</table>

3.1 表格结构

<table>
  <!-- 表格标题 -->
  <caption></caption>
  
  <!-- 表格头部 -->
  <thead>
  	<tr>
            <th></th>
    	<th></th>
    	<th></th>
  	</tr>
  </thead>
  
  <!-- 表格身体 -->
  <tbody>
  	<tr>
            <td></td>
    	<td></td>
    	<td></td>
  	</tr>
  </tbody>
  
  <!-- 表格尾部 -->
  <tfoot>
  	<tr>
            <td></td>
    	<td></td>
    	<td></td>
  	</tr>
  </tfoot>
</table>

3.2 合并单元格

合并单元格的三个步骤：
- 首先确定是跨行还是跨列；
- 找到目标单元格：
  - 跨行合并：rowspan属性写在 最上面 的 单元格；
  - 跨列合并：rowspan属性写在 最左侧 的 单元格；
- 删除多余的单元格：
  - 跨行合并 rowspan="合并单元格的个数" 只保留最上的，删除其他的；
  - 跨列合并 colspan="合并单元格的个数" 只保留最左的，删除其他的；
🔺 注意：
- 单元格的合并不能跨越 thead tbody tfoot (留着谁给谁加)；

3.3 表格中的属性值

cellspacing="单元格之间的距离" 
cellpadding="单元格边沿与其内容之间的空白"

3.4 利用边框的合并属性、分离属性设置单元格间的间距为0

table
{
    border-collapse: collapse;	/* 边框合并属性 */
    /*
    border-collapse: separate;	边框分离属性
    border-sepacing: 0;  	边框之间的距离 = 0
    */						
}

四、列表

ul、li、ol、dl、dt ➡ 块级元素；
ul 里面只能放 li；
li 里面啥都能放；

4.1 去除列表前面默认样式

list-style: none;

4.2 无序列表

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

4.3 有序列表

<ol>
  <li> </li>
</ol>

4.4 自定义列表

<dl>		表示自定义列表的整体，用于包裹 dt/dd 标签
  <dt></dt>	表示自定义列表的标题
  <dd></dd>	表示自定义列表的针对主题的每一项内容，dd 前会默认显示缩进效果
</dl>		dl 标签中只包含 dt/dd，dt/dd 标签可以包含任意内容

五、表单：登录、注册、搜索

表单的组成：表单域 + 表单控件 + 提示信息；

5.1 表单域 - form

块级元素；

<form action="表单提交地址" method="提交方式" name="表单域名称">
  <!-- 表单控件，提示信息 -->
</form>

5.2 表单控件

表单控件（表单元素）：
- input;
- select;
- textarea;
行内块元素；
input标签 可以通过 type属性值 的不同，展示不同效果；

文本框 ：<input type="text" value="添加显示文字" placeholder="文本框中默认显示的文本">	

密码框 ：<input type="password" value="" placeholder="文本框中默认显示的文本">

单选框 ：<input type="radio" name="" id="" checked>
        有相同 name属性值 的为一组，一组中同时只能选中一个
        checked : 默认选中	
        
多选框 ：<input type="checkbox" name="" id="" checked>		
        checked : 默认选中
        一组复选框，必须有相同的name属性
        
文件选择 ：<input type="file" name="" id="" multiple>
        multiple : 多文件选择
        
提交按钮 ：<input type="submit" value="添加显示文字" >	

重置按钮 : <input type="reset" value="添加显示文字" >				
        点击之后恢复表单默认数据
        
普通按钮 : <input type="button" value="添加显示文字" >

type属性值描述：

属性值	描述	特定值
text	定义单行文本的输入，用户可在其中输入文本，默认宽度为20个字符	placeholder --- input默认显示的文本（不可选中）
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮（一组单选按钮 name 属性值相同）	checked --- 默认选中
checkbox	定义复选框（一组复选框 name 属性值相同）	checked --- 默认选中
file	定义输入字段和“浏览”按钮，供文件上传	multiple --- 多文件选择
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮（普通按钮）

input其他属性：

属性	属性值	描述
name	用户定义	定义input元素的名称（一组单选框或者复选框必须具有相同的name值）
value	用户定义	规定input元素的值
maxlength	正整数	规定输入字段的字符最大长度
placeholder	用户自定义	input框的提示信息，没输入值的时候显示，有输入值的时候显示输入的数据

5.3 input标签禁止文本框输入的四种方法

1.设置input为只读状态，只读字段是不能修改的。不过用户仍然可以使用tab键切换到该字段，还可以选中或拷贝文本:
```
<input type="text" id="" name="" value="" readonly>
```
2.设置input为不用状态，被禁用的input元素即不可用，也不可以点击:
```
<input type="text" id="" name="" value="" disabled>
```

3.maxlength属性：规定输入字段的长度:

<input type="text" id="" name="" value="" maxlength="0">

4.onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了:
```
<input type="text" id="" name="" value="" onfocus="this.blur();">
```

5.4 取消表单轮廓

outline: none / 0;
/* outline：大纲 */
/* 去除表单获取焦点时，边框呈现加粗黑色 */

5.5 button按钮

行内块元素；
🔺 注意：
- type属性值 不同，作用不同；
- 谷歌浏览器中 button 默认是提交按钮；

提交按钮 ：<button type="submit"></button>		
重置按钮 ：<button type="reset"></button>		
普通按钮 ：<button type="button"></button>

5.6 select下拉菜单

行内块元素；
selected ：下拉菜单默认选中（可以设置多个默认选中，但只会生效最后一个）；

<!-- 下拉菜单整体 -->
<select name="" id="">
  <!-- 下拉菜单里面的每一项 -->
  <option value="" selected></option>
</select>

5.7 textarea文本域

行内块元素；

<!-- 文字自动换行，右下角可以拖拽 -->
<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

5.8 防止拖拽文本域

resize: none;			// resize：调整

5.9 label标签

用于将 单/多选框 的 可选按钮 和 提示信息 关联；
✔ 使用方法1 --- 显示关联 （更加规范）：
- 直接使用 label标签 把 内容和表单标签 一起 包裹起来；
- 需要把 label标签 的 for属性 删除即可；
❌ 使用方法2 --- 隐式关联：
- 使用 label标签 把内容 包裹起来；
- 在 表单标签 上添加 id属性；
- 在 label标签 的 for属性 中设置相应的 id属性值；

✅方法1 ： 
    <label for="3">单选框3 </label> 
    <input type="radio" name="单选框" id="3"><br>
    <label for="4">单选框4</label> 
    <input type="radio" name="单选框" id="4"><br>

❌方法2 ： 
    <label>
        单选框1 <input type="radio" name="单选框" id=""><br>
    </label>
    <label>
        单选框2 <input type="radio" name="单选框" id="" checked> <br>
    </label>

贰、HTML5 新增特性

2.1 语义化标签

块级元素；

<!-- 头部标签 -->
<header></header>

<!-- 导航标签 -->
<nav></nav>

<!-- 内容标签 -->
<article></article>

<!-- 定义文档某个区域 -->
<section></section>

<!-- 侧边栏标签 -->
<aside></aside>

<!-- 尾部标签 -->
<footer></footer>

2.2 多媒体标签

行内块元素;

2.2.1 音频标签

<audio src="音频路径" controls autoplay loop> </audio>
    <!--
        src      ： 音频的路径
        controls ： 显示播放的控件（不写该属性，浏览器界面看不到）
        autoplay ： 自动播放（部分浏览器不支持）
        loop     ： 循环播放
    -->

2.2.2 ❗ 视频标签

<video src="视频路径" controls autoplay loop></video>
    <!--
        src      ： 视频的路径
        controls ： 显示播放的控件
        autoplay ： 自动播放（谷歌浏览器中需配合 muted 实现静音播放）
        loop     ： 循环播放
    -->
<!-- eg：-->
    <video src="media/mi.mp4" autoplay muted  loop poster="media/mi9.jpg"></video>

2.3 input 类型（放在表单域里面）

行内块元素;

<!-- 限制用户必须输入为Email类型，否则会自动弹出提示信息 -->
<input type="email" name="" id="">

<!-- 限制用户必须输入为网址类型，否则会自动弹出提示信息 -->
<input type="url" name="" id="">

<!-- 限制用户必须输入为日期类型 -->
<input type="date" name="" id="">

<!-- 限制用户必须输入为时间类型 -->
<input type="time" name="" id="">

<!-- 限制用户必须输入为月类型 -->
<input type="month" name="" id="">

<!-- 限制用户必须输入为周类型 -->
<input type="week" name="" id="">

<!-- 限制用户必须输入为数字类型 -->
<input type="number" name="" id="">

<!-- 手机号码 -->
<input type="tel" name="" id="">

<!-- 搜索框 -->
<input type="search" name="" id="">

<!-- 生成一个颜色选择表单 -->
<input type="color" name="" id="">

2.4 表单属性

placeholder="提示文本"     ---     表单的提示信息，存在默认值将不再显示（不可选中）
required="required"       ---     表单拥有该属性表示其内容不能为空，必须填写
autofocus="aotofocus"     ---     自动聚焦属性，页面加载完成自动聚焦到指定表单
multiple="multiple"       ---     可以选择多个文件提交
autocomplete="off / on"   ---     当用户在字段开始键入时，浏览器基与之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如 autocomplete="on"，关闭autocomplete="off"需，需要放在表单内，必须加上name属性，同时成功提交

可以通过以下方式修改 placeholder里面的颜色（属于CSS）
input::placeholder {
    color: purple;
}

前端 - 笔记 - HTML 【标签 + 转义字符 + 表格 + 列表 + 表单】+ HTML5【语义化标签 + 多媒体标签 + 表单】

壹、HTML

一、标签

1.1 标题标签

1.2 段落标签

1.3 换行标签

1.4 水平线标签

1.5 文本格式化标签

1.6 图片标签

1.7 绝对路径

1.8 相对路径

1.9 超链接标签

1.10 锚点链接

二、转义字符

三、表格

3.1 表格结构

3.2 合并单元格

3.3 表格中的属性值

3.4 利用边框的合并属性、分离属性设置单元格间的间距为0

四、列表

4.1 去除列表前面默认样式

4.2 无序列表

4.3 有序列表

4.4 自定义列表

五、表单 ： 登录、注册、搜索

5.1 表单域 - form

5.2 表单控件

5.3 input标签禁止文本框输入的四种方法

5.4 取消表单轮廓

5.5 button按钮

5.6 select下拉菜单

5.7 textarea文本域

5.8 防止拖拽文本域

5.9 label标签

贰、HTML5 新增 特性

2.1 语义化标签

2.2 多媒体标签

2.2.1 音频标签

2.2.2 ❗ 视频标签

2.3 input 类型（放在表单域里面）

2.4 表单属性

五、表单：登录、注册、搜索

贰、HTML5 新增特性