HTML之元素

2022-10-09 16:58:10

一、基础知识

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

1、HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

2、嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

3、空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

注意：

1、在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

2、HTML 标签对大小写不敏感：<P> 等同于 <p>。但万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

 

二、常用标签

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）

容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

注意：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。

标准的div+css页面，只会用到种类很少的标签：

div p h1 span a img ul ol dl input

https://www.w3school.com.cn/tags/html_ref_byfunc.asp

 

基础

1、<!DOCTYPE>

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

注意：

1、请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

2、<!DOCTYPE> 声明没有结束标签。

3、<!DOCTYPE> 声明对大小写不敏感。

4、请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

https://www.w3school.com.cn/tags/tag_doctype.asp

2、<html>

此元素可告知浏览器其自身是一个 HTML 文档。

<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

<html> 标签支持以下标准属性和全局属性：

属性 值 描述
manifest url 定义一个 URL，在这个 URL 上描述了文档的缓存信息。
xmlns http://www.w3.org/1999/xhtml 定义 XML namespace 属性。

注意：

1、即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。

2、xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。

https://www.w3school.com.cn/tags/tag_html.asp

3、<title> 

<title> 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。所有浏览器都支持 <title> 标签。

<title> 标签支持以下标准属性和全局属性：

属性 值 描述
dir
  • rtl
  • ltr
 规定元素中内容的文本方向。
lang language_code 规定元素中内容的语言代码。
xml:lang language_code 规定 XHTML 文档中元素内容的语言代码。

注意：<title> 标签是 <head> 标签中唯一要求包含的东西。

https://www.w3school.com.cn/tags/tag_title.asp

4、<body>

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

可选的属性

属性 值 描述
alink
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文档中活动链接（active link）的的颜色。
background URL

不赞成使用。请使用样式取代它。

规定文档的背景图像。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文档的背景颜色。
link
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文档中未访问链接的默认颜色。
text
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文档中所有文本的颜色。
vlink
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文档中已被访问链接的颜色。

https://www.w3school.com.cn/tags/tag_body.asp

5、<h1-h6>

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

https://www.w3school.com.cn/tags/tag_hn.asp

6、<p>

<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

可选的属性

属性 值 描述
align
  • left
  • right
  • center
  • justify

不赞成使用。请使用样式取代它。

规定段落中文本的对齐方式。

https://www.w3school.com.cn/tags/tag_p.asp

7、<br> 

<br> 可插入一个简单的换行符。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

注意：

1、<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear 属性，该属性有三个可选的值：left、right 或者 all，每个值都代表一个边界或两边的边界。

2、请使用 <br> 来输入空行，而不是分割段落。

https://www.w3school.com.cn/tags/tag_br.asp

8、<hr> 

<hr> 标签在 HTML 页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。

在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。

可选的属性

属性 值 描述
align
  • center
  • left
  • right

不赞成使用。请使用样式取代它。

规定 hr 元素的对齐方式。
noshade noshade

不赞成使用。请使用样式取代它。

规定 hr 元素的颜色呈现为纯色。
size pixels

不赞成使用。请使用样式取代它。

规定 hr 元素的高度（厚度）。
width
  • pixels
  • %

不赞成使用。请使用样式取代它。

规定 hr 元素的宽度。

https://www.w3school.com.cn/tags/tag_hr.asp

9、<!--...-->

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）：

元信息

 1、<head> 

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

2、<meta>

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

必须的属性：

属性 值 描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性：

 

属性 值 描述
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
 把 content 属性关联到 HTTP 头部。
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
 把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以*使用对自己和源文档的读者来说富有意义的名称。

字符集：charset定义网页的编码方式

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

关键词："keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

视口：viewport，其中`width=device-width` 表示视口宽度等于屏幕宽度。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

页面描述：只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name="description" content="非常厉害的一个网页。" />

自动跳转：3秒之后，自动跳转到百度页面。

<meta http-equiv="refresh" content="3;http://www.baidu.com">

3、<base>

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

必须的属性

属性 值 描述
href URL 规定页面中所有相对链接的基准 URL。

可选的属性

属性 值 描述
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 在何处打开页面中所有的链接。

表单

 表单标签用`<form>`表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

1、<form>

可选属性：

- `name`：表单的名称，用于JS来操作或控制表单时使用；
- `id`：表单的名称，用于JS来操作或控制表单时使用；
- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
- `method`：表单数据的提交方式，一般取值：get(默认)和post

action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

get提交和post提交的区别：

GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

Enctype：
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

- Application/x-www-form-urlencoded：**默认**加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：**上传附件时，必须使用这种编码方式**。

注意：表单和表格嵌套时，是在<form>标记中套<table>标记。

2、<input>

输入标签（文本框）用于接收用户输入。

<input type="text" />

属性：

- `type="属性值"`：文本类型。属性值可以是：
- `text`（默认）
- `password`：密码类型
- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
- `button`：普通按钮，结合js代码进行使用。
- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
- `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
- `file`：文件选择框。提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

- **`value="内容"`**：文本框里的默认内容（已经被填好了的）

- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
注意**size属性值的单位不是像素哦**。

- `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。

- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。

> 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。

<form>
        姓名：<input value="呵呵" >逗比<br>
        昵称：<input value="哈哈" readonly=""><br>
        名字：<input type="text" value="name" disabled=""><br>
        密码：<input type="password" value="pwd" size="50"><br>
        性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
              <input type="radio" name="gender" id="radio2" value="female" >女<br>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>

按钮的举例

<form>
        <input type="button" value="普通按钮"><br>
        <input type="submit"  value="提交按钮"><br>
        <input type="reset" value="重置按钮"><br>
        <input type="image" value="图片按钮1"><br>
        <input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
        <input type="file" value="文件选择框">
    </form>

3、<select>和<option>

下拉列表标签，里面的每一项用`<option>`表示。select就是“选择”，option“选项”。

select可选属性：

- `multiple`：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

- `selected`：预选中。没有属性值。

    <form>
        <select>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option selected="">研究生</option>
        </select>
        <br><br><br>

        <select size="3">
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option>研究生</option>
        </select>
        <br><br><br>

        <select multiple="">
            <option>小学</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大学</option>
            <option>研究生</option>
        </select>
        <br><br><br>

    </form>

 

4、<textarea>

多行文本输入框，text 就是“文本”，area 就是“区域”。

可选属性：

- `rows="4"`：指定文本区域的行数。
- `cols="20"`：指定文本区域的列数。
- `readonly`：只读。

    <form>
        <textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
    </form>

5、<label>

为 input 元素定义标注（标记）。

我们先来看下面一段代码：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。

本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

上方代码中，让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。

任何表单元素都有label。

 

列表

1、 <ul>和<li>

<ul> 标签定义无序列表。<li>无序列表中的每一项

- ul：unordered list，“无序列表”的意思。
- li：list item，“列表项”的意思。

<ul>
    <li>默认1</li>
    <li>默认2</li>
    <li>默认3</li>
</ul>

注意：

1、ul的“儿子”不能是别的东西，只能有li。但是li是一个容器级标签，li里面什么都能放，甚至可以再放一个ul。
2、再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

列表的嵌套

  <ul>
    <li><b>北京市</b>
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>东城区</li>

        </ul>
    </li>

    <li><b>广州市</b>
        <ul>
            <li>天河区</li>
            <li>越秀区</li>
        </ul>
    </li>
  </ul>

css 属性

list-style-position: inside   /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */

ul标签实际应用场景：

场景1、导航条

场景2、li 里面放置的内容可能很多

可选的属性：

属性 值 描述
compact compact

不赞成使用。请使用样式取代它。

规定列表呈现的效果比正常情况更小巧。
type
  • disc(实心原点，默认)
  • square(实心方点)
  • circle(空心圆)

不赞成使用。请使用样式取代它。

规定列表的项目符号的类型。

 

2、<ol>和<li>

<ol>有序列表，<li>每一项

<ol >
    <li>呵呵哒1</li>
    <li>呵呵哒2</li>
    <li>呵呵哒3</li>
</ol>

 

和无序列表一样，有序列表也是可以嵌套的哦。

ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul。

可选的属性：

属性 值 描述
compact compact

HTML5 中不支持。HTML 4.01 中不赞成使用。

规定列表呈现的效果比正常情况更小巧。
reversed reversed 规定列表顺序为降序。(9,8,7...)
start number 规定有序列表的起始值。
type
  • 1
  • A
  • a
  • I
  • i
 规定在列表中使用的标记类型。

 

3、<dl>和<dt>、<dd>

定义列表<dl>，dl的子元素只能是dt和dd。定义列表的作用非常大。

- <dl>：definition list，没有属性。

- <dt>：definition title 列表的标题，这个标签是必须的

- <dd>：definition description 列表的列表项，如果不需要它，可以不加

<dl>
    <dt>第一条</dt>
    <dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
    <dd>我会让你明白，我从不说空话</dd>
    <dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>

    <dt>第二条</dt>
    <dd>良辰最喜欢对那些自认能力出众的人出手</dd>
    <dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
    <dd>你只要记住，我叫叶良辰</dd>
    <dd>不介意陪你玩玩</dd>
    <dd>良辰必有重谢</dd>

</dl>

可以看出，定义列表表达的语义是两层：

- （1）是一个列表，列出了几个dd项目
- （2）每一个词儿都有自己的描述项。

备注：

1、dd是描述dt的。

2、dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

 

表格

 1、<table>和<tr>、<td>、<th>、<caption>

表格标签用`<table>`表示。一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。<th>元素定义表头。caption 元素定义表格标题。

在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。

<table>
    <tr>
        <td>许嵩</td>
        <td>29</td>
        <td>男</td>
        <td>安徽</td>
    </tr>
    <tr>
        <td>邓紫棋</td>
        <td>23</td>
        <td>女</td>
        <td>香港</td>
    </tr>
</table>

可选的属性：

属性 值 描述
align
  • left
  • center
  • right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。这里不是设置表格里内容的对齐方式，

如果想设置内容的对齐方式，要对单元格标签`<td>`进行设置）
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。
border pixels 规定表格边框的宽度。
cellpadding
  • pixels
  • %
 规定单元边沿与其内容之间的空白。
cellspacing
  • pixels
  • %
 规定单元格之间的空白。
frame
  • void，不显示外侧边框。
  • above，显示上部的外侧边框。
  • below，显示下部的外侧边框。
  • hsides，显示上部和下部的外侧边框。
  • lhs，显示左边的外侧边框。
  • rhs，显示右边的外侧边框。
  • vsides，显示左边和右边的外侧边框。
  • box，在所有四个边上显示外侧边框。
  • border，在所有四个边上显示外侧边框。
 规定外侧边框的哪个部分是可见的。
rules
  • none，没有线条。
  • groups，位于行组和列组之间的线条。
  • rows，位于行之间的线条。
  • cols，位于列之间的线条。
  • all，位于行和列之间的线条。
 规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width
  • %
  • pixels
 规定表格的宽度。

单元格的线和表格的边框线合并（表格的两边框合并为一条），表格中很细表格边线的制作，CSS的写法

style="border-collapse:collapse;"

- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。

- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
既然说`dir`是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

https://www.w3school.com.cn/tags/tag_table.asp

<tr>可选的属性：

- `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
- `ltr`：从左到右（left to right，默认）
- `rtl`：从右到左（right to left）
- `bgcolor`：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
- `height`：一行的高度
- `align="center"`：一行的内容水平居中显示，取值：left、center、right
- `valign="center"`：一行的内容垂直居中，取值：top、middle、bottom

<td>可选的属性：

- `align`：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
- `valign`：内容的纵向对齐方式。属性值可以填：top middle bottom
- `width`：绝对值或者相对值(%)
- `height`：单元格的高度
- `bgcolor`：设置这个单元格的背景色。
- `background`：设置这个单元格的背景图片。

单元格的合并

单元格的属性：

- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。

<th>：

加粗的单元格。相当于`<td>` + `<b>`

- 属性同`<td>`标签。

<caption>:

表格的标题。使用时和`tr`标签并列

- 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom

<thead>`标签、`<tbody>`标签、`<tfoot>`标签

这三个标签有与没有的区别：

- 1、如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

 

链接

 1、<a> 

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

三种作用：

1、外部链接：链接到外部文件

<a href="02页面.html">点击进入另外一个文件</a>

2、锚链接：在本页面或者其他页面的的不同位置进行跳转

<a href="a.html#name1">回到顶部</a>

3、邮件链接

<a href="mailto:xxx@163.com">点击进入我的邮箱</a>

可选的属性：

属性 值 描述
charset char_encoding HTML5 中不支持。规定被链接文档的字符集。
coords coordinates HTML5 中不支持。规定链接的坐标。
download filename 规定被下载的超链接目标。
href URL 规定链接指向的页面的 URL。
hreflang language_code 规定被链接文档的语言。
media media_query 规定被链接文档是为何种媒介/设备优化的。
name section_name HTML5 中不支持。规定锚的名称。
rel text 规定当前文档与被链接文档之间的关系。
rev text HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape
  • default
  • rect
  • circle
  • poly
 HTML5 中不支持。规定链接的形状。
target
  • _blank
  • _parent
  • _self
  • _top
  • framename
 规定在何处打开链接文档。
type MIME type 规定被链接文档的的 MIME 类型。

注意：

1、分清楚img和a标签的各自的属性

<img src="1.jpg" />
<a href="1.html"></a>

2、a是一个文本级的标签，比如一个段落中的所有文字都能够被点击，那么应该是p包裹a，a的语义要小于p

<p>
    <a href="">段落段落段落段落段落段落</a>
</p>

https://www.w3school.com.cn/tags/tag_a.asp

图像

1、<img>

 img: 英文全称 image（图像），代表的是一张图片。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

<img src="图片的URL" />

能插入的图片类型：

- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。

- 不能往网页中插入的图片格式是：psd、ai等。

必需的属性：

属性 值 描述
alt text 规定图像的替代文本。
src URL 规定显示图像的 URL。

可选的属性：

属性 值 描述
align
  • top
  • bottom
  • middle
  • left
  • right
 不推荐使用。规定如何根据周围的文本来排列图像。
border pixels 不推荐使用。定义图像周围的边框。
height
  • pixels
  • %
 定义图像的高度。
hspace pixels 不推荐使用。定义图像左侧和右侧的空白。
ismap URL 将图像定义为服务器端图像映射。
longdesc URL 指向包含长的图像描述文档的 URL。
usemap URL 将图像定义为客户器端图像映射。
vspace pixels 不推荐使用。定义图像顶部和底部的空白。
width
  • pixels
  • %
 设置图像的宽度。

 

src属性：

1、图片的相对路径

相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和上一层目录。

<img src="2.jpg">
<img src=".\2.jpg">

<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

2、图片的绝对路径

<!-- 以盘符开始的绝对路径 -->
<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">

<!-- 网络路径 -->
<img src="http://img.smyhvae.com/20200122_200901.png">

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案： 用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：

- 相对路径从自己出发，找到别人。

- 绝对路径，就是`http://`或者`https://`开头的路径。

- 绝对不允许使用`file://`开头的文件，这个是完全错误的！

 

width和height：在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

注意：如果要想保证图片等比例缩放，请只设置width和height中其中一个。

alt：当图片不可用（无法显示）的时候，代替图片显示的内容。

title：提示性文本。鼠标悬停时出现的文本。

 

音频/视频多媒体

多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
上述格式视频一般文件较大，不利于网络下载播放。
一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
Flash格式的视频兼容性非常好，Flash格式的文件很小。

1、<bgsound>

播放背景音乐
**属性：
- `src="音乐文件的路径"`
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。

 

 <body>
    <bgsound src="王菲 - 清风徐来.mp3"></bgsound>
 </body>

 

2、<embed>

播放多媒体文件（音频、视频等）
主要应用Netscape浏览器，它不是W3C规范。

备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

属性：
- `src="多媒体文件的路径"`
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。
- `autostart="false"`：打开网页时，禁止自动播放。默认值是true。
- `volume="100"`：设置默认的音量大小，测试发现这个值好像不起作用哦。
- width：指Flash文件的宽度
- height：指Flash文件的高度
- quality：指Flash的播放质量，质量有高有低 hight low
- pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
- type：指定Flash的文件格式类型
- wmode：指Flash的背景是否可以透明，取值：transparent是透明的

 <body>
    <embed src="王菲 - 清风徐来.mp3"></embed>
 </body>

注：在HTML5中新增了`<video>`标签播放视频。

3、<object>

播放多媒体文件（音频、视频等）。主要应用IE浏览器，它是W3C规范。

属性：
- `classid`：指定Flash插件的ID号，一般存在于注册表中。
- `codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
- `<param>`标签的主要作用：设置具体的详细参数。

总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将`<object>`标签和`<embed>`标签标记一起使用，但使用的顺序是：`<object>`中嵌套`<embed>`标记

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
  <param name="movie" value="images/banner.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

 

4、<marquee>

滚动字幕标签，如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。

属性：
- `direction="right"`：移动的目标方向。属性值可以是：`left`（从右向左移动，默认值）、`right`（从左向右移动）、`up`（从下向上移动）、`down`（从上向下移动）。

- `behavior="slide"`：行为方式。属性值可以是：`slide`（只移动一次）、`scroll`（循环移动，默认值）、`alternate`（循环移动）、。
`alternate`和`scroll`属性值都是循环移动，区别在于：假设在`direction="right"`的情况下，`behavior="scroll"`表示从左到右、从左到右、从左到右···`behavior="alternate"`表示从左到右、从右到左、从左到右···

- `scrollamount="30"`：移动的速度
- `loop="3"`: 循环多少圈。负值表示无限循环
- `scrolldelay="1000"`：移动一次休息多长时间。单位是毫秒。

<marquee behavior="alternate" direction="down"  width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>

 

 

分块/节 

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。可以把标签中的内容分割为独立的区块。想必你应该听说过“div + css”布局。

div和span的介绍div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。通常用span实现文本的部分提示功能。

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

 

格式

1、<center>

此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。

到了HTML5里面，center标签不建议使用，建议使用css布局来实现。

2、<pre>

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。真正排网页过程中，<pre>标签几乎用不着。

3、<b>和<strong>

粗体标签`<b>`或`<strong>`（已废弃）

4、<font>

字体标签`<font>`（已废弃），规定文本的字体、字体尺寸、字体颜色。

可选的属性

属性 值 描述
color
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式取代它。

规定文本的颜色。
face font_family

不赞成使用。请使用样式取代它。

规定文本的字体。
size number

不赞成使用。请使用样式取代它。

规定文本的大小。

5、<sup>和<sub>

上标`<sup>`   下标`<sub>`

6、<u>、<s>或<del>、<i>或<em>

下划线、中划线、斜体

- `<u>`：下划线标记

- `<s>`或`<del>`：中划线标记（删除线）

- `<i>`或`<em>`：斜体标记

框架

如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了

注意，框架标签不能放在`<body>`标签里面，因为`<body>`标签代表的只是一个页面，而框架标签代表的是多个页面。于是：`<frameset>`和`<body>`只能二选一。

- 框架的集合用`<frameset>`表示，然后在`<frameset>`集合里放入一个一个的框架`<frame>`。`frameset`和`frame`已经从 Web标准中删除，建议使用 iframe 代替。

 

 

 三、全局属性

 全局属性可用于任何 HTML 元素。

属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

 https://www.w3school.com.cn/tags/html_ref_standardattributes.asp

 四、特殊字符

 https://www.w3school.com.cn/tags/html_ref_symbols.html

- `&nbsp;`：空格 （non-breaking spacing，不断打空格）
- `&lt;`：小于号（less than）
- `&gt;`：大于号（greater than）
- `&amp;`：符号`&`
- `&quot;`：双引号
- `&apos;`：单引号
- `&copy;`：版权`©`
- `&trade;`：商标`™`
- `&#32464;`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。

要求背诵的特殊字符有：`&nbsp;`、`&lt;`、`&gt;`、`&copy;`。

比如说，你想把`<p>`作为一个文本在页面上显示，直接写`<p>`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到**转义字符**。应该这么写：&lt;p&gt

| 特殊字符 | 描述 |字符的代码 |
|:-------------|:-------------|:-----|
||空格符|`&nbsp;`|
|<|小于号|`&lt;`|
|> |大于号|`&gt;`|
|&|和号|`&amp;`|
|￥|人民币|`&yen;`|
|©|版权|`&copy;`|
|®|注册商标|`&reg;`|
|°|摄氏度|`&deg;`|
|±|正负号|`&plusmn;`|
|×|乘号|`&times;`|
|÷|除号|`&divide;`|
|²|平方2（上标2）|`&sup2;`|
|³|立方3（上标3）|`&sup3;`|

HTML之元素

上一篇：httpRunner-接口测试开源框架学习


下一篇：url参数里的空格为何有时会是%20有时会是加号