HTML

最新推荐文章于 2022-08-13 00:13:10 发布

Mr_Literature

最新推荐文章于 2022-08-13 00:13:10 发布

阅读量3.8k

点赞数 39

分类专栏： web

本文链接：https://blog.csdn.net/qq_31792281/article/details/80149061

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

一、HTML概述

1、HTML简介

HTML指的是超文本标记语言（Hyper Text Markip Language），它不是一种编程语言而是一种标记语言，通过使用标签来描述网页。

2、HTML结构

HTML文件以.html结尾，里面包含两部分，首先是一个<!DOCTYPE html>标签，用于文档声明，标识文档的版本，来使浏览器正确识别；然后是一个<html>标签，这里面包含的就是网页部分。

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

<html>标签中也有两部分，包括<head>标签和<body>标签，<body>标签用来描述网页中存在的内容，<head>标签用来控制这些内容怎么显示。

3、`<head>`

<head>标签是所有头部元素的容器，可包含网页的样式，脚本，提供元信息等等，以下标签可以添加到<head>标签中：<title>、<base>、<link>、<meta>、<style>、<script> 。

1）`<title>`

<title>标签定义网页的标题，显示在浏览器标签页上，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题。

2）`<base>`

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

<base href="http://localhost:8080/study"/>

3）`<link>`

<link>标签定义文档与外部资源之间的关系，最常用于连接样式表。

<link rel="stylesheet" type="text/css" href="mystyle.css"/>

4）`<meta>`

<meta>标签提供关于HTML文档的元数据，不会显示在页面上，但是浏览器是可读的，一般用于规定页面的描述、关键词、文档的作者、最后修改时间以及其它元数据。

<meta name="personal web" content="This is a personal web!"/>

5）`<style>`

<style>标签用于定义HTML文档的样式信息，我们可以在该标签内定义我们所需要的样式。

<style type="text/css">
p{
    color:red;
}
</style>

6）`<script>`

<script>标签用于定义和引用客户端脚本，比如javascript。

定义脚本：

<script type="text/javascript">

</script>

引用脚本文件：

<script type="text/javascript" src="myjavascript.js"></script>

4、`<body>`

<body>标签用于放置其它元素，呈现可见的页面内容。

二、文本元素

1、标题

标题是通过<h1>-<h6>等标签定义的，分成六级标题，<h1>是最大的标题，<h6>是最小的标题。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2、段落

HTML文档的段落通过<p>标签来定义，他会自动在段落前后添加空行。

<p>这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。</p>

效果如下：

这是一个段落，这是一个段落，这是一个段落，这是一个段落，这是一个段落。

浏览器在显示页面时，对于多余的空格和空行都会被算作一个空格

3、列表

HTML支持列表，将事物进行分类，逐项进行显示。

1）有序列表

有序列表，浏览器会自动对每一项使用数字进行标记，使用<ol>和<li>标签进行定义。

<ol>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

效果如下：

项目一
项目二
项目三

2）无序列表

无序列表，浏览器会自动在每一项前面添加小圆点或其他进行标记，使用<ul>和<li>标签进行定义。

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

效果如下：

项目一
项目二
项目三

3）自定义列表

自定义列表不仅仅显示一些项，它还会添加这些项的描述，使用<dl>标签开始，<dt>标签定义这些项，<dd>标签定义项的描述。

<dl>
    <dt>项目一</dt>
    <dd>- 项目一的描述...</dd>
    <dt>项目二</dt>
    <dd>- 项目二的描述...</dd>
    <dt>项目三</dt>
    <dd>- 项目三的描述...</dd>
</dl>

效果如下：

项目一

- 项目一的描述…

项目二

- 项目二的描述…

项目三

- 项目三的描述…

4）列表嵌套

列表不仅可以单独使用，还可以进行嵌套使用，来实现多级列表。

<ol>
    <li>项目一
        <ul>
            <li>项目一的第一项</li>
            <li>项目一的第二项</li>
            <li>项目一的第三项</li>
        </ul>
    </li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

效果如下：

项目一
- 项目一的第一项
- 项目一的第二项
- 项目一的第三项
项目二
项目三

4、格式化

1）文本格式化

文本格式化标签用来对我们的文本元素进行格式化，使其拥有更多的效果。有以下文本格式化标签：

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

例如：

<p>这是我们的段落，<b>粗体</b></p>
<p>这是我们的段落，<big>大号文字</big></p>
<p>这是我们的段落，<em>着重文字</em></p>
<p>这是我们的段落，<i>斜体</i></p>
<p>这是我们的段落，<small>小号文字</small></p>
<p>这是我们的段落，<strong>加重语气</strong></p>
<p>这是我们的段落，<sub>下标</sub></p>
<p>这是我们的段落，<sup>上标</sup></p>
<p>这是我们的段落，<ins>下划线</ins></p>
<p>这是我们的段落，<del>删除线</del></p>

效果如下：

这是我们的段落，粗体

这是我们的段落，大号文字

这是我们的段落，着重文字

这是我们的段落，斜体

这是我们的段落，小号文字

这是我们的段落，加重语气

这是我们的段落，_下标

这是我们的段落，^上标

这是我们的段落，下划线

这是我们的段落，~~删除线~~

2）计算机输出

计算机输出标签，用来处理网页中的一些特殊输出，它可能与我们的HTML语法有着一定的冲突，所以需要进行特别的处理。有以下计算机输出标签：

标签	描述
`<code>`	定义计算机代码。
`<kbd>`	定义键盘码。
`<samp>`	定义计算机代码样本。
`<tt>`	定义打字机代码。
`<var>`	定义变量。
`<pre>`	定义预格式文本。

3）引用

引用标签用来实现我们所需要的一些特殊效果，有以下引用标签：

标签	描述
`<abbr>`	定义缩写。
`<acronym>`	定义首字母缩写。
`<address>`	定义地址。
`<bdo>`	定义文字方向。
`<blockquote>`	定义长的引用。

<q> 定义短的引用语。
<cite> | 定义引用、引证。
<dfn> | 定义一个定义项目。

5、字符实体

HTML中的预留字符，会解释成其它含义，所以要输出这些字符时，需要使用这些字符的字符实体来代替。

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`'`(IE不支持)	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

三、链接元素

链接元素，元素中包含着链接，用于引用外部的文件或链接到别的文件。

1、链接

<a>标签用于跳转到新的文档或者当前文档中的某个位置。

1）超链接

用作超链接跳转到新的文档。

href：新的文档的路径。
target：规定在何处打开链接文档。值：
- _blank：在新的窗口中打开被链接文档。
- _self：默认值，在当前窗口打开链接文档。
- _parent：当前窗口存在父窗口，则在父窗口中打开链接文档，否则与_self一样，在当前窗口中打开链接文档。
- _top：在整个窗口中打开被链接文档。

<a href="http://www.baidu.com" target="_blank">百度</a>

效果如下：

百度

2）锚点

定义锚点跳转到当前页面的某个位置。

href：指定目标位置的id。

<a href="#anchor">锚点</a>

效果如下：点击后，可以跳转到表格部分。

锚点：跳转到表格部分

2、图片

<img>标签用于显示图片。

src：要引用的图片的地址，可以是本地地址，也可以是网络地址。
alt：当图片不能正常显示时，显示alt中的文本。

<img src="https://i-blog.csdnimg.cn/blog_migrate/4d3233ed2b58d51cfa5011c4393ea10f.gif" alt="百度标志图"/>

效果如下：

3、音频

方式一：<embed>标签

<embed src="http://www.w3school.com.cn/i/horse.mp3"/>

方式二：<audio>标签

<audio controls="controls">
    <source src="song.mp3" type="audio/mp3" />
    <source src="song.ogg" type="audio/ogg" />
    Your browser does not support this audio format.
</audio>

浏览器会尝试以mp3或ogg方式播放音频，如果失败，会显示后面的文本。

4、视频

方式一：<embed>标签

<embed src="http://www.w3school.com.cn/i/movie.ogg"/>

方式二：<video>标签

<video controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

浏览器会尝试以mp4或ogg或webm方式播放视频，如果失败，会显示后面的文本。

四、表单元素

1、`<form>`

表单是一个包含表单元素的区域，允许用户输入相关信息，表单用<form>标签来设置，其中包含各种表单元素。

<form>
...
</form>

<form>标签有以下属性：

属性	描述
action	提交表单的目标位置。
method	提交表单的方式，有get和post两种方式。
enctype	指定数据发到服务器时的编码类型，有三种类型：application/x-www-form-urlencoded（默认值）、multipart/form-data、text/plain。

2、`<input>`

<input>标签是最重要的表单元素，包含各种类型的输入。具有以下属性：

属性	描述
value	规定输入字段的默认值。
readonly	规定输入框只读不能输入，无属性值直接使用。
disabled	规定输入框不可用，无属性值直接使用。
placeholder	用于有关格式的简单描述，输入前一直存在。
size	规定输入框的大小，以字符数计算。
maxlength	规定输入最大字符数。
autofocus	规定页面加载时自动获得焦点，无属性值直接使用。
required	用于规定该输入框必须填写，无属性值直接使用。
checked	规定被默认选中的元素，无属性值直接使用。

1）文本框

<input type="text"/>

2）密码框

<input type="password"/>

3）单选框

对于单选按钮，属于同一类的元素name属性值要相同，才能实现只有一个被选中，checked属性规定默认选择项。

<input type="radio" name="sex" value="man"/>man
<input type="radio" name="sex" value="woman"/>woman

4）复选框

对于多选框，属于同一类的元素name属性值要相同。

<input type="checkbox" name="hobby" value="play"/>play ball
<input type="checkbox" name="hobby" value="sing"/>sing song
<input type="checkbox" name="hobby" value="swim"/>swimming

5）按钮

普通按钮

<input type="button" value="按钮"/>

提交按钮

<input type="submit" value="提交"/>

重置按钮

<input type="reset" value="重置"/>

6）隐藏域

隐藏域没有任何效果显示，它主要是为了向浏览器传入一些不需要显示又很重要的数据。

<input type="hidden"/>

7）文件选择框

文件选择框主要用于将本地文件通过浏览器传入服务器。

<input type="file" />

8）其它

HTML5增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

例如：

<input type="color"/>
<input type="date"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="email"/>
<input type="month"/>
<input type="number"/>
<input type="range"/>
<input type="search"/>
<input type="tel"/>
<input type="time"/>
<input type="url"/>
<input type="week"/>

3、`<label>`

<label>定义了<input>元素的标签，一般为输入标题。

<label>用户名：</label>

4、`<textarea>`

<textarea>标签定义了文本域，可以输入多行文本。

rows：规定文本区域可见的行数。
cols：规定文本区域可见的列数。

<textarea rows="4" cols="40"></textarea>

如果希望将<textarea>元素固定大小，可以设置style="resize:none;"。

5、`<select>`

<select>定义了下拉选项列表。

multiple：当属性为true时，可以选择多个选项。
size：规定下拉选项中可见选项的数目。

<select>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
</select>

6、`<button>`

相比于<input type="button"/>类型的按钮，<button>标签提供了更为强大的功能和丰富的内容。

type：规定按钮的类型，包括button、submit、reset。

<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>

五、容器元素

1、`<span>`

<span>标签用来组合文档中的行内元素，对某些部分进行特殊操作。

<p>请注意，这是一个<span style="color:red;">段落</span>，注意<span color="red">段落</span>。</p>

2、`<table>`

1）创建表格

<table>标签用来定义一个表格。
<caption>标签定义表格标题。
<tr>标签用来定义表格的一行。
<th>标签定义表头行的一列。
<td>标签用来定义表格一行中的一列。

<table>
    <caption>我的表格</caption>
    <tr>
        <th>名称</th>
        <th>类型</th>
    </tr>
    <tr>
        <td>name1</td>
        <td>type1</td>
    </tr>
    <tr>
        <td>name2</td>
        <td>type2</td>
    </tr>
</table>

效果如下：

我的表格
名称	类型
name1	type1
name2	type2

<table>属性：

border：设置边框宽度。
frame：控制围绕表格的边框。值：
- box：四边边框。
- above：上边边框。
- below：下边边框。
- hsides：上下边框。
- vsides：左右边框。

<td>属性：

rowspan：设置横跨多行。
colspan：设置横跨多列。
align：设置单元格文字倚靠方向。

2）行分组

<thread>：定义表格的页眉。
<thfoot>：定义表格的页脚。
<thbody>：定义表格的主体。

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>80</td>
        </tr>
    </tbody>
</table>

效果如下：

Month	Savings
Sum	180
January	100
February	80

3、`<div>`

<div>标签是组合其它HTML元素的容器，属于块级元素。

<div style="width:100px;height:100px;border:1px solid black;"></div>

4、`<frame>`

1）页面框架

页面框架：整个页面都是一个框架，使用时<frame>不能与<body>标签同时使用。

rows：将整个区域垂直方向分成几个区域。
cols：将整个区域水平方向分成几个区域。

<frameset rows="30%,30%,40%">
    <frame src="test1.html"/>
    <frame src="test2.html" name="test2"/>
    <frame src="test3.html"/>
</frameset>

给<frame>标签添加noresize属性，使得框架的边框不能被拖动修改大小，该属性无属性值直接使用。给<frame>标签添加name属性，就可以通过<a>标签设置target属性来在该部分打开新的文档。

<a href="http://ww.baidu.com" target="test2">打开百度</a>

2）页内框架

页内框架：普通页面的某一个部分，定义为框架，可以嵌入另一个文档。

<iframe src="http://www.baidu.com" width="100%"></iframe>

六、语义元素

许多网站包含了指示导航、页眉以及页脚的HTML代码，HTML5提供了定义页面不同部分的新语义元素，语义元素可以很清楚通过标签名来向浏览器和开发者描述其意义。

标签	描述
`<article>`	定义文章。
`<aside>`	定义页面内容以外的内容。
`<details>`	定义用户能够查看或隐藏的额外细节。
`<figcaption>`	定义 `<figure>` 元素的标题。
`<figure>`	规定自包含内容，比如图示、图表、照片、代码清单等。
`<footer>`	定义文档或节的页脚。
`<header>`	规定文档或节的页眉。
`<main>`	规定文档的主内容。
`<mark>`	定义重要的或强调的文本。
`<nav>`	定义导航链接。
`<section>`	定义文档中的节。
`<summary>`	定义 `<details>` 元素的可见标题。
`<time>`	定义日期/时间。

Mr_Literature

关注

39
点赞
踩
116

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`'`(IE不支持)	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`'`(IE不支持)	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`

HTML

HTML

一、HTML概述

1、HTML简介

2、HTML结构

3、<head>

1）<title>

2）<base>

3）<link>

4）<meta>

5）<style>

6）<script>

4、<body>

二、文本元素

1、标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2、段落

3、列表

1）有序列表

2）无序列表

3）自定义列表

4）列表嵌套

4、格式化

1）文本格式化

2）计算机输出

3）引用

5、字符实体

三、链接元素

1、链接

1）超链接

2）锚点

2、图片

3、音频

4、视频

四、表单元素

1、<form>

2、<input>

1）文本框

2）密码框

3）单选框

4）复选框

5）按钮

6）隐藏域

7）文件选择框

8）其它

3、<label>

4、<textarea>

5、<select>

6、<button>

五、容器元素

1、<span>

2、<table>

1）创建表格

2）行分组

3、<div>

4、<frame>

1）页面框架

2）页内框架

六、语义元素

3、`<head>`

1）`<title>`

2）`<base>`

3）`<link>`

4）`<meta>`

5）`<style>`

6）`<script>`

4、`<body>`

1、`<form>`

2、`<input>`

3、`<label>`

4、`<textarea>`

5、`<select>`

6、`<button>`

1、`<span>`

2、`<table>`

3、`<div>`

4、`<frame>`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
`<`	小于号	`<`	`<`
`>`	大于号	`>`	`>`
`&`	和号	`&`	`&`
`"`	引号	`"`	`"`
`'`	撇号	`'`(IE不支持)	`'`
`￠`	分（cent）	`¢`	`¢`
`£`	镑（pound）	`£`	`£`
`¥`	元（yen）	`¥`	`¥`
`€`	欧元（euro）	`€`	`€`
`§`	小节	`§`	`§`
`©`	版权（copyright）	`©`	`©`
`®`	注册商标	`®`	`®`
`™`	商标	`™`	`™`
`×`	乘号	`×`	`×`
`÷`	除号	`÷`	`÷`