《二》标签 - 码农知识堂 - 文章详情页

《二》标签
<head></head> 文档头标签：

用来设置网页的配置项，紧跟在起始标签<html>之后，可包含 title、meta、link、style、script 等。是所有其他头元素的容器，标记的内容不会在浏览器中显示。

<title></title> 文档标题标签：

用来设置网页的标题，没有属性，必须写在<head></head>元素中。一个文档只能有一个，文字会显示在浏览器的标签栏上。
```
<title>慕课网-程序员的梦工厂</title>
1
```
<title></title> 也是搜索引擎收录网站时显示的标题。

<meta> 文档元标签：

用来设置网页的基础配置。是单标签。

合理设置网页的标题、关键字和页面描述，是 SEO 的重要手段。
SEO：Search Engine Optimization，搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中占据领先地位，获得品牌收益。

常用属性有：
1. name：
  属性值有：
  - Keywords：用来设置网页关键词。
  - Description：用来设置网页描述。
    
    页面描述也是搜索引擎显示的简介词语。
```
<meta name=”Keywords” content=”慕课网, JAVA, 前端, 大数据”>
<meta name=”Description” content=”慕课网是 IT 既能学习平台”>
1
2
```
2. content：内容，可以用逗号分隔不同的关键字。
3. charset：字符集。
  属性值有：
  - UTF-8：涵盖全球所有国家、民族的文字和大量图形字符。一个汉字占用 3 个字节数。适用于制作有非汉语的网页。
  - GB2132：收录所有汉字字符和英语、少量韩文、日语和图形字符。一个汉字占用 2 个字节数。适用于制作只有汉字和英语的网页，由于一个汉字仅占 2 字节，网页文件尺寸明显减少。
  无论使用 charset 设置哪种字符集，一定要在 VScode 编辑器中将文件也设置为相同的字符集，否则网页打开会出现乱码。
```
<meta charset=”GB2132”>	
1
```
<body></body> 文档体标签：

用来设置网页的内容。

属性有：
1. bgcolor：设置背景颜色。
2. text：设置文本颜色。
3. link：设置链接颜色；vlink：已经访问了的链接的颜色；alink：正在被点击的链接的颜色。
浏览器默认html100%，body自带8px的外边距。

<hn></hn> 标题标签：

h 是 headline 的缩写。用于设置标题。

格式为：<hn>内容</hn>，n 的范围为 1 到 6。从<h1>到<h6>，即从标题 1 到标题 6，标题字号由大到小。

搜索引擎非常看重 <h1></h1> 标签的内容，开发时应该将重点内容放到 <h1></h1> 标签中。
但是，一个页面一般只能放置一个 <h1></h1> 标签，否则会被搜索引擎视为作弊，将不会进行内容的拉取。

<p></p> 段落标签：

p 是 paragraph 的缩写。用于设置段落。

格式为：<p>内容</p> 。与前后的文本都换行分开，以单独的段落显示，还会添加一段额外的垂直空白距离，作为段落间距。

属性有：align。

<div></div> 块分区标签：

div 是 division 的缩写。用于为元素分组，常用于页面布局。

格式为：<div>内容</div>。宽度为整一行，可以定义宽度和高度。能嵌套使用。

<span></span> 行内分区标签（内联标签）：

用于为元素分组，常用于页面布局。

格式为：<span>内容</span> 。设置同一行的不同格式，宽度只为一小段，不可以定义宽度和高度。能嵌套使用。
块级元素与行内元素的区别：
1. 块级元素：独占一行，元素前后都会自动换行。设置宽高起作用。如 <div>、<p>、<hn> 等。
2. 行内元素：不会换行，与其他行内元素位于同一行，设置宽高不起作用。如 <span>、<a>、<img>、<input> 等。
行内元素设置上下外边距无效，左右外边距有效。

行内元素设置上下内边距，虽然审查元素是可以看到的，但并不会撑开父元素，对周围元素也无任何影响。设置左右内边距有效。
常规情况下，块级元素和内联元素的嵌套规则：
1. 块级元素，可以嵌套块级元素，也可以嵌套内联元素。
<div><div></div></div> // 正确（块级嵌套块级） <div><span></span></div> // 正确（块级嵌套内联）
1
2
1. 行内元素，只能嵌套内联元素，不能嵌套块级元素。
<span><a></a></span> // 正确（内联嵌套内联） <span><div></div></span> // 错误（内联嵌套块级）
1
2
1. 部分块级元素，不能嵌套块级元素，只能嵌套内联元素。如 p、hn。
<p><div></div></p> // 错误，在浏览器上不会嵌套，而是展开显示，且下面会多出来一个空白的 p 标签（特殊块级标签只能嵌套内联标签）
1
但是，标准毕竟只是标准，不规范的写法也是可能通过浏览器认证的。
<img> 图像标签：

img 是 image 的缩写。用来在网页中引用图像，为空标记。

格式为：<img src=”路径/文件名.文件格式” alt=”属性值”>

属性有：
1. src：是 source 的缩写。用来设置图像的 URL。
2. alt：是 alternate 的缩写。是对图像的文本描述。
  当网页上的图像被加载完成后，鼠标移到上面去，会显示这个图像指定的属性文字。
  如果图像没有下载或者加载失败，会用文字来代替图像显示。
  搜索引擎可以通过这个属性的文字来抓取图像。
  盲人使用的网页朗读器会朗读 alt 中的文本。
3. width、height：设置图像的宽度和高度。如果省略其中的一个属性，则表示按原始比例缩放图像。单位是像素，但是不需要写出来。
<a></a> 超链接标签：

a 是 anchor 的缩写。用来创建超链接。超链接是将网页和网页连接在一起的方法，点击超链接可以跳转到其他网页。

格式为：<a href=”url” target=”属性值”>内容</a>

属性有：
1. href：hypertext reference，超文本引用，用于指定超链接目标的 URL。属性值可以是任何有效文档的相对路径或绝对路径，还可以是片段标识符和 JavaScript 代码段。
  
  只有加上 href 属性（即使属性值为空），a 标签才会改变颜色并且出现下划线。
  
  相对路径：文件或目录相对于当前工作目录的位置。./ 表示当前目录，../ 表示上一级目录。
  绝对路径：文件或目录相对于根目录的位置，绝对路径都从“/”开始。
  
  javascript: 是一个伪协议，表示在触发 <a> 的默认动作时，执行一段 JavaScript 代码，而 javascript:; 表示什么都不执行，也就是点击 <a> 时没有任何效果。
2. target：定义超链接的打开方式。
  属性值（在 HTML 4 中，属性值前面需要加上一个下划线）：
  - self：默认，在当前窗口打开链接。
  - blank：在一个新窗户中打开链接。
  - parent：在父窗口中打开链接（框架中使用较多）。
  - top：在顶层窗口中打开链接（框架中使用较多）。
3. title：设置鼠标的悬停文本。
锚点：

使用锚点可以精准跳转到指定的位置。

给某个元素添加唯一标识 id，然后 <a></a> 标签的 href 设置为 #id，点击 <a></a> 标签就可以跳转过去。

<a href="#">回到顶部</a>，href 设置为 #，点击会回到页面顶部。
```
// 同一页面的锚点
<a href=”#footer”>跳转到页面底部</a>

<a id=”footer”>这是页面底部</a>
1
2
3
4
```
```
// 不同页面的锚点
// index.html
<a href=”test.html#footer”>跳转到 test.html 页面底部</a>

// test.html
<div id=”footer”>这是页面底部</div>
1
2
3
4
5
6
```
下载链接：

href 属性指向 exe、zip、rar 等文件格式的链接，将自动成为下载链接。

邮件链接：

有 mailto 前缀的链接是邮件链接，系统将自动打开 Email 相关的软件。
```
<a href="mailto:999@qq.com">给小明发邮件</a>
1
```
电话链接：

有 tel: 前缀的链接是电话链接，系统将自动打开拨号盘。
```
<a href="tel:123456789">给小明打电话</a>
1
```
<br/> 换行标签：

为空标记，在任何地方创建手工换行。

<hr> 水平分割线标签：

段落之间的分割线。

属性有：
1. width：设置宽度。
2. size：设置粗细。
3. color：设置颜色。
4. align：设置对齐方式。
5. title：当用户将鼠标悬停在分割线上时会出现 title 属性设置的属性值。
<pre> 预格式化标签：

可定义预格式化的文本。一个常见的应用就是用来表示计算机的源代码。

表格：

是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的，通常用来组织结构化的信息。

表格的数据保存在用于显示表格数据，设置页面布局的单元格里。

创建表格:
1. 定义表格：使用成对的<table></table>标记。
  属性:
  
  width，height，border，
  align：表格的显示位置，默认值left
  cellspacing：单元格之间的间距，默认是2px。
  cellpadding：单元格内容与单元格边框的显示距离。
  frame：控制表格边框最外层的四条线框。
  属性值：void(默认值，无边框)；above(仅顶部有边框)；below(仅底部有边框)；hsides(仅顶部和底部有边框)；lns(仅左侧有边框)；rhs(仅右侧有边框)；vsides(仅左右侧有边框)；box/border(全部四个边框)
  rules：控制是否显示以及如何显示单元格之间的分割线。
  属性值：none(默认值，无分割线)；all；rows(仅有行分割线)；clos(仅有列分割线)；groups(仅在行组和列组之间有分割线)
2. 创建表行：使用成对的<tr></tr>标记。
  属性:
  
  bgcolor：设置背景颜色。
  align：设置水平方向对齐方式。
  属性值：left、right、center
  valign:设置垂直方向对齐方式。
  属性值：top、bottom、middle
3. 创建单元格：使用成对的<td></td>标记。<td></td>是数据标记，表示该单元格的具体数据。
  
  属性：
  1.bgcolor、width、height、align、valign,
  2. rowspan colspan
  
  <td></td>和<th></th>：都是单元格的标记，嵌套在<tr></tr>标签内成对出现，两者的属性一样。
  <th></th>是表头标记，通常位于首行或首列，文字会被默认加粗，而td></td>不会。
表格标题<caption></caption>：

为表格定义标题，必须紧随<table></table>标签之后，且每个表格只能定义一个标题。默认情况下，标题将在表格上方居中显示。
```
<table border=”1”>
    <caption>我的表格</caption>//标题
    <tr>
        <td>第一行，第一列</td>
        <td>第一行，第二列</td>
    </tr>
</table>
1
2
3
4
5
6
7
```
行分组：

包含一个或者多个<tr></tr>。
1. 表头行分组<thead></thead>
2. 表主体行分组<tbody></tbody>
3. 表尾行分组<tfoot></tfoot>
```
<table border=”1” width=”300”>
     <tbody align=”right”>
           <tr>
                 <td>mary</td>
                 <td>18</td>
            </tr>
            <tr>
                   <td>jerry</td>
                   <td>20</td>
            </tr>
     </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
```
不规则表格：

设置单元格<td></td>的跨行或跨列属性。
1. rowspan：设置单元格可横跨的行数。rowspan=”0”表示单元格横跨到行组的最后一行。
2. colspan：设置单元格可横跨的列数。colspan=”0”表示单元格横跨到列组的最后一列。
```
<table border=”1”>
      <tr>
          <td>1,1</td>
          <td>1,2</td>
          <td>1,3</td>
     </tr>
     <tr>
         <td colspan=”2”>2,1 2,2</td>
         <td>2,3</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
```
嵌套表格：

在单元格中放置另一个表格，即<td></td>元素中再包含<table></table>元素。使用嵌套表格以设计复杂表格或者复杂布局。

表单：

用于显示、收集信息，并提交信息到服务器。

表单元素<form></form>：

定义表单。
属性：
1. action：表单数据处理程序的URL地址，如果为空则使用当前文档的URL地址，如果表单不需要URL地址，也要指定其属性值为“no”。
2. method：表单数据提交的方式，取值为get或post。get方式提交时，会将表单的内容附加在URL地址后面，所以限制了提交的内容的长度，不超过8192个字符，且不具备保密性。post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制，具备保密性。
3. enctype：表单数据进行编码的方式。
4. target：用来指定目标窗口。
5. name：表单名称。
表单控件：包含在表单元素中具有可视化外观的HTML元素，用于访问者输入信息。包含<input/>元素、<textarea></textarea>元素、<label></label>元素、<select></select>元素、<option></option>元素、<fieldset></fieldset>元素,、<legend></legend>元素。

<input/>元素：

用于收集用户信息，单标记。
属性:
1. type：创建各种类型的输入字段。
```
文本框:<input type=”text”/>
密码框:<input type=”password”/>
单选框:<input type=”radio”/>  
多选框:<input type=”checkbox”/>   属性：checked：设置选中。 一组单选框或者多选框的name必须相同。
提交按钮<input type=”submit”/>，传送表单数据给服务器端或其他处理程序。
重置按钮<input type=”reset”/>，清空表单内容并把表单设置为最初的默认值。
普通按钮<input type=”button”/>，用于执行客户端脚本。
文件选择框<input type=”file”/>，选择要上传的文件。
隐藏域<input type=”hidden”/>，在表达中包含不希望用户看到的信息。
1
2
3
4
5
6
7
8
9
```
1. value：初始化值，打开浏览器时，文本框中的内容。
2. name：控件名称。
3. size：控件长度。
4. maxlength：输入框中最大允许输入的字符数。
5. readonly：设置文本控件只读。
<label></label>元素：

将文本与控件联系在一起后，单击文本就如同单击控件。
属性：for：表示与该元素相联系的控件的ID值。
```
<input  type=”checkbox”  name=”check”  id=”checkid”/>
<label for=”checkid>不要公开我的信息</label>
1
2
```
选项框<select></select>:
属性:
1. name：选项框命名
2. size：大于1则为滚动列表，否则为下拉选项框
3. multiple=”multiple”：设置多选
选项<option></option>:
属性:
1. value：选项的值
2. selected：预选中
```
<select> 
     <option value=”1”>JAVA</option>
     <option value=”1”>C++</option>
</select>
1
2
3
4
```
多行文本输入框<textarea></textarea>：
属性:
1. cols：指定文本区域的列数
2. rows：指定文本区域的行数
3. name
4. readonly=”readonly”：只读
<fieldset></fieldset>元素和 <legend></legend>元素:

<fieldset></fieldset>元素：为控件分组。
<legend></legend>元素：为分组指定一个标题。
```
<fieldset>
      <legend>地址信息</legend>
      地址：<input type=”text”/><br>
      邮编：<input type=”text”/>
</fieldset>
1
2
3
4
5
```
<button type=”button></button>:

<button> 放在form里边，除了IE中默认 type = “button”，其他浏览器默认type = “submit” ，具有表单提交功能，会导致自动刷新页面。
解决方案：1. 修改按钮的书写方式，改为 <input type="button"> ；2. 阻止默认事件，在button的点击事件中加入“e.preventDeafult()”

HTML框架：

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果。

划分框架标签<frameset></frameset>:

直接跟在<head></head>标记之后，不需要<body></body>，可以嵌套使用。
属性:
1. cols：分割左右窗口。“*”表示框架平均分成两个，还可以使用像素数和百分比分割。
2. rows：分割上下窗口。
3. frameborder：指定是否显示边框。0不显示，1显示。
4. border：设置边框的大小。默认5px。
```
<frameset cols=”10%,3*,*,*></frameset>//生成四列。第一列占10%，第二列占剩余空间的3/5，第三列、第四列各占剩余空间的1/5.
1
```
子窗口标签<frame/>:

是单标记，在<frameset></frameset>中设置了几个窗口，就必须对应使用几个<frame/>框架，而且必须使用src属性指定一个网页。
属性:
1. src
2. name：框架名称。
3. noresize：表示不能调整框架大小，没有设置则可以调整。
4. scrolling：是否需要滚动条。属性值：auto根据需要自动出现；yes有；no无
5. frameborder：指定是否显示边框。0不显示,1显示。
相关阅读:
springboot websocket server无法接收二进制消息数据问题一例
 关于Node.js中对中间件认识和了解...
HDLbits exercises 4 (MORE VERILOG FEATURES节选题)
使用helm快速安装Nightingale夜莺监控系统
 docker部署zabbix使用postgresql数据库
 Java项目:汽车出租管理系统(java+SSM+JSP+jquery+Mysql)
SaaS系统用户权限设计
 Qt实现sdp组包，sdp策略介绍
 Hadoop3教程（三十）：（生产调优篇）纠删码
 js-读书笔记-函数式编程-applicative函数-join的实现
原文地址：https://blog.csdn.net/wsln_123456/article/details/86290687