HTML基础知识巩固你的基础

红太狼 2021-08-27 12:24 526阅读 0赞

## HTML基础知识 ##

1.  HTML的历史：HTML，XHTML
2.  HTML的全局属性：全局标准属性，全局事件属性
3.  HTML的元素：

![a.png][]![QQ_E6_88_AA_E5_9B_BE20200324232345.png][]

1.  标记语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。
2.  HTML，为超文本标记语言。
3.  `XHTML`是可扩展超文本标记语言，是一种更纯洁，更严格，更规范的 `html`代码。
4.  `html`文件由文件头和文件体两部分组成。
5.  标签的分类：双标签，单标签。

> 双标签：由“开始标签”和“结束标签”两部分构成，必须成对使用，且必须合理嵌套。

> 单标签：在开始标签中进行关闭（以开始标签的结束而结束）。

### HTML的全局标准属性 ###

在`HTML`中，规定了8个全局标准属性。

1.  `class`用于定义元素的类名。
2.  `id`用于指定元素的唯一 `id`。
3.  `style`用于指定元素的行内样式。
4.  `title`用于指定元素的额外信息。
5.  `accesskey`用于指定激活某个元素的快捷键。

> 支持`accesskey`属性的元素有`<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>`。

1.  `tabindex`用于指定元素在 `tab`键下的次序。

> 支持`tabindex`属性的元素有`<a>,<area>,<button>,<input>,<object>,<select>,<textarea>`

1.  `dir`用于指定元素中内容的文本方向。

> `dir`的属性值只有`ltr`和`rtl`两种，分别是`left to right`和`right to left`。

1.  `lang`用于指定元素内容的语言。

### HTML的全局事件属性 ###

#### `Window`窗口事件 ####

1.  `onload`，在页面加载结束后触发。
2.  `onunload`，在用户从页面离开时触发，如单击跳转，页面重载，关闭浏览器窗口等。

#### `Form`表单事件 ####

1.  `onblur`，当元素失去焦点时触发。
2.  `onchange`，在元素的元素值被改变时触发。
3.  `onfocus`，在元素获得焦点时触发。
4.  `onreset`，当表单中的重载按钮被点击时触发。
5.  `onselect`，在元素中文本被选中后触发。
6.  `onsubmit`，在提交表单时触发。

#### `Keyboard`键盘事件 ####

1.  `onkeydown`，在用户按下按键时触发。
2.  `onkeypress`，在用户按下按键后，按着按键时触发。

> 该属性不会对所有按键生效，不生效按键如：`alt`，`ctrl`，`shift`，`esc`。

1.  `onkeyup`，当用户释放按键时触发。

#### `Mouse`鼠标事件 ####

1.  `onclick`，当在元素上单击鼠标时触发。
2.  `onblclick`，当在元素上双击鼠标时触发。
3.  `onmousedown`，当在元素上按下鼠标按钮时触发。
4.  `onmousemove`，当鼠标指针移动到元素上时触发。
5.  `onmouseout`，当鼠标指针移出元素时触发。
6.  `onmouseover`，当鼠标指针移动到元素上时触发。
7.  `onmouseup`，当在元素上释放鼠标按钮时触发。

#### Media媒体事件 ####

1.  `onabort`，当退出媒体播放器时触发。
2.  `onwaiting`，当媒体已停止播放但打算继续播放时触发。

### HTML元素 ###

![QQ_E6_88_AA_E5_9B_BE20200325222608.png][]

> 一个HTML文档包含的标签

1.  `<!DOCTYPE>`，声明文档类型。
2.  `<html>`，HTML元素真正的根元素。
3.  `<head>`，定义 `html`文档的文档头。

head中包含的元素
    
    title，定义HTML文档的标题
    base，为页面上的所有链接规定默认地址或者默认目标
    link，用于定义文档与外部资源之间的关系
    meta，提供关于HTML的元数据
    style，用于为HTML文档定义样式信息
    script，用于定义客户端脚本

1.  `body`，定义 `html`文档的文档体。
2.  `content-Type`，用于设定网页的字符集，便于浏览器解析与渲染页面。

代码：

1.  `cache-control`，用于告诉浏览器如何缓存某个响应及缓存多长时间。

参数：

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存
    
    no-store，允许缓存，每次都要去服务器上下载完整的响应
    
    public，缓存所有响应
    
    private，只为单个用户缓存
    
    max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒
    
    <meta http-equiv=cache-control" content="no-cache">

1.  `expires`，用于设定网页的到期时间，过期后重新到服务器上重新传输。
2.  `refresh`，网页将在设定的时间内，自动刷新并转向设定的网址
3.  `Set-Cookie`，用于设置网页过期。
4.  无语义元素： `<span>,<div>`， `<span>`是内联标签，用在一行文本中， `<div>`是块级标签。

> DIV+CSS

`div`用于存放需要显示的数据，`css`用于指定如何显示数据样式，做到结构与样式相互分离。

查看div+css样式HTML:点击下方链接跳转，可查看源码：

div-css.html

#### 格式化元素 ####

1.  普通文本

*  `<b>`，定义粗体文本
 *  `<big>`，定义大号字
 *  `<em>`，定义着重文字
 *  `<i>`，定义斜体字
 *  `<small>`，定义小号字
 *  `<strong>`，定义加重语气
 *  `<sub>`，定义下标字
 *  `<sup>`，定义上标字
 *  `<ins>`，定义插入字
 *  `<del>`，定义删除字

1.  计算机输出

*  `<code>`，定义计算机代码
 *  `<kbd>`，定义键盘输出样式
 *  `<samp>`，定义计算机代码样本
 *  `<tt>`，定义打字机输入样式
 *  `<pre>`，定义预格式文本

1.  术语

*  `<abbr>`，定义缩写
 *  `<acronym>`，定义首字母缩写
 *  `<address>`，定义地址
 *  `<bdo>`，定义文字方向
 *  `<blockquote>`定义长的引用
 *  `<q>`，定义短的引用语
 *  `<cite>`，定义引用，引证
 *  `<dfn>`，定义一个概念，项目

#### 图片元素 ####

#### 超链接元素 ####

1.  `<a>`标签的 `target`属性，默认值为 `_self`。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>_self</code></td> 
   <td>在超链接所在框架或窗口中打开目标页面</td> 
  </tr> 
  <tr> 
   <td><code>_blank</code></td> 
   <td>在新浏览器窗口中打开目标页面</td> 
  </tr> 
  <tr> 
   <td><code>_parent</code></td> 
   <td>将目标页面载入含有该链接框架的父框架集或父窗口中</td> 
  </tr> 
  <tr> 
   <td><code>_top</code></td> 
   <td>在当前的整个浏览器窗口中打开目标页面，因此会删除所有框架</td> 
  </tr> 
 </tbody> 
</table>

1.  文本链接是 `<a></a>`标签之间的元素内容为文本内容。
2.  锚点链接是用 `#+对应的锚点`，锚点通常用唯一属性值 `id`设定。

#### 图像热区链接 ####

图像热区链接，是什么呢？当你在看一些购物网页的时候，一张图片上，可以在不同的地方链接到不同的目标位置，点击不同的地方可以跳转到不同的网页，这也是做商城项目一般要用到的技术。

这个时候不是`<a>`标签元素了，而是`<area>`元素。

`<area>`元素的属性有两个`shape`，`cords`属性。

<table> 
 <thead> 
  <tr> 
   <th><code>shape</code> 属性</th> 
   <th>说明</th> 
   <th><code>cords</code> 属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>circle</code></td> 
   <td>圆形</td> 
   <td>x,y,r</td> 
   <td>(x,y)为圆心坐标，r为半径</td> 
  </tr> 
  <tr> 
   <td><code>rect</code></td> 
   <td>矩形</td> 
   <td>x1,y1; x2,y2</td> 
   <td>(x1,y1)为左上角坐标，(x2,y2)为右下角坐标</td> 
  </tr> 
  <tr> 
   <td><code>poly</code></td> 
   <td>多边形</td> 
   <td>x1,y1;x2,y2;x3,y3;...</td> 
   <td>分别是各个点的点坐标</td> 
  </tr> 
 </tbody> 
</table>

`<area>`的坐标系，原点为图片的左上角,x轴正方向向右，y轴正方向向下

我画个图哈，反映`<area>`的坐标系：

![QQ_E6_88_AA_E5_9B_BE20200325235454.png][]

图像热区链接的使用，`<map>`标签定义一个`image-map`，可以含一个以上的热区`<area>`，每个热区都有独立的链接。

要为`<map>`标签赋予`name`属性。

将`<img>`标签的`usemap`属性与`<map>`标签的`name`属性相关联。

为了证明我学会了，我写一个html页面。

map -> name="image_link"
    
    img -> usemap="#image_link"

点击跳转：imgmap.html

#### e-mail链接 ####

e-mail链接主要是看到有很多官方网页需要做的一个打开一封新的电子邮件。

点击下方链接即可看到效果：

[联系我们][Link 1]

代码：

#### javascript链接 ####

点击JavaScript链接：

点击弹窗

代码：

#### 空链接 ####

1.  空链接是指未指派目标地址的超链接。

空链接的代码：

javascript: void(0)
    
    <a href=""></a>
    
    <a href="#"></a>
    
    <a href="javascript:void(0)"></a>

#### 列表元素 ####

整合列表html网页，点击跳转：ul-ol.html

1.  无序列表， `<ul>`定义无序列表， `<li>`定义列表项。

`<ul>`的`type`属性值：`disc`点，`square`方块，`circle`圆，`none`无.

1.  有序列表， `<ol>`定义有序列表， `<li>`定义列表项。

`<ol>`的`type`属性值：数字，大写字母，大写罗马数字，小写字母，小写罗马数字。

`start`属性定义序号的开始位置。

1.  定义列表 `<dl>`，定义列表内部可以有多个列表项标题，每个列表项标题用 `<dt>`标签定义，列表项标题内部又可以有多个列表项描述，用 `<dd>`标签定义。

#### 表格 ####

整合表格html网页，点击跳转：table.html

1.  `<table>`定义表格
2.  `<caption>`定义表格标题
3.  `<tr>`定义若干行
4.  `<td>`定义若干单元格
5.  `<th>`定义表头
6.  表格分头部，主体，底部： `<thead>,<tbody>,<tfoot>`三个标签。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>border</code></td> 
   <td>设置表格的边框宽度</td> 
  </tr> 
  <tr> 
   <td><code>width</code></td> 
   <td>设置表格的宽</td> 
  </tr> 
  <tr> 
   <td><code>height</code></td> 
   <td>设置表格的高</td> 
  </tr> 
  <tr> 
   <td><code>cellpadding</code></td> 
   <td>设置内边距</td> 
  </tr> 
  <tr> 
   <td><code>cellspacing</code></td> 
   <td>设置外边距</td> 
  </tr> 
 </tbody> 
</table>

1.  `<td>`的两个属性： `colspan`用于定义单元格跨行， `rowspan`用于定义单元格跨列
2.  `<tbody>,<thead>,<tfoot>`标签通常用于对表格内容进行分组。
3.  表单由 `<form>`标签定义， `action`属性定义了表单提交的地址， `method`属性定义表单提交的方式。

代码：

<select>
    
    <option>
    
    size属性用来设置选择栏的高度，multiple属性用来决定是多选列表，还是单选
    
    selected="selected"

> 表单控件，用于输入更多的文本

`<textarea>`元素

`<textarea>`标签具有`name,cols,rows`3个属性。

1.  `name`用于提交参数
2.  `value`用于输入文本内容
3.  `cols`和 `rows`分别用于文本框的列数和行数，宽度和高度。

效果：

自我评价：

代码：

#### frameset ####

1.  `<frameset>`定义一个框架集，用于组织多个窗口，每个框架存有独立的html文档
2.  `<frameset>`不能与 `<body>`共同使用，除非有 `<noframe>`元素
3.  `<frame>`用于定义 `<frameset>`中一个特定的窗口。空元素 `<frame/>`

> `frame`属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>src</code></td> 
   <td>需要显示的<code>html</code>文档</td> 
  </tr> 
  <tr> 
   <td><code>frameborder</code></td> 
   <td>定义框架的外边框，属性值为0或者1</td> 
  </tr> 
  <tr> 
   <td><code>scrolling</code></td> 
   <td>定义是否显示滚动条,有3个值：yes,no,auto</td> 
  </tr> 
  <tr> 
   <td><code>noresize="noresize"</code></td> 
   <td>定义该框架无法调整大小，默认是可以调整的</td> 
  </tr> 
  <tr> 
   <td><code>marginheight</code>和<code>marginwidth</code>属性</td> 
   <td>定义上下左右的边距</td> 
  </tr> 
 </tbody> 
</table>

1.  `<noframe>`，用于为那些不支持框架集的浏览器显示文本
2.  `<iframe>`，与 `<frame>`元素相同， `iframe`有 `frame`的属性，还加了 `height`和 `width`

代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
            <title>frameset</title>
    	</head>
        <frameset cols="25%,50%,25%">
            <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
            <frame src="https://juejin.im/user/5e477d7ce51d4526c550a27d" ></frame>
            <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
        </frameset>
        <noframes>
            <body>您的浏览器无法处理框架，请更换浏览器打开</body>
        </noframes>
    </html>

#### 预留字符 ####

HTML 中的预留字符必须被替换为字符实体。

<table> 
 <thead> 
  <tr> 
   <th>显示结果</th> 
   <th>描述</th> 
   <th>实体名称</th> 
   <th>实体编号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>空格</td> 
   <td><code>&amp;nbsp;</code></td> 
   <td><code>&amp;#160;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于号</td> 
   <td><code>&amp;lt;</code></td> 
   <td><code>&amp;#60;</code></td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td><code>&amp;gt;</code></td> 
   <td><code>&amp;#62;</code></td> 
  </tr> 
  <tr> 
   <td>&amp;</td> 
   <td>和号</td> 
   <td><code>&amp;amp;</code></td> 
   <td><code>&amp;#38;</code></td> 
  </tr> 
  <tr> 
   <td>"</td> 
   <td>引号</td> 
   <td><code>&amp;quot;</code></td> 
   <td><code>&amp;#34;</code></td> 
  </tr> 
  <tr> 
   <td>'</td> 
   <td>撇号</td> 
   <td><code>&amp;apos;</code> (IE不支持)</td> 
   <td><code>&amp;#39;</code></td> 
  </tr> 
  <tr> 
   <td>￠</td> 
   <td>分（cent）</td> 
   <td><code>&amp;cent;</code></td> 
   <td><code>&amp;#162;</code></td> 
  </tr> 
  <tr> 
   <td>£</td> 
   <td>镑（pound）</td> 
   <td><code>&amp;pound;</code></td> 
   <td><code>&amp;#163;</code></td> 
  </tr> 
  <tr> 
   <td>¥</td> 
   <td>元（yen）</td> 
   <td><code>&amp;yen;</code></td> 
   <td><code>&amp;#165;</code></td> 
  </tr> 
  <tr> 
   <td>€</td> 
   <td>欧元（euro）</td> 
   <td><code>&amp;euro;</code></td> 
   <td><code>&amp;#8364;</code></td> 
  </tr> 
  <tr> 
   <td>§</td> 
   <td>小节</td> 
   <td><code>&amp;sect;</code></td> 
   <td><code>&amp;#167;</code></td> 
  </tr> 
  <tr> 
   <td>©</td> 
   <td>版权（copyright）</td> 
   <td><code>&amp;copy;</code></td> 
   <td><code>&amp;#169;</code></td> 
  </tr> 
  <tr> 
   <td>®</td> 
   <td>注册商标</td> 
   <td><code>&amp;reg;</code></td> 
   <td><code>&amp;#174;</code></td> 
  </tr> 
  <tr> 
   <td>™</td> 
   <td>商标</td> 
   <td><code>&amp;trade;</code></td> 
   <td><code>&amp;#8482;</code></td> 
  </tr> 
  <tr> 
   <td>×</td> 
   <td>乘号</td> 
   <td><code>&amp;times;</code></td> 
   <td><code>&amp;#215;</code></td> 
  </tr> 
  <tr> 
   <td>÷</td> 
   <td>除号</td> 
   <td><code>&amp;divide;</code></td> 
   <td><code>&amp;#247;</code></td> 
  </tr> 
 </tbody> 
</table>

[a.png]: https://cdn.jsdelivr.net/gh/webVueBlog/dadapic/img/a.png
[QQ_E6_88_AA_E5_9B_BE20200324232345.png]: /images/20210724/24db3b7066f845d4a88ffbbc13c1c585.png
[QQ_E6_88_AA_E5_9B_BE20200325222608.png]: /images/20210724/50ec1bd83e15476cbc9e8716060cc791.png
[QQ_E6_88_AA_E5_9B_BE20200325235454.png]: /images/20210724/9c0e8b62706341478c1296fbea47cd91.png
[Link 1]: mailto:2397923107@qq.com