html基础
前言
html 是一种描述网页的语言，是一种超文本标记语言，是一套标记标签，标签是被尖括号包围的关键字
html 需要有 DOCTYPE 的声明，是文档类型的缩写，声明位于文档最前面
1 |
html标签
定义 html 文档，这个元素是一种声明文档为 html ，而且其他的元素必须包含在内，限定文档的开始和结束
head标签
用于定义文档的头部，文档的头部描述了文档的各种属性和信息，包括文档的标题，在 web 中的位置以及其他和文档的关系等。大部分内容都不会被看到
body标签
定义文档的主体，元素包含文档的所有内容，比如文本，图像等，会在页面中直接显示
title标签
可以定义文档的标题，显示在浏览器窗口的标题栏或者状态栏上，是在 head 标签中必须要包含的标签， title 标签有利于 SEO 优化
meta标签
用来描述一个网页文档的属性，关键词等
标题标签
标题是通过 <h1>~<h6> 标签进行定义的，其中 <h1> 定义最大的标题， <h6> 定义最小的标题
其中生成标题的快捷键 h$*1 ~ h$*6
在标签中添加属性 align="left|center|right" 默认为居左
段落标签
段落是通过 <p> 标签定义的
标签中使用 <br> 进行换行，单标签
水平线
水平线通过 <hr> 标签创建的，单标签
属性
color颜色width长度size高度align对齐方式left|center|right默认为center
图片标签
图片使用 <img> 标签定义，单标签
属性
src图片路径alt图像的替代文本，也就是图像不能正常显示时所显示的文字title鼠标悬停在图像上时显示的提示width规定图像的宽度height规定图像的高度
超文本链接标签
使用 <a> 来设置超文本链接，超链接可以时一个字，一个词，也可以是一幅图，可以点击跳转到新的文档或者是当前文档的某一部分，可以在 <a> 标签的内部添加标题或者是图片来进行跳转
属性
href用来描述链接的地址，一般来说，链接将以以下形式出现在浏览器中- 未访问过的：蓝色字体带下划线
- 访问过的，紫色字体带下划线
- 点击时，链接显示为红色带下划线
target用来表示链接打开时的表现_parent在本页面打开_blank在新页面打开_self在本页面打开_top在本页面打开
文本标签
| 标签 | 描述 |
|---|---|
<em> |
定义着重文字 |
<b> |
定义粗体 |
<i> |
斜体 |
<strong> |
加重语气 |
<del> |
删除字 |
<span> |
元素没有特定含义 |
有序列表
是一列项目，列表项目使用数字进行标记，有序列表用 <ol> 表示，其中的每个元素用 <li> 表示，列表是可以嵌套的。无序列表可以嵌套。生成的快捷键 ol>li*n 这里的 n 表示生成几个元素
属性
type属性，表示列表的显示类型1表示列表用数字标号a表示列表用小写字母标号A表示列表用大写字母标号i表示列表用小写罗马数字标号I表示列表用大写罗马数字标号
无序列表
无序列表是一个项目的列表，项目使用醋圆点标记，用 <ul> 表示，其中每个元素用 <li> 表示，无序列表可以嵌套。生成的快捷键 ul>li*n 这里的 n 表示生成几个元素
属性
type表示列表的显示类型disc默认实心圆circle空心圆square小方块none不显示
定义列表
使用 <dl> 属性表示定义列表，自定义列表不仅仅是一列项目，而是项目及其注释的组合，自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
表格标签
表格用来展示数据非常方便简单，使用 <table> 标签表示，快捷生成 table>tr*m>td*n{content} 表示生成 m * n 的表格
组成
- 行
<tr> - 列
<td> - 单元格
属性
border单个表格的边框width单个表格宽度height单个表格高度
单元格合并
colspan水平合并 保留左边，删除右边rowspan垂直合并 保留上边，删除下边
表单属性
在 web 网页中用来给用户填写信息，从而采集用户信息，是一个输入框，一个表单是由容器和控件组成的，一般应该包含用户填写信息的输入框，提交按钮，表单就是容器，能容纳各种各样的控件
属性
action是服务器地址name表单名称method中get或post申请，是数据提交方式，get提交的数据可以被url看到，但是post不能，一般get提交少数据，post提交大数据
表单元素
- 表单标签
- 表单域
<input type="text"> - 表单按钮
<input type="submit">点击之后表单的内容会传递到另一个文件，表单的动作属性定义了目的文件的文件名 - 密码
<input type="password">
块元素与内联元素
在 HTML5 中。元素的分类为
- 元数据型
- 区块型
- 标题型
- 文档流型
- 语句型
- 内嵌型
- 交互型
元素不属于任何一种类型，被称为穿透的，元素属于不止一个类别，被称为混合的。上述的分类太细了，所以这里只说明块级元素与内联元素的区别
| 块级元素 | 内联元素 |
|---|---|
| 块元素会在页面中单独占据一行 | 行内元素不会占据一行，只占自身大小 |
| 可以设置 width 和 height 属性 | 设置 width 与 height 元素无效 |
| 一般块级元素可以包含行内元素与其它块级元素 | 一般内联元素包含内联元素，但不包含块级元素 |
块级元素
<div><form><h1>~<h6><hr><p><table><ul>
内联元素
<a><b><em><i><span><strong>
行内块级元素
<button><img><input>
容器div标签
使用 <div> 表示，内部有 id 属性，用于定义 div 的类型
header表示为头nav表示导航栏article文章section章节属于article的子元素silder侧边栏footer脚部
替代div的一些标签
<header>头部<nav>导航<section>定义文档中的节，比如章节，页眉页脚等<aside>侧边栏<footer>脚部<article>代表一个独立的完整的相关内容块
iframe标签
框架标签，可以使得再同一个浏览器窗口中显示不止一个页面，也就是网页嵌套
1 | <iframe src="./image.html" width="500px" height="500px" frameborder="0" name="iframe_a"></iframe> |
src就是显示的另一个网页width和height显示页面的大小frameborder边框的线宽
字符实体
在 html 中，某些字符是预留的，不能使用，所以必须在源码中使用字符实体来使用该标签，可以直接使用实体名称，也可以使用实体编号，但是有些浏览器对实体名称支持不很好
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| “ | 引号 | " |
" |
| ‘ | 撇号 | ' (IE不支持) |
' |
| ￠ | 分 | ¢ |
¢ |
| £ | 镑 | £ |
£ |
| ¥ | 人民币/日元 | ¥ |
¥ |
| € | 欧元 | € |
€ |
| § | 小节 | § |
§ |
| © | 版权 | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
结合音标符
类似于上述的字符实体，这个是加到字母上的一个字形，变音符号可以出现在字母的上面和下面，或者字母里和字母之间，可以与字母，数字字符组合使用
| 音标符 | 字符 | 代码 | 输出结果 |
|---|---|---|---|
| ̀ | a | à |
à |
| ́ | a | á |
á |
| ̂ | a | â |
â |
| ̃ | a | ã |
ã |
| ̀ | O | Ò |
Ò |
| ́ | O | Ó |
Ó |
| ̂ | O | Ô |
Ô |
| ̃ | O | Õ |
Õ |
canvas元素
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
| 标签 | 描述 |
|---|---|
<audio> |
定义音频内容 |
<video> |
定义视频（video 或者 movie） |
<source> |
定义多媒体资源 video 和 audio |
<embde> |
定义嵌入的内容，比如插件。 |
<track> |
为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。 |
新表单元素
| 标签 | 描述 |
|---|---|
<datalist> |
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
<keygen> |
规定用于表单的密钥对生成器字段。 |
<output> |
定义不同类型的输出，比如脚本的输出。 |
新语义和结构元素
| 标签 | 描述 |
|---|---|
<article> |
定义页面独立的内容区域。 |
<aside> |
定义页面的侧边栏内容。 |
<bdi> |
允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> |
定义命令按钮，比如单选按钮、复选框或按钮 |
<details> |
用于描述文档或文档某个部分的细节 |
<dialog> |
定义对话框，比如提示框 |
<summary> |
标签包含 details 元素的标题 |
<figure> |
规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> |
定义 figure 元素的标题 |
<footer> |
定义 section 或 document 的页脚。 |
<header> |
定义了文档的头部区域 |
<mark> |
定义带有记号的文本。 |
<meter> |
定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> |
定义导航链接的部分。 |
<progress> |
定义任何类型的任务的进度。 |
<ruby> |
定义 ruby 注释（中文注音或字符）。 |
<rt> |
定义字符（中文注音或字符）的解释或发音。 |
<rp> |
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> |
定义文档中的节（section、区段）。 |
<time> |
定义日期或时间。 |
<wbr> |
规定在文本中的何处适合添加换行符。 |
