一、HTML的介绍

超文本标记语言，与CSS、JavaScript组成网页：结构HTML、表现CSS和行为JavaScript

1.HTML的基础结构

默认HTML5基础结构

<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 文档的头部标签 必须要设置title标签 -->
<head>
    <meta charset="UTF-8">
    <!-- 以下代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 页面宽等于屏宽，缩放比等于1.0，防止出现横向滚动条 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 文档的主体 -->
<body>
  
</body>
</html>

文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML或XHTML版本来显示网页，位于文档中的最前面的位置，处于<html>标签之前

<!DOCTYPE html>

语言种类lang

指定html语言种类，常见的有en定义语言为英语、zh-CN定义语言为中文

<html lang="en">

zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)

字符集

使用meta标签的charset属性来规定HTML文档使用哪种字符编码

注：不写的情况下可能会引起乱码的情况

常见的有gb2312、BIG5、GBK和UTF-8

gb2312简单中文包括6763个汉字
BIG5繁体中文，港澳台
GBK包含全部中文字符，是gb2312的扩展，加入对繁体字的支持，兼容gb2312
UTF-8基本包含全世界所有国家需要用到的字符

<meta charset="UTF-8">

注释

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

<!-- 注释语句 -->

二、语义化

语义化是指根据内容的结构化，选择合适的标签。用对的标签做正确的事，语义化标签在开发中更能直观的表现出网页结构

当页面中都在盲目使用div时

<div>
    <div>xxxx</div>
    <div>
        xxxx
    </div>
    <div>
        xxxx
    </div>
    <div>xxxx</div>
</div>

而语义化标签的页面

<body>
    <header>头部</header>
    <nav>
        导航
    </nav>
    <main>
        页面内容
    </main>
    <footer>底部</footer>
</body>

1.语义化的优点

优化代码结构，更直观提现页面结构，便于后期维护
能够帮助浏览器更准确的认识页面布局，便于更好的解析页面
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫更准确的抓取到有效信息
可读性，结构清晰

2.常见的语义化标签

<!-- 网页的头部 -->
<header>头部</header>

<!-- 网页的主要部分 -->
<main>页面内容</main>

<!-- 网页的底部 -->
<footer>底部</footer>

<!-- 用于侧边栏的广告、链接、与附近内容相关的内容 -->
<aside>
    <h1>某某某广告词</h1>
</aside>

<!-- 导航链接 -->
<nav>
    <a>Home</a>
    <a>News</a>
    <a>User</a>
</nav>

<!-- 定义页面独立的内容，其中还可嵌套<header>、<footer>、<sections> -->
<article>
    <header>小页面头部</header>
    <footer>小页面底部</footer>
</article>

<!-- 网页文档部分，长表单或文章 -->
<section></section>

<!-- 文档中的图像 -->
<figure>
	<img src="这是图片的链接">
</figure>

三、标签

1.行内元素、行内块元素、块级元素

块级元素：独占一行，可以设置宽高、内外边距，默认宽度为100%（<div>、<h1-h6>、<ul>、<ol>、<li>、<p>）
行内元素：宽度由内容决定，高度由内容字体大小决定，不能设置宽高、垂直方向内外边距，左右内外边距可设置，且与其他行内元素位于同一行（<span>、<label>、<i>、<em>）
行内块元素：和其他行内元素位于同一行，宽高，内外边距都可以设置（<input>、<img>、<select>）

display: block(转换成块级元素) | inline(转换为行内元素) | inline-block(转换为行内块元素);

2.标题标签

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

标题标签会加粗且字号会依次变大

3.段落标签

<p>段落</p>

段落会根据浏览器窗口的大小进行自动换行，且段落与段落之间有空隙

4.文本格式化标签

<!-- 文本加粗 -->
<strong></strong>

<!-- 斜体 -->
<i></i>

<!-- 倾斜 -->
<em></em>

<!-- 删除线 -->
<del></del>

<!-- 下划线 -->
<ins></ins>

5.盒子标签

div最常见的块级元素盒子

span行内元素盒子

<div>块级盒子</div>
<span>行内盒子</span>

6.图像标签

<img id="img" src="图片路径" alt="替换文本" title="提示文本">

<script>
    let img = document.getElementById('img');
    img.onload = () => {
        console.log('图片加载成功');
    };
    img.onerror = () => {
        console.log('图片加载失败');
    };
</script>

src图片路径
alt当图片不能显示，加载不了的时候显示文字
title鼠标移到图像上，显示的文字
width规定图像的宽度
height规定图像的高度

事件

onload：图片加载成功

onerror：图片加载失败

7.超链接标签

<a href="跳转目标" target="目标窗口的弹出方式" download="下载文件后设定的名字">文本或图像</a>

href：url、锚点id href="#xxx"、路径index.html、邮箱、手机号码
target：_blank表示在新窗口中打开、_top表示在顶层窗口打开、_self表示在当前窗口打开(默认值)、_parent表示从上层窗口打开，通常用于从父窗口打开子窗口
download：添加该属性，会变为下载该文件，而不是打开。若给定值，则文件下载后的名字为该值，若不给值，则为本身文件的名字

<a href="https://www.baidu.com/" target="_blank">百度</a> // 在新窗口打开链接
<a href="https://www.baidu.com/" target="_self">百度</a> // 在当前窗口打开链接
<a href="https://www.baidu.com/" target="_parent">百度</a> // 在父级窗口打开链接
<a href="https://www.baidu.com/" target="_top">百度</a> // 在顶层窗口打开链接

<a href="./img/1.jpg" download>下载</a>

锚点链接

点击链接，可以快速定位到页面中的某个位置

<a href="#two">导航</a>
<h3 id="two">导航的位置标题</h3>

8.特殊字符

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度/摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	立方3(上标3)	`³`

9.表单

完整的表单通常由表单域、表单控件(表单元素)、表单标题(提示信息)三部分组成

9.1、表单标签

<form>表单标签，定义表单域，收集表单域中用户输入的数据提交到服务器端

action：被提交到服务器端的url
method：提交数据发送方式，跟ajax的一致，如GET、POST
name：定义名字，用来区分不同的表单域

<body>
    <!-- 表单 -->
	<form action="#" method="get" name="name">
    	<!-- 此处的内容会被表单手机，提交到服务器 -->
    </form>
</body>

9.2、input标签

<input>标签用于获得用户输入信息，且type属性值不同，搜集方式也不同

<label>标签用于绑定表单元素，当点击<label>标签内的文本时，浏览器会自动将表单元素打上焦点，用于增加用户体验

<label>标签的for属性应当与相关表单元素的id属性相同

input的type类型

type="text"：文本输入框，可用属性name="字段名称"、value="初始值"、placeholder="提示文本"
type="password"：密码输入框，可用属性name="字段名称"、placeholder="提示文本"
type="radio"：单选框，可用属性name="字段名称"(同名的单选按钮才能保证可以单选)、checked="checked"默认选中属性、value="上传给服务器的值"
type="checkbox"：复选框，可用属性name="字段名称"、checked="checked"默认选中属性、value="上传给服务器的值"
type="file"：文件上传，可用属性accept="文件类型"
type="button"：按钮，可用属性value="按钮上显示文本"(<button>按钮显示文本</button>)
type="reset"：重置按钮(<button type="reset">按钮显示文本</button>)
type="submit"：提交按钮，把表单数据发送到服务器端(<button type="submit" form="form的id">提交</button>在表单外可使用button标签进行提交表单)
type="image"：图片按钮，附带属性src="图片路径"

<form action="#" method="get" id="form">
    <!-- 文本输入框 -->
    <label for="name">用户名：</label>
    <input type="text" name="name" id="name" value="" placeholder="请输入用户名"><br>
    <!-- 密码输入框 -->
    <label for="password">密码：</label>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <!-- 单选框 -->
    <label for="sex">性别：</label>
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女<br>
    <!-- 多选框 -->
    <label for="hobby">爱好：</label>
    <input type="checkbox" name="hobby" value="抽烟" checked="checked">抽烟
    <input type="checkbox" name="hobby" value="喝酒">喝酒
    <input type="checkbox" name="hobby" value="打游戏">打游戏<br>
    <!-- 上传文件 -->
    <label for="file">上传头像：</label>
    <input type="file"><br>
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
    <button>普通按钮</button><br>
    <!-- 图片按钮 -->
    <input type="image" src="img.jpg" width="100px" height="80px"><br>
    <!-- 重置按钮 -->
    <input type="reset" value="重置">
    <button type="reset">重置</button><br>
    <!-- 提交按钮 -->
    <input type="submit" value="提交"></form>
</form>
<button type="submit" form="form">提交</button>

常用属性

id唯一标识，name设定字段名称，value表单的值，type表单类型
placeholder：提示文本
autofocus="autofocus"：自动聚焦
min最低输入多少字段、max最高输入多少字段
checked="checked"：默认选中
disabled="disabled"：禁止输入
required="required"：必填
readonly="readonly"：只读
multiple="multiple"：可多选文件

修改placeholder的样式

input::placeholder {
    color: red;
}

新增type类型

type="email"：email类型
type="url"：url类型
type="data"：日期类型
type="time"：时间类型
type="month"：月类型
type="week"：周类型
type="number"：数字类型
type="search"：搜索框
type="color"：颜色选择表单

<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>月: <input type="month" /></li>
<li>周: <input type="week" /></li>
<li>数字: <input type="number" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>

9.3、select下拉菜单

<select>下拉菜单，可进行单选或多选，需要使用子标签指定列表

name：字段名称
multiple：可多选，不写默认为单选
size：可见选项的数目，默认为1

<option>子标签：属于下拉菜单的一个选项

value：选项的值
selected：默认勾选

<form action="#" method="get">
    <!-- 下拉列表 -->
    <select name="city" multiple="multiple" size="5">
        <!-- 列表项 -->
        <option value="beijing" selected>北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="hangzhou">杭州</option>
        <option value="tianjin">天津</option>
    </select>
    <input type="submit">
</form>

<form action="#" method="get">
    <!-- 下拉列表 -->
    <select name="city">
        <!-- 列表项 -->
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
        <option value="hangzhou">杭州</option>
        <option value="tianjin">天津</option>
    </select>
    <input type="submit">
</form>

9.4、textarea多行文本域

<textarea>文本域，多行文本输入控件

cols：文本域的列数
rows：文本域的行数
maxlength：最多输入多少字符
minlength：最少输入多少字符

<form action="#" method="get">
    <!-- 多行文本域 -->
    <textarea name="area" cols="50" rows="8" maxlength="200"></textarea>
    <input type="submit">
</form>

10.表格标签

基础结构

<table>
    <thead>
        <tr>
            <th></th>
            <th>数学</th>
            <th>语文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>小红</th>
            <td>84</td>
            <td>78</td>
        </tr>
        <tr>
            <th>小明</th>
            <td>96</td>
            <td>76</td>
        </tr>
        <tr>
            <th>小华</th>
            <td>84</td>
            <td>95</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总计</th>
            <td>264</td>
            <td>249</td>
        </tr>
    </tfoot>
</table>

<table>定义表格

<thead>定义表格头部

<tbody>定义表格内容

<tfoot>定义表格尾部

tr定义行

th表头(标题)，会加粗居中显示

td单元格

table标签的属性

border：边框，默认无边框
cellpadding：单元格的内边距，默认为1px
cellspacing：单元格与单元格之间的间隙，默认为2px
width：表格的宽度

合并单元格

跨行合并：rowspan="合并单元格的个数"，从上到下合并
跨列合并：colspan="合并单元格的个数"，从左到右合并

<td colspan="2" rowspan="2"></td>

11.列表标签

无序列表<ul>

只能包含<li>，没有顺序，<li>里面可包含任何标签

默认符号disc圆点(●)、circle圆圈(○)、square方块(■)、decimal数字、url设置图像为符号、none不显示符号。css样式list-style-type可设置

<ul>
     <li>第一个li</li>
     <li>第二个li</li>
     <li>第三个li</li>
</ul>

有序列表<ol>

只能包含<li>，有顺序

默认符号decimal数字、disc圆点(●)、circle圆圈(○)、square方块(■)、url设置图像为符号、none不显示符号。css样式list-style-type可设置

<ol>
     <li>第一个li</li>
     <li>第二个li</li>
     <li>第三个li</li>
</ol>

自定义列表<dl>

只能包含<dt>和<dd>，<dt>和<dd>里面可以放任何标签

<dl>
     <dt>标题</dt>
     <dd>内容一</dd>
     <dd>内容二</dd>
</dl>

12.媒体标签

<video>视频标签，用于在浏览器展示视频文件

<video src="1.mp4" controls></video>

<audio>音频标签，用于在浏览器播放音频文件

<audio src="1.mp3" controls></audio>

12.1、常用属性

src：视频的地址
autoplay：自动播放(谷歌浏览器需添加muted才能自动播放，或通过js控制video的事件进行播放)
controls：播放器控件
loop：是否循环播放该视频
muted：静音
poster：视频加载时的显示图
preload：是否提前加载视频，auto一旦页面加载则开始加载视频、none页面加载也不提前加载视频、metadata提前加载视频元数据
width：视频宽度
height：视频高度

12.2、常用方法

load()：重新加载资源
play()：播放
pause()：暂停

12.3、方法、属性和事件

let Media = document.getElementById('video');

// 错误状态 
Media.error; // null:正常 
Media.error.code; // 1.用户终止 2.网络错误 3.解码错误 4.URL无效 

// 网络状态 
Media.currentSrc; // 返回当前资源的URL 
Media.src = value; // 返回或设置当前资源的URL 
Media.canPlayType(type); // 是否能播放某种格式的资源 
Media.networkState; // 0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源 
Media.load(); // 重新加载src指定的资源 
Media.buffered; // 返回已缓冲区域，TimeRanges 
Media.preload; // none:不预载 metadata:预载资源信息 auto: 

// 准备状态 
Media.readyState;  // 1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA 
Media.seeking; // 是否正在seeking 

// 回放状态 
Media.currentTime = value; // 当前播放的位置，赋值可改变位置 
Media.startTime; // 一般为0，如果为流媒体或者不从0开始的资源，则不为0 
Media.duration; // 当前资源长度 流返回无限 
Media.paused; // 是否暂停 
Media.defaultPlaybackRate = value;// 默认的回放速度，可以设置 
Media.playbackRate = value;// 当前播放速度，设置后马上改变 
Media.played; // 返回已经播放的区域，TimeRanges，关于此对象见下文 
Media.seekable; // 返回可以seek的区域 TimeRanges 
Media.ended; // 是否结束 
Media.autoPlay; // 是否自动播放 
Media.loop; // 是否循环播放 
Media.play();  // 播放 
Media.pause();  // 暂停 

// 控制 
Media.controls;// 是否有默认控制条 
Media.volume = value; // 音量 
Media.muted = value; // 静音 

// TimeRanges(区域)对象 
TimeRanges.length; // 区域段数 
TimeRanges.start(index) // 第index段区域的开始位置 
TimeRanges.end(index) // 第index段区域的结束位置

相关事件

loadstart：客户端开始请求数据
progress：客户端正在请求数据
suspend：延迟下载
abort：客户端主动终止下载（不是因为错误引起），
error：请求数据时遇到错误
stalled：网速失速
play：play()和autoplay开始播放时触发
pause：pause()触发
loadedmetadata：成功获取资源长度
waiting：等待数据，并非错误
playing：开始回放
canplay：可以播放，但中途可能因为加载而暂停
canplaythrough：可以播放，歌曲全部加载完毕
seeking：寻找中
seeked：寻找完毕
timeupdate：播放时间改变
ended：播放结束
ratechange：播放速率改变
durationchange：资源长度改变
volumechange：音量改变

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度/摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	立方3(上标3)	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
大于号		`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	度/摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2(上标2)	`²`
³	立方3(上标3)	`³`

HTML基础