									欲先攻其事,必先利其器

1-Vscode

安装的方式就麻烦大家自行百度了（相信你可以的）

软件下载链接
1.1 - Vscode 插件推荐🔥

2- HTML的基本结构

学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；
HTML标签即“HTML元素”
HTML基本结构：
HTML 标签是由尖括号包围的关键词，例如 <html>
HTML 标签通常是成对出现的，例如 <html>和</html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <!-- 这一句是移动端才会了解到的 不需要过多的去理解-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.1、文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.
注意：

- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
- <!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签。

2.2 - lang语言种类

用来定义当前文档显示的语言

en 定义语言为英语
zh-CN 定义语言为中文

<html lang="en">

2.3 - 字符集

在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset = "UTF-8" />

charset 常用的值有：：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符(作为了解即可)

2.4 - head页头内部标签(作为了解)

3 - 标签(重点)

3.1 - 标题标签

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>

加了标题的文字会变的加粗，字号也会依次变大
一个标题独占一行 (块级元素)

3.2 - 段落标签

<p>段落标签</p>

paragraph 的缩写（不需要记住单词记住p这个字母就好了）
文本在一个段落这种会根据浏览器窗口的大小进行自动换行
段落和段落之间保有空隙

3.3 - 换行标签

<br />

<br /> 是个单标签
<br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

3.4 - 文本格式化标签

为文字设置粗体、斜体、下划线等效果
重点记忆 加粗 和 倾斜

3.5 - 盒子标签( 块级元素/行内元素) （重点）

<div></div> :一行只能放一个大盒子(块级元素)
<span></span> : 一行可以放多个小盒子( 行内元素)

(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；

常见块元素有：h1~h6、p、hr、div等。

(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

常见行内元素有：strong、em、span等

3.6 - 图像标签

<img src="图片的地址" alt="前端菜鸟"  title="我好菜啊" />

<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

src是<img>标签的必须属性，它用于指定图像文件的路径和文件

src属性:规定显示图像的url
alt属性：规定图像不能正常显示时的替代文本
title属性：鼠标悬停在图片上时显示的文本

3.7、路径（重点）

3.7.1、相对路径

相对路径	符号
同一路径：例如图片与HTML文件在同一级		`<img src="1.jpg"/>`
相隔多级别的用反斜杠/隔开就可以了	/	`<img src="images/1.jpg"/>`
如果图片在HTML上一级路径	../	`<img src="../1.jpg"/>`

3.7.2、绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

3.8、超链接标签

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

3.8.1 -a 标签解析

在<a> 标签里面的链接方式可以分为四种：

内部链接

<a href="index.html">内部链接</a>

外部链接

  <a href="http://www.9xkd.com">跳转至指定链接页面</a>

空链接，点击标签后会跳转至当前页面的最顶端

  <a href="#">空链接</a>

锚链接，组成部分：锚记和指向锚记的链接
作用：点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为 #名字
找到目标位置标签，里面添加一个 id属性=刚才的名字

 <a href="#mao"></a>
 <a name="mao"></a>

<a> 标签的目标属性：target 。

target：指定在何处打开链接文档，它可以分为五种情况：

_blank，在新窗口或标签中打开链接的文档

 <a href="https://www.9xkd.com/" target="_blank">Welcome to xkd_3!</a>

_self，在与单击相同的窗口或者是选项卡中打开链接的文档（默认设置）

  <a href="current.html" target="_self">把文档调入当前页框</a>

_parent，在父框架中打开链接的文档

  <a href="index.html" target="_parent">指向父框架文档</a>

_top，在整个窗口中打开链接的文档

  <a href="https://www.9xkd.com/index.html/" target="_top">教程系列</a>

额外小知识

如果 href 里面地址是一个文件或者压缩包，会下载这个文件

<a href="123img.zip"></a>

3.9 - 注释

注释快捷键为 ctrl + /
注释以  结束

<!--  注释语句	-->

3.10 - 表格

table 用来定义表格的标签
tr 用来定义表格中的行，必须嵌套在<table></table> 标签中
td 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中
th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示

3.10.1 - 表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格可以没有，但是这3者必须要有。

语法

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

说明：
<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组就表示该表格为几行。<td>和</td>标记着单元格的开始和结束

3.10.2 - 小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这一句是移动端才会了解到的 不需要过多的去理解-->
    <style>
        .tab1 tbody tr td {
	border: 1px solid #000;
}
    </style>
</head>
<body>
    <body>
        <table>
            <tr>  
                <th>姓名</th>    
                <th>性别</th>    
                <th>年龄</th>        
            </tr>
            <tr>  
                <td>范</td>     
                <td>男</td>     
                <td>18</td>          
            </tr>  
            <tr>  
                <td>范</td>    
                <td>男</td>     
                <td>18</td>          
            </tr>                        
        </table>
    </body>
</body>
</html>

效果

3.10.3 - 完整结构

格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
    <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

说明：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。

3.10.4 - 合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数"

创建一个表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>

语法：

(1)、合并行

<td rowspan="跨度的行数">

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td colspan="3">合并第一行的列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

(2)、合并列

语法：

` <td colspan="跨度的列数">`

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格创建</title>
</head>
<body>
<table border="1px" style="width: 500px;height: 300px">
    <tr>
        <td rowspan="3">合并第一列的行</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>

3.11、列表标签

无序列表：<ul>
有序列表：<ol>
自定义列表：<dl>

3.11.1 - 无序列表:

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于<ul 标签。每个列表项始于<li

无序列表的type属性有三个值

disc：表示实心小圆点
circle：表示空心小圆点
square：表示实心小方块

<body>
    <ul type="disc">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>

    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>

    <ul type="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</body>

3.11.2 - 有序列表:

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表的type属性值：

type=“1”(默认) 数字排序
type=“A” 字母排序
type="|" 罗马字符排序
有序列表的start属性：定义列表开始的序号比如：

从10开始 有序列表的value属性： 定义某个单个列表项的序列号

<body>
    <ol type="1">
        <li>JAVA</li>
        <li>MYSQL</li>
        <li>C#</li>
        <li>PHP</li>
        <li>C++</li>
    </ol>

    <ol type="A">
        <li>JAVA</li>
        <li>MYSQL</li>
        <li>C#</li>
        <li>PHP</li>
        <li>C++</li>
    </ol>

    <ol type="I">
        <li>JAVA</li>
        <li>MYSQL</li>
        <li>C#</li>
        <li>PHP</li>
        <li>C++</li>
    </ol>
    <ol start="10">
        <li>JAVA</li>
        <li>MYSQL</li>
        <li>C#</li>
        <li>PHP</li>
        <li>C++</li>
    </ol>
</body>

3.11.3 - 自定义列表:（了解）

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl标签开始。
每个自定义列表项以 <dt 开始。
每个自定义列表项的定义以 <dd 开始。

<body>
    <h2 align="center">简介</h2>
    <dl>
        <td>背景</td>
        <dd>开始</dd>
    
        <td>来源</td>
        <dd>介绍</dd>
    
        <td>成书过程</td>
        <dd>结束</dd>
    </dl>
</body>

3.12 - 表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

3.12.1 - 表单域

表单域是一个包含表单元素的区域
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域的名称">
    
</form>

重点属性

action	指定表单的发送地址（服务器地址）
method	是表单数据发送至服务器的方法，常用的有两种：`get、post，`
用的input 的type属性值是`submit`，“提交”是这个按钮value属性的默认值
name属性：输入内容的识别名称，传递参数时候的名称
value属性：默认值

了解属性

maxlength属性：输入的最大字数
readonly属性：只读属性，设置内容不可变更
disabled属性：设置为不可用
require属性：设置内容为必须填写项，否则无法提交（新属性）
placeholder属性：设置默认值（暗沉色字体），当文本框获得焦点时被清空，对text、url、tel、email、password、search有效
autocomplete属性：属性值为on/off，定义是否开启浏览器自动记忆功能
autofocus属性：自动获得焦点
accesskey属性：指定快捷键Windows中，指定快捷键后，按alt+“快捷键”，便会获得焦点
tabindex属性 ：指定按tab键时，项目间的移动顺序

3.12.2、表单控件(表单元素)

1⃣️input输入表单元素

input输入表单元素
input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

type 属性的属性值及描述如下：

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

name 和 value 是每个表单元素都有的属性值
name 是表单元素的名字，要求单选框和复选框要有相同的name值
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

2⃣️文本框与密码框

type 属性设置为 text 是文本框
type 属性设置为 password 是密码框

<body>
    <form>
        用户名：<input type="text"> <br/> 
        密码：<input type="password">
    </form>
</body>

3⃣️单选框和复选框

type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name 是表单元素的名字，要求单选框和复选框要有相同的name值

<form>
        用户名：<input type="text"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        性别：
        男<input type="radio"> 
        女 <input type="radio">
        <!-- checkbox是多选框，可以多选 -->
        爱好：
        听音乐<input type="checkbox"> 
        学习<input type="checkbox">   
        打游戏<input type="checkbox"> 
</form>

4⃣️name和value属性

name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单

<form>
        用户名：<input type="text" value="请输入用户名"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
        性别：
        男<input type="radio" name="sex" value="男"> 
        女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框，可以多选 -->
        爱好：
        吃饭<input type="checkbox" name="habby" value="吃饭"> 
        睡觉<input type="checkbox" name="habby" value="睡觉">   
        打游戏<input type="checkbox" name="habby" value="打游戏"> 
</form>

5⃣️checked和maxlength

单选按钮和复选框可以设置checked 属性
当页面打开时候就可以默认选中这个按钮
单选框只能给其中一个加checked，复选框可以多加

性别:
男<input type="radio" name="sex" value="男" checked="checked"> 
女 <input type="radio" name="sex" value="女">

6⃣️submit和reset

type 属性设置为submit：提交按钮会把表单数据发送到服务器
type 属性设置为reset：重置按钮会清除表单中的所有数据

7⃣️button和文件域

type 属性设置为button：是一个按钮
type 属性设置为file：是一个文件域，可以上传文件

<input type="button" value="获取验证码">
 <br>
    <!-- 文件域：上传文件使用的 -->
    上传头像：<input type="file">

8⃣️label 表单元素

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
label标签的 for属性应当与相关元素的id 属性相同

<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />

9⃣️select下拉表单元素

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项

<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>

🔟 textarea文本域元素

用于定义多行文本输入的控件

<textarea>
    文本内容
</textarea>

4 - HTML5新特性

4.1 - 新增语义化标签

以前布局，我们基本用div 来做。 div 对于搜索引擎来说，是没有语义的。
新增语义化标签如下：

标签	描述
`<header>`	定义了文档的头部区域
`<footer>`	定义了文档的尾部区域
`<nav>`	定义文档的导航
`<section>`	定义文档中的节
`<article>`	定义文章
`<aside>`	定义页面以外的内容
`<details>`	定义用户可以看到或者隐藏的额外细节
`<summary>`	标签包含details元素的标题
`<dialog>`	定义对话框
`<figure>`	定义自包含内容，如图表
`<main>`	定义文档主内容
`<mark>`	定义文档的主内容
`<time>`	定义日期/时间

–注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在IE9中，需要把这些元素转换为块级元素

 <style>
        header, nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }
        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

4.2 - 多媒体

4.2.1 - 音频 -- audio

音频 -- audio
视频 -- video

4.2.1.1 - audio 标签说明

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
但是：播放格式是有限的

4.2.1.2 - audio 支持的音频格式

audio 目前支持三种格式

audio 的参数

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

4.2.2 - 视频 video

4.2.2.1 - 目前支持三种格式

语法格式

`<video src="./media/video.mp4" controls="controls"></video>`

4.2.2.2 -video 参数

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

4.3 总结

频标签与视频标签使用操作基本一致

多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放
注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的

4.3 - 新增 input 标签

这里就不一一罗列了有需要的可烤鱼访问下列的网站进行学习
学习网站

到此完结，有什么不足的地方欢迎留言补充

01-HTML篇