HTML5入门基础

基础知识

标签属性
1. 用于给标签提供附加信息
2. 可以写在：起始标签或单标签中，形式如下

<marquee loop="1" bgcolor="orange">hello</marquee>
<input type="password">

3. 有些特殊的属性，没有属性名，只有属性值，例如：
4. 注意点：
1. 不同的标签，有不同的属性；也有一些通用属性
2. 属性名、属性值不能乱写，都是W3C规定好的
3. 属性名、属性值，都不区分大小写，但推荐小写
4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号
5. 标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">

标签结构
1. 在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”
2. 【检查】和【查看网页源代码】的区别：
【查看网页源代码】看到的是：程序员编写的源代码
【检查】看到的是：经过浏览器 “处理” 后的源代码
备注：日常开发中，【检查】用的最多
3. 网页的基本结构如下：
1. 想要呈现在网页中的内容写在 body 标签中
2. head 标签中的内容不会出现在网页中
3. head 标签中的 title 标签可以指定网页的标题

注释
1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
2. 作用：对代码进行解释和说明
3. 写法：

<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">欢迎你</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>欢迎你123</marquee>

文档声明
1. 作用：告诉浏览器当前网页的版本
2. 写法：具体有哪些写法请参考：W3C官网-文档声明

<!DOCTYPE html> 
或 
<!DOCTYPE HTML>
或 
<!doctype html>

3. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧

字符编码
1. 计算机对数据的操作：
1. 存储时，对数据进行：编码
2. 读取时，对数据进行：解码
2. 编码、解码，会遵循一定的规范 —— 字符集
3. 字符集有很多种，常见的有:
1. ASCII ：大写字母、小写字母、数字、一些符号，共计128个
2. ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个
3. GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符
4. GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文
5. UTF-8 ：包含世界上所有语言的：所有文字与符号
4. 总结：
平时编写代码时，统一采用 UTF-8 编码
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指
定字符编码

<head>
<meta charset="UTF-8"/>
</head>

设置语言
1. 主要作用：让浏览器显示对应的翻译提示，有利于搜索引擎优化
2. 具体写法：<html lang="zh-CN">
标准结果
HTML标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
    <body></body>
</html>

正式篇

开发者语言

MDN： developer.mozilla.org

W3C官网： www.w3c.org

排版标签

标签名	含义	单双标签
h1-h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局	双

h1 最好写一个， h2~h6 能适当多写
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签

语义化标签

概念：用特定的标签，去表达特定的含义

原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要

优势：

代码结构清晰可读性强
有利于 SEO（搜索引擎优化）
方便设备解析（如屏幕阅读器、盲人阅读器等）

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）
行内元素：不独占一行
使用原则：
1. 块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）
2. 行内元素中能写行内元素，但不能写块级元素
3. 一些特殊的规则：h1~h6 不能互相嵌套，p 中不要写块级元素

文本标签

（1）常用的

标签用于包裹词汇、短语等
通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

标签名	含义	单双标签
em	重点阅读内容（斜体）	双
strong	十分重要的内容(语义比em重，粗体)	双
span	没有含义(生活中的例子： div 是大包装袋， span 是小包装袋)	双

（2）不常用的

blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如：small 、 b 、 u 、 q 、 blockquote

HTML图片标签

（1）基本使用

标签名

语义

常用属性

单双标签

img

图片

src ：图片路径— 图片的具体位置

alt ：图片描述

width ：图片宽度，单位是像素，例如： 200px 或 200

height ：图片高度，单位是像素，例如： 200px 或 200

单

像素（ px ）是一种单位，尽量不同时修改图片的宽和高，可能会造成比例失调。

alt 属性的作用：

搜索引擎通过 alt 属性，得知图片的内容；当图片无法展示时候，有些浏览器会呈现 alt 属性的值；

盲人阅读器会朗读 alt 属性的值

（2）路径的分类

相对路径：以当前位置作为参考点，去建立路径

注意点：相对路径中的 ./ 可以省略不写。

相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

结构	符号	含义	举例
	./	同级	引入【怪兽.jpg】： <img src="./怪兽.jpg">
	/	下一级	引入【喜羊羊.jpg】： <img src="./a/喜羊羊.jpg">
	../	上一级	引入【奥特曼.jpg】： <img src="../奥特曼.jpg">

绝对路径：以根位置作为参考点，去建立路径注意点：使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用

使用网络绝对路径方便，注意：若服务器开启了防盗链，会造成图片引入失败
1. 本地绝对路径： E:/a/b/c/奥特曼.jpg
2. 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png

（3）常见图片格式

jpg 格式：

概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式

特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图

使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图

png 格式：

概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片

特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。

使用场景：想让图片有透明背景；想更高质量的呈现图片；例如：公司logo图、重要配图

bmp 格式：

概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节

特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图

使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片

gif 格式：

概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整

特点：支持的颜色较少、支持简单透明背景、支持动态图

使用场景：网页中的动态图片

webp 格式：

概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片

特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题

使用场景：网页中的各种图片

base64 格式

本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开

原理：把图片进行 base64 编码，形成一串文本

如何生成：靠一些工具或网站

如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响

使用场景：一些较小的图片，或者需要和网页一起加载的图片

超链接

主要作用：从当前页面进行跳转。

可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定

应用。

标签名

语义

常用属性

单双标签

超链接

href ：指定要跳转到的具体目标

target ：控制跳转时如何打开页面，常用值如下:

_self ：在本窗口打开

_blank ：在新窗口打开

id ：元素的唯一标识，可用于设置锚点

name ：元素的名字，写在 a 标签中，也能设置锚点

双

（1）跳转到页面

注意1：代码中的多个空格、多个回车，都会被浏览器解析成一个空格

注意2：虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素

 <a href="https://www.jd.com/" target="_blank">去京东</a>  <a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

（2）跳转到文件

注意1：若浏览器无法打开文件，则会引导用户下载

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称

<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

跳转到miao'dian

锚点：网页中的一个标记点

使用方式：

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/电影.mp4">看电影</a>
<a href="./resource/看房子.gif">看房子</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 浏览器可以打开，强制触发下载 -->
<a href="./resource/电影.mp4" download="电影片段.mp4">下载电影</a>

注意点：具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点

name 和 id 都是区分大小写的，且 id 最好别是数字开头

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/电影.mp4">看电影</a>
<a href="./resource/看房子.gif">看房子</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 浏览器可以打开，强制触发下载 -->
<a href="./resource/电影.mp4" download="电影片段.mp4">下载电影</a>

唤起指定应用

通过a标签，可以唤起设备应用程序

第二步：跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

列表

（1）有序列表

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

（2）无序别表

<h2>我想去的几个城市</h2>
<ul>
  <li>成都</li>
  <li>上海</li>
  <li>西安</li>
  <li>武汉</li>
</ul>

（3）嵌套列表

<h2>我想去的几个城市</h2>
<ul>
  <li>成都</li>
  <li>
    <span>上海</span>
    <ul>
      <li>外滩</li>
      <li>杜莎夫人蜡像馆</li>
      <li>
        <a href="https://www.opg.cn/">东方明珠</a>
      </li>
      <li>迪士尼乐园</li>
    </ul>
  </li>
  <li>西安</li>
  <li>武汉</li>
</ul>

（4）自定义列表

概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）

<h2>如何高效的学习？</h2>
<dl>
  <dt>做好笔记</dt>  #术语名称
  <dd>笔记是我们以后复习的一个抓手</dd> #术语描述
  <dd>笔记可以是电子版，也可以是纸质版</dd>
  <dt>多加练习</dt>
  <dd>只有敲出来的代码，才是自己的</dd>
  <dt>别怕出错</dt>
  <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

表格

（1）基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成

表格涉及到的标签：

table ：表格 caption ：表格标题

thead ：表格头部 tbody ：表格主体

tfoot ：表格注脚 tr ：每一行

th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

<table border="1">
  <!-- 表格标题 -->
  <caption>学生信息</caption>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>民族</th>
      <th>政治面貌</th>
    </tr>
  </thead>
  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>汉族</td>
      <td>团员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>满族</td>
      <td>群众</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>20</td>
      <td>回族</td>
      <td>党员</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>女</td>
      <td>21</td>
      <td>壮族</td>
      <td>团员</td>
    </tr>
  </tbody>
  <!-- 表格脚注 -->
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>共计：4人</td>
    </tr>
  </tfoot>
</table>

（2）常用属性

注意：

<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，

只能控制表格最外侧边框的宽度，这个问题如何解决？—— 靠 CSS 控制

默认情况下，每列的宽度，得看这一列单元格最长的那个文字
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了

（3）跨行跨列

rowspan ：指定要跨的行数

colspan ：指定要跨的列数

<body>
    <table border="1" cellspacing="0">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>项目</th>
                <th colspan="5">上课</th>
                <th colspan="2">活动与休息</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
                <td>3-6</td>
                <td>3-7</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>4-5</td>
                <td>4-6</td>
                <td>4-7</td>
            </tr>
            <tr>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
                <td>5-6</td>
                <td>5-7</td>
            </tr>
            <tr>
                <td>6-2</td>
                <td>6-3</td>
                <td>6-4</td>
                <td>6-5</td>
                <td>6-6</td>
                <td>6-7</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>7-2</td>
                <td>7-3</td>
                <td>7-4</td>
                <td>7-5</td>
                <td>7-6</td>
                <td>7-7</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>8-2</td>
                <td>8-3</td>
                <td>8-4</td>
                <td>8-5</td>
                <td>8-6</td>
                <td>8-7</td>
            </tr>
        </tbody>
    </table>
</body>

常用标签

注意点：

不要用 <br> 来增加文本之间的行间隔，应使用 <p> 元素，或后面即将学到的 CSS中margin 属性
<hr> 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成

标签名	含义	单双标签
br	换行	单
hr	分隔开，展示一条线	单
pre	按原文显示（一般用于在页面中嵌入大段代码）	双

表单

概念：一个包含交互的区域，用于收集用户提供的数据。

（1）基本结构

标签名	语义	属性	单双标签
from	表单	action ：用于指定表单的提交地址（需要与后端人员沟通后确定） target ：用于控制表单提交后，如何打开页面，常用值如下： _self ：在本窗口打开 _blank ：在新窗口打开 method ：用于控制表单的提交方式	双
input	输入框	type ：设置输入框的类型，目前用到的值是 text ，表示普通文本 name ：用于指定提交数据的名字，（需要与后端人员沟通后定）	单
button	按钮		双

<form action="https://www.baidu.com/s" target="_blank" method="get">
  <input type="text" name="wd">
  <button>去百度搜索</button>
</form>

（2）常用表单控件

输入文本框

<input type="text">

常用属性：name ：数据的名称

value ：输入框的默认输入值

maxlength ：输入框最大可输入长度

输入密码

<input type="password">

 常用属性：同上

单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：name ：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致

value ：提交的数据值

checked ：让该单选按钮默认选中

复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性：同上

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据

name ：指定数据的名称

value ：指定的是真正提交的数据

提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意：button 标签 type 属性的默认值是 submit

button 不要指定 name 属性

input 标签编写的按钮，使用 value 属性指定按钮文字

重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点：button 不要指定 name 属性

input 标签编写的按钮，使用 value 属性指定按钮文字

普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性：rows ：指定默认显示的行数，会影响文本域的高度

cols ：指定默认显示的列数，会影响文本域的宽度

下拉框

<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

常用属性及注意事项： name ：指定数据的名称

option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性,提交的数据就是 value 的值（建议设置 value 属性）

option 标签设置了 selected 属性，表示默认选中

（3）禁用表单控件

给表单控件的标签设置disabled 既可禁用表单控件

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

（4）label标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

让 label 标签的 for 属性的值等于表单控件的 id
把表单控件套在 label 标签的里面

（5）fieldset 与 legend 的使用

fieldset 可以为表单控件分组、 legend 标签是分组的标题

<fieldset>
  <legend>主要信息</legend>
  <label for="zhanghu">账户：</label>   #label的使用
  <input id="zhanghu" type="text" name="account" maxlength="10"><br>
  
  <label>
   密码：
    <input id="mima" type="password" name="pwd" maxlength="6">
  </label>
  <br>
 性别：
  <input type="radio" name="gender" value="male" id="nan">
  <label for="nan">男</label>
  <label>
    <input type="radio" name="gender" value="female" id="nv">女
  </label>
</fieldset>

（6）表单总结

框架标签

标签名

语义

常用属性

单双标签

iframe

框架（在网页中嵌入其他文件）

name ：框架名字，可以与 target 属性配合

width ：框架的宽

height ：框架的高度

frameborder ：是否显示边框，值：0或者1

双

iframe 标签的实际应用：在网页中嵌入广告；与超链接或表单的 target 配合，展示不同的内容

HTML实体

定义：在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体

字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ;

常见字符实体总结：完整实体列表请参考：HTML Standard (whatwg.org)

HTML全局属性

完整的全局属性，请参考：全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)

属性名	含义
id	给标签指定唯一标识，注意： id 是不能重复的作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使用注：不能在以下HTML元素中使用：<head><html><meta><script><style><title>
class	给标签指定类名，随后通过 CSS 就可以给标签设置样式
style	给标签设置 CSS 样式
dir	内容的方向，值: ltr 、 rtl
title	给标签设置一个文字提示，一般超链接和图片用得比较多注：不能在以下HTML元素中使用：<head><html><meta><script><style><title>
lang	给标签指定语言，具体规范和可选值请参考【10. HTML 设置语言】注：不能在以下HTML元素中使用：<head><html><meta><script><style><title>

meta元素信息

配置字符编码:<meta charset="utf-8"
针对 IE 浏览器的兼容性配置:<meta http-equiv="X-UA-Compatible" content="IE=edge">
针对移动端的配置:<meta name="viewport" content="width=device-width, initial-scale=1.0">
配置网页关键字:<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
配置网页描述信息:<meta name="description" content="80字以内的一段话，与网站内容相关">
针对搜索引擎爬虫配置：<meta name="robots" content="此处可选值见下表">

配置网页作者：<meta name="author" content="tony">
配置网页生成工具:<meta name="generator" content="Visual Studio Code">
配置网页自动刷新:<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

HTML5入门基础

基础知识 标签属性 1. 用于给标签提供 附加信息 2. 可以写在：起始标签 或 单标签中，形式如下

正式篇 开发者语言

排版标签

语义化标签

块级元素与行内元素

文本标签

HTML图片标签

（1）基本使用

（2）路径的分类

（3）常见图片格式

超链接

（1）跳转到页面

（2）跳转到文件

跳转到miao'dian

唤起指定应用

列表

（1）有序列表

（2）无序别表

（3）嵌套列表

（4）自定义列表

表格

（1）基本结构

（2）常用属性

（3）跨行跨列

常用标签

表单

（1）基本结构

（2）常用表单控件

（3）禁用表单控件

（4）label标签

（5）fieldset 与 legend 的使用

（6）表单总结

框架标签

HTML实体

HTML全局属性

meta元素信息

基础知识

标签属性
1. 用于给标签提供附加信息
2. 可以写在：起始标签或单标签中，形式如下

正式篇

开发者语言