爱站程序员基地文章目录
- 一、前言与介绍
- 二、HTML
- 1. 标签
- 1.1 基本结构与分析
- 2.1 结构标签
- 2.2 文本格式化标签
- 2.3 图片标签
- 2.4 超链接标签
- 2.5 容器标签
- 2.6 功能标签
- 3.1 基本结构标签
- 3.2 表格的属性
- 3.3 合并单元格
- 4.1 无序列表
- 4.2 有序列表
- 4.3 自定义列表
- 5.1 表单域标签
- 5.2 表单控件（元素）标签
- 5.2.1 输入控件标签（重点）
- 5.2.2 下拉控件标签
- 5.2.3 文本域标签
- 5.2.4 Label标签
一、前言与介绍
- HTML（HyperText Markup Language）—— 超文本标记语言，是用于创建网页的标准标记语言，用于描述网页的内容。学习HTML，重点就是学习标签。
- CSS（Cascading Style Sheets）—— 层叠样式表，用于美化网页和布局内容位置。CSS通过改变属性，来控制浏览器对于内容的渲染。
- 学习思路：一个标签由内容和样式组成，内容可以包括其他标签，样式包括标签的位置和外观。先了解各个标签的语义或功能，再学习如何控制他们的样式。其中，由于常见的标签较少，因此学习起来较为简单，对于其他标签，如果有需要，到时候再学习即可。对样式的学习，就相对难度较高，但同样也可以按前者的思路学习。
二、HTML
1. 标签
标签由关键字、属性和包含他们的尖括号组成，按照是否成对可以分为：双标签 和 单标签，绝大部分标签都是双标签。
- 双标签：
<tag></tag>
单标签：
<tag />
- 属性的写法：
<tag attribute=value attribute=value ><tag />
标签是组成
.html
文件的基本结构，也称为元素。一个
.html
文件有如下基本结构，所示为
Vs Code
默认生成。
1.1 基本结构与分析
<!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>
-
文档类型**声明标签
<!DOCTYPE>
声明网页的HTML的版本——该网页的版本为 **HTML5
- 事实上，文档类型声明标签不是html标签，而只是声明标签。
-
文档标签
<html></html>
这个标签告诉浏览器这是个HTML文档，同时，这个标签是文档的最外层元素，是所有其他元素的容器。
-
语言定义属性
<html lang=\"en\">
定义当前文档的显示语言，但是只是作为对浏览器的提示，不影响语言的显示，例如谷歌浏览器默认翻译英语网页，就是检测该属性。
en
——English——英语网页
-
zh-CN
——Chinese——中文网页
-
元数据标签
<meta>
这个标签提供文档的元数据，虽然这些数据不会展示，但是会被浏览器解析，它通常用于：指定网站的描述、关键词、修改时间、作者等，可以说明如何显示内容或重新加载、指引搜索引擎、Web服务调用，这些在后续会学习。
-
字符集（charset）声明属性
<meta charset=\"UTF-8\">
-
标题标签
<title></title>
其中的内容指定文档的标题，并在浏览器的标签页上展示出来。
-
头部标签
<head></head>
头部标签用于包含标题、脚本、样式、元数据等标签，是所有头部元素的容器。
-
主体标签
<body></body>
主体标签定义文档的主体，是包含文档的内容的容器。
2. 基本标签
2.1 结构标签
| 结构 | 标签 | 备注 |
|---|---|---|
| 标题 |
<hx></hx> ， x 为整数1~6，标题层级递减。 |
标题内的文字会默认按照等级设定字体大小并加粗。 |
| 段落 |
<p></p> |
段落标签之间的距离较文本行间距较大。 |
2.2 文本格式化标签
| 格式 | 标签 | 备注 |
|---|---|---|
| 加粗 |
<strong></strong> <b></b> |
|
| 倾斜 |
<em></em> <i></i> |
|
| 删除线 |
<del></del> <s></s> |
|
| 下划线 |
<ins></ins> <u></u> |
注：对文本的样式设置，实际上常使用CSS控制，而文本格式化标签则很少使用。
2.3 图片标签
<img />
图片标签中常设置的属性（前三个经常在标签中设置，后三个在CSS中设置）
| 属性 | 使用 | 备注 |
|---|---|---|
| 路径 |
src=\'url\' |
路径可以是相对路径（
\\ ）和绝对路径（ \'/\' )（盘符或者网络地址） |
| 文本替换 |
alt=\"text\" |
当图片无法显示时，用该文本替换。 |
| 图像标题 |
title=\"text |
当鼠标在该图片上时，会提示的文本。 |
| 宽度 |
width=\"\" |
单位是像素，一般只用修改一个，另外一个默认等比例缩放。 |
| 高度 |
height=\"\" |
单位是像素，一般只用修改一个，另外一个默认等比例缩放。 |
| 边框粗细 |
border=\"\" |
单位是像素，一般通过CSS来修改。 |
2.4 超链接标签
<a></a>
（锚anchor）
| 属性 | 使用 | 备注 |
|---|---|---|
| 跳转目标 |
href=\'url\' |
|
| 目标窗口弹出方式 |
target=\"\" |
_self 在当前窗口打开 _blank 在新窗口打开 |
按照跳转目标的不同对链接进行分类：
| 类型 | 描述 | 备注 |
|---|---|---|
| 外部链接、内部链接 | 链接到一个网页 | |
| 空链接 |
href=\"#\" |
待定链接 |
| 下载链接 | 地址指向一个文件或者压缩包 | |
| 网页元素链接 | 与网页元素绑定的链接 | |
| 锚点链接 | 页面内部特定位置的链接（参考百科的目录） | 写法
<a href=\"#id_name\"> text </a> 在目标标签中添加属性 id=id_name |
2.5 容器标签
容器标签没有明确的语义（结构或功能等），只作为一个容器。
| 标签 | 备注 |
|---|---|
<div></div> |
默认独占一行（块级元素） |
<span></span> |
默认可以并排（行内元素） |
注：块级元素、行内元素的概念会在 显示模式 的版块提到。
2.6 功能标签
| 功能 | 标签 | 备注 |
|---|---|---|
| 强制换行 |
<br/> |
使不限于文本的内容在下一行显示 |
| 水平线 |
<hr> |
3. 表格标签
表格标签用于展示数据，而不是布置页面
3.1 基本结构标签
<table><thead><tr> <th> ... </th> </tr></thead><tbody><tr> <td> content </td> ... <td> content </td></tr>...</tbody></table>
| 结构 | 标签 | 备注 |
|---|---|---|
| 表格 |
<table></table> |
标识表格 |
| 表格头部 |
<thead></thead> |
分隔表格，使语义明显，可以省略 |
| 表格身体 |
<tbody></tbody> |
分隔表格，使语义明显，可以省略 |
| 表格行 |
<tr></tr> |
必要标签，用于包含表格的内容标签 |
| 内容 | 标签 | 备注 |
|---|---|---|
| 表头单元格 |
<th></th> |
文字默认加粗、居中显示 |
| 数据单元格 |
<td></td> |
用于展示表格数据 |
注意：表格每行单元格的数目相同，若有合并，则该合并的单元格视为两个或多个。
3.2 表格的属性
表格的属性一般通过CSS来控制
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 元素的对齐方式 对表格，为表格在界面的位置 对行，为行内元素相对于单元格的位置 对单元格，为该单元格内的元素相对于单元格的位置 |
| border | 1 （有）或 “”（无） | 表格 是否 有边框，默认无 |
| cellpadding | 像素值 | 表格的单元格边沿与其内容之间的空白，默认1px |
| cellspacing | 像素值 | 表格单元格之间的空白，默认2px，当其为1px时，为黑线 |
| width，height | 像素值或百分比 | 表格的宽度、高度 行的宽度与高度 单元格的宽度与高度 注意，会自动矫正 |
3.3 合并单元格
单元格属性
| 属性 | 属性值 | 描述 |
|---|---|---|
rowspan=\"\" |
跨越格数 | 跨行合并，向下 |
colspan=\"\" |
跨越格数 | 跨列合并，向右 |
注意：需要删除多余的单元格。
4. 列表标签
列表标签由于其整齐、整洁、有序的特点，常用于网页的布局。
列表可以分为：无序列表、有序列表、自定义列表
4.1 无序列表
<ul><li> content </li>...<li> content </li></ul>
| 结构 | 标签 | 备注 |
|---|---|---|
| 无序列表标签 |
<ul></ul> |
标识无序列表，该标签内只能有 列表项标签 |
| 列表项标签 |
<li></li> |
此标签相当于一个容器，可以放置其他标签。 |
备注：无序标签默认在列表项前，添加小黑点，可通过样式改变。
4.2 有序列表
<ol><li> content </li>...<li> content </li></ol>
| 结构 | 标签 | 备注 |
|---|---|---|
| 有序列表标签 |
<ol></ol> |
标识有序列表，该标签内只能有 列表项标签 |
| 列表项标签 |
<li></li> |
此标签相当于一个容器，可以放置其他标签。 |
备注：有序标签默认在列表项前，添加序号，可通过样式改变。
4.3 自定义列表
<dl><dt> content_Head_1 </dt><dd> content </dd>...<dd> content </dd><dt> content_Head_2 </dt><dd> content </dd>...<dd> content </dd></dl>
| 结构 | 标签 | 备注 |
|---|---|---|
| 自定义列表标签 |
<dl></dl> |
标识自定义列表，该标签内只能有 子标题和子内容标签 |
| 子标题标签 |
<dt></dt> |
子标题并列对应多个子内容标签 |
| 子内容标签 |
<dd></dd> |
5. 表单标签
表单通常由 表单域、表单控件（元素）、提示信息组成，其目的是与用户进行交互，获得用户信息。
5.1 表单域标签
标识表单，包含表单控件，实现对信息的收集和传递
<form action=\"url\" menthod=\"method\" name=\"name\">element</form>
| 属性 | 属性值 | 描述 |
|---|---|---|
action=\"url\" |
url | 接收表单的地址 |
method=\"\" |
GET / POST | 表单数据的提交方式 |
name |
text | 指定表单域的名称 |
5.2 表单控件（元素）标签
5.2.1 输入控件标签（重点）
<input type=value />
该标签又根据类型属性值的不同，又可以分为多种输入控件。
| 通用属性 | 属性值 | 描述 |
|---|---|---|
name=\"\" |
文本 | 该输入控件的名称 |
value=\"\" |
该输入控件的值 | |
checked=\"\" |
checked | 规定首次加载该控件时被选中，主要对于选择按钮 |
maxlength=\"\" |
正整数 | 规定输入字段的最大长度 |
| 属性值 | 控件 | 描述 |
|---|---|---|
| text | 单行输入文本 | 默认宽度 20个字符
value 作为初次加载时提前输入内容 |
| password | 单行输入密码 | 自动用字符隐藏输入内容 |
| button | 可点击的按钮 | 常用于启动脚本
value 对于按键类，其值直接显示在按键上。 |
| image | 图片提交按钮 | |
| file | 文件提交按钮 | |
| radio | 单选按钮 | 拥有同一个
name 值的单选按钮，视为一组 value 作为选中后，传递值。 |
| checkbox | 复选按钮 | 拥有同一个
name 值的复选按钮，视为一组 value 作为选中后，传递值。 |
| reset | 重置按钮 | |
| submit | 提交按钮 | 提交表单域内的数据。 |
| hidden | 隐藏输入字段按钮 |
5.2.2 下拉控件标签
<select></select>
<select><option> content_1 </option>...<option> content_n </option></select>
- 默认显示第一个选项，
selected=\"selected\"
添加选项默认属性。
5.2.3 文本域标签
<textarea></textarea>
用于多行文本输入，常见于留言板、评论等。
<textarea>default content</textarea>
| 属性 | 属性值 | 描述 |
|---|---|---|
cols=\"\" |
每行的字符数 | |
rows=\"\" |
显示的行数 |
5.2.4 Label标签
<lable></lable>
Label标签不是表单控件，但是经常在表单中使用。
Label标签用于绑定表单控件，当点击该标签的内容时，浏览器自动将焦点转动或者选择对应的表单元素上。
<label for=\"text\" > UserName </label><input type=\"text\" value=\"Please input\" maxlength=\"11\" id=\"text\"/>
-
for
与控件的
id
的属性值对应。
