HTML学习
1 网页相关概念
1.1 网页
- 网站是指在因特网上根据一定规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
- 网页是网站的一“页”，通常是 HTML 格式文件，通过浏览器阅读。
- 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等素材组成。
- HTML：超文本标记语言（Hyper Text Markup Language），一种用来描述网页的语言。
1.2 常用浏览器
谷歌（Chrome）、火狐（Firefox）、Edge、IE、苹果（Safari）、Opera 等。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360浏览器、百度浏览器 |
| Firefox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome | Blink | Chrome/Opera 浏览器内核（Webkit 的分支） |
1.3 Web标准
Web标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合，W3C（World Wide Web Consortium，万维网联盟）是国际最著名的标准化组织。
Web标准主要包括 结构（Structure）、表现（Presentation）、行为（Behavior） 三个方面。
| 标准 | 说明 |
|---|---|
| 结构 | 用于对网页元素进行整理和分类，主要是 HTML |
| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式，主要指 CSS |
| 行为 | 指网页模型的定义及交互的编写，主要是 JavaScript |
Web 标准提出的最佳体验方案：结构、样式、行为相分离。
2 HTML语法
2.1 基本语法概述
- HTML 标签是由尖括号包围的关键词，如
<html>。 - HTML 标签通常成对出现，如
<html></html>，称为双标签，分别是开始和结束标签。 - 有些特殊的标签必须是单个标签（极少情况），如
<br />，称为单标签。
标签关系：包含和并列
<!-- 包含 -->
<head>
<title></title>
</head>
<!-- 并列 -->
<head></head>
<body></body>
2.2 基本结构标签
也被称为骨架标签，页面内容就是在这些基本标签上书写。
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML 标签 | 页面中最大的标签，称为根标签 |
<head></head> |
文档头部 | 在 <head> 标签中必须要设置的标签是 <title> |
<title></title> |
文档标题 | 页面属于自己的网页标题 |
<body></body> |
文档主体 | 元素包含文档的所有内容 |
<html>
<head>
<title> This is title </title>
</head>
<body>
This is a sentence.
</body>
</html>
<!DOCTYPE>文档类型声明标签 —— 告诉浏览器使用哪种 HTML 版本显示网页。<!DOCTYPE>声明位于文档最前面，在<html>标签之前。<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。<!DOCTYPE html>表示当前页面采用的是 HTML5 版本显示页面。
lang语言种类 —— 用来定义当前文档显示的语言。en定义语言为英语，zh-CN定义语言为中文。- 对于文档显示而言，定义成
en的文档也可以显示中文，反之同理。
charset字符集 —— 字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。GB2312表示简体中文。BIG5表示繁体中文。GBK包含了简体中文和繁体中文。UTF-8为万国码，基本包含了全世界所有国家需要用到的字符。
<!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>
</body>
</html>
2.3 HTML 常用标签
2.3.1 标题标签 <h1> - <h6>
h: head
标签语义：作为标题使用，并且依据重要性递减。
特点
- 文字变粗，字号变大。
- 标题独占一行。
2.3.2 段落 <p> 和换行 <br /> 标签
p: paragraph
标签语义：将 HTML 文档划分成若干段落。
特点
- 段落中的文本或根据浏览器窗口大小自动换行。
- 段落之间有空隙。
br: break
标签语义：强制换行。
特点
<br />是一个单标签。<br />标签只是强制换行，间隔不变。
2.3.4 文本格式化标签
标签语义：突出重要性，比普通文字更重要
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong> 或 <b></b> |
推荐使用前者，标签加粗，语义更强烈 |
| 倾斜 | <em></em> 或 <i></i> |
推荐使用前者，标签加粗，语义更强烈 |
| 删除线 | <del></del> 或 <s></s> |
推荐使用前者，标签加粗，语义更强烈 |
| 下划线 | <ins></ins> 或 <u></u> |
推荐使用前者，标签加粗，语义更强烈 |
em: emphasized、del: deleted、ins: inserted
i: italic、s: strikethrough、u: underlined
2.3.5 <div> 和 <span> 标签
div: division
没有语义，是用来装内容的“盒子”。
特点
<div>标签一行只有一个<span>标签一行可以有多个
2.3.6 图像标签 <img>
img: image
| 属性 | 属性值 | 说明 |
|---|---|---|
src |
图片路径 | 必须属性 |
alt |
文本 | 替换文本，图像不能显示时的文字 |
title |
文本 | 提示文本，鼠标放在图像上时显示的文本 |
width |
像素 | 图像宽度 |
height |
像素 | 图像高度 |
border |
像素 | 图像边框粗细 |
src: source、alt: alter
注意点
- 图像标签可以有多个属性，必须写在标签名后。
- 属性之间不分先后顺序，标签名与属性，属性之间用空格个分隔。
- 属性采用键值对的格式，即
key = "value"的格式。
2.3.7 路径
相对路径：以引用文件所在位置为参考基础，而建立的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如 <img src="baidu.gif" /> |
|
| 下一级路径 | / | 图像文件位于HTML文件下一级，如 <img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级，如 <img src="../baidu.gif" /> |
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
如，"D:\VS_code\html学习\image1" 或完整网络路径 "https://baidu.com/logo.png"
2.3.8 超链接标签 <a>
a: anchor
<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的 url 地址，必须属性 |
| target | 指定链接页面的打开方式，_self 为默认值，当前页面打开，_blank 在新窗口打开 |
href: hypertext reference
链接分类
- 外部链接：如，
<a href="http://www.baidu.com" target="_blank">百度</a>。 - 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，如
<a href="index.html">首页</a>。 - 空链接：如，
<a href="#">关于</a>。 - 下载链接：如果
href里面的地址是一个文件或者压缩包，会下载该文件。 - 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：点击链接，可以快速定位页面的某个位置（空链接可跳转顶部）。
- 在链接文本的
href属性中，设置属性值为#id的格式，如，<a href="#two">第2集</a>。 - 找到目标位置标签，里面添加一个
id属性，如，<h3 id="two">第2集介绍<h3>。
- 在链接文本的
2.3.9 注释标签和特殊字符
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签 <!-- 注释语句 --> 。
特殊字符
在HTML页面中，一些特殊的符号很难或不方便直接使用，可以使用下面代码代替。
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 | |
|
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ¥ | 日币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
nbsp: no-break space、lt: less than、gt: great than、amp:ampersand、copy: copyright、reg: registration、deg: degree、plusmn: plus-minus sign、sup: superscripted
2.4 表格标签
表格主要用于展示数据，可读性好。
<table></table>用于定义表格的标签。<tr></tr>用于定义表格中的行，必须嵌套在<table></table>中。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>中。<th></th>定义表头单元格，一般位于表格的第一行或第一列，文本内容加粗居中显示。
<table>
<tr>
<th>表头</th>
...
</tr>
<tr>
<td>内容</td>
...
</tr>
...
</table>
tr: table row、td: table data、th: table head
2.4.1 表格属性和结构
<table> 标签中可以设置表格的属性。
| 属性 | 属性值 | 描述 |
|---|---|---|
align |
left、center、right |
规定表格相对周围元素的对齐方式 |
border |
1 或 "" |
规定表格是否有边框，默认 "" ，无边框 |
cellpadding |
像素 | 规定单元格边沿与其内容之间的空白，默认 \(1\) 像素 |
cellspacing |
像素 | 规定单元格之间的空白，默认 \(2\) 像素 |
width |
像素或百分比 | 规定表格宽度 |
为了更好的表示表格的语义，可以使用表格结构标签 <thead> 和 <tbody> ，将表格划分成头部和主体两大部分。
<thead></thead>用于定义表格的头部，内部必须有<th>标签。<tbody></tbody>用于定义表格的主体，主要放数据本体。- 都需要嵌套在
<table>标签中。
2.4.2 合并单元格
跨行合并：rowspan="合并单元格个数" ，写在最上侧所需合并的单元格中。
跨列合并：colspan="合并单元格个数" ，写在最左侧所需合并的单元格中。
2.5 列表标签
表格主要用来展示数据，列表则主要用于布局。
特点：整洁、有序。
2.5.1 无序列表
<ul> 标签表示页面中项目的无序列表，一般以项目符号呈现列表项，列表项用 <li> 定义。
<h3>音乐三巨头</h3>
<ul>
<li>许嵩</li>
<li>徐良</li>
<li>汪苏泷</li>
</ul>
ul: unordered list、li: list item
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>标签中只能嵌套<li></li>标签，<li></li>标签可以容纳任何元素。
2.5.2 有序列表
<ol> 标签用于定义有序列表，列表排序以数字显示，列表项用 <li> 定义，与无序列表类似。
ol: ordered list
2.5.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述，列表项前没有任何项目符号。
<dl> 标签用于定义描述列表（定义列表），<dt> 定义术语，<dd> 定义描述。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
dl: definition list、dt: definition term、dd: definition description
<dl></dl>标签中只能包含<dt>和<dd>标签。<dt>和<dd>个数没有限制，通常是一个<dt>对应多个<dd>。
2.6 表单标签
收集用户信息，通常由 表单域、表单控件（也称表单元素） 和 提示信息 \(3\) 部分构成。
2.6.1 表单域
表单域是一个包含表单元素的区域。用 <form> 标签定义表单域.
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单控件
</from>
| 属性 | 属性值 | 作用 |
|---|---|---|
action |
url 地址 |
指定接收并处理表单数据的服务器程序的 url 地址 |
method |
get/post |
设置表单数据的提交方式 |
name |
名称 | 指定表单的名称，以区分同一页面中的多个表单域 |
2.6.2 <input> 表单元素
用于收集用户信息。
<input type="属性值" />
| 属性值 | 描述 |
|---|---|
button |
可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
checkbox |
复选框 |
file |
输入字段和“浏览”按钮，供文件上传 |
hidden |
隐藏的输入字段 |
image |
图像形式的提交按钮 |
password |
密码字段，该字段中的字符被掩码 |
radio |
单选按钮 |
reset |
重置按钮，清除表单中所有数据 |
submit |
提交按钮，把表单中数据发送到服务器 |
text |
单行的输入字段，默认 \(20\) 个字符 |
<input> 标签的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
name |
用户自定义 | 定义 <input> 元素的名称 |
value |
用户自定义 | 规定 <input> 元素的值 |
checked |
checked |
规定此 <input> 元素首次加载时应当被选中 |
maxlength |
正整数 | 规定输入字段中字符的最大长度 |
name和value是每个表单元素都有的属性值，主要给后台人员使用。name表单元素的名字，要求 单选框 和 复选框 要有 相同的name值 。
2.6.3 <label> 标签
为 <input> 元素定义标注（标签）。用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
<label for="sex"> 男 </label>
<input type="radio" name="sex" value="男" id="sex">
<!-- 核心：<label> 标签的 for 属性应当与相关元素的 id 属性相同。 -->
2.6.4 <select> 表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间，便可使用 <select> 标签控件定义 下拉列表 。
<select>
<option>选项一</option>
<option>选项二</option>
...
</select>
<select>中至少包含一对<option>。- 在
<option>中定义selected="selected"时，当前项即为默认选中项。
2.6.5 <textarea> 表单元素
用于定义多行文本输入的控件，在用户输入内容较多时使用。
<textarea row="3" cols="20">输入文本内容</textarea>
浙公网安备 33010602011771号