超文本与HTML基础-优快云博客

本文链接：https://blog.youkuaiyun.com/tongzhuo1220/article/details/102794444

超文本

web是一个超文本文件的集合

超文本文件是web的基本组成单元，也称为网页或HTML文档，web页等，通常以 .html或 .htm为后缀的文件

web页之间通过超文本中的超级链接组织在一起

HTML 超文本标记语言，一种纯文本类型的语言

使用带有尖括号的“标记”网页中的内容逐一标识出来
用来设计网页的标记语言
由浏览器解释执行
HTML页面上可以嵌套脚本语言编写的程序段，如VBScript，JavaScript

标记语法

用于描述功能的符合称为“标记”，比如<p>、<h1>等

标记在使用时必须使用尖括号括起来

有封闭类型标记，也有非封闭类型标记

封闭类型标记（双标记），必须成对出现；<标记> 内容 </标记>

非封闭类型标记（空标记/单标记），不能包含内容； <标记 /> 或者 <标记>

元素

即标记

每一对尖括号包围的部分；如<body> </body>包围的部分叫做body元素

元素就像小标签，标识网页文档的不同部分

元素可以包含文本内容和其他元素，也可以是空的。

元素之间可以相互嵌套的，形成更为复杂的语法

在嵌套元素时需注意标记的嵌套顺序

属性和值

属性，修饰元素

属性的声明必须位于开始标记里

一个元素的属性可能不止一个，多个属性之间用空格隔开

多个属性之间不区分先后顺序

每个属性都有值

属性和值之间用等号连接

属性的值包含在引号中

< p align = "center" >段落一 </p> 注：align属性名称，center属性值

每个元素都有自己所特有的属性

标准属性（通用属性）：绝大多数元素都支持的， ( id , title , class , style )

注释

不可嵌套在其他注释中，不可位于嵌在< >中

HTML文档的结构

html页面

文件头：<head></head>

文档主体部分：<body></body>

文档类型声明

在文档的起始用DOCTYPE 声明指定版本和风格

让浏览器清楚文档的版本、类型和风格

• Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• HTML 5

<!DOCTYPE HTML>

<html>元素

整个文档的包含元素

在DOCTYPE的文档类型声明之后

– 按照严格版本（Strict XHTML 1.0），起始的 <html> 标

记中必须包含命名空间标识符

有两个子元素

– <head>：页面的头部内容

– <body>：页面的主体内容

<head> 元素

• <head> 元素用于为页面定义全局信息

– 所有其他头元素的容器

– 紧跟在起始标签 <html> 之后

• 可包含

– title、meta、script、style、link等

<head>

</head>

文档头部内容－-<title>

• 标题元素 <title></title> 用于为文档定义标题

– 标题元素的内容出现在浏览器顶部

– 没有属性

– 必须出现在 <head> 元素中

– 一个文档只能有一个标题元素

<!DOCTYPE HTML>

<html>

<head>

<title>我的第一个HTML页面</title>

</head>

<body>

</body>

</html>

文档头部内容 --<meta>

• 元数据元素 <meta>用于定义网页的基本信息

• 为空标记

• 常用属性有：content、http-equiv

<head>

content="text/html;charset=utf-8" />

</head>

<body> 元素

• <body> 元素出现在 <head> 元素之后，包含网页

要显示给读者的内容，称为主体内容

• 可以包含除了html、head外所有元素

<!DOCTYPE HTML>

<html>

<head>

<title>我的第一个HTML页面</title>

</head>

页面的主要内容

</body>

</html>

文本与特殊字符 • 文本是网页上的重要组成部分

– 直接书写的文本会用浏览器默认的样式显示

– 包含在标记中的文本则会被显示为标记所拥有的样式

• 空格折叠

– 多个空格或制表符压缩成单个空格，即只显示一个空格

• 特殊字符（如空格），需要进行转义（使用字符实体）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
The &lt;p&gt; element.&nbsp;&nbsp;&nbsp; &copy; 2011 by tarena.
</body>
</html>

结果显示 /|\

文本样式

• 文本样式的作用是对文本进行修饰，如加粗、倾斜等

– <b>…</b>：加粗

– <i>…</i>：倾斜

– <u>…</u>：下划线

– <s>…</s>：删除线

– <sup>…</sup>：上标

– <sub>…</sub>：下标

<b>粗体</b>文本

<i>斜体</i>文本

<u>下划线</u>文本

<s>删除线</s>文本

<sub>下标</sub>文本

<sup>上标</sup>文本

标题元素 <hn>

• 标题元素让文字以醒目的方式显示，往往用于文章的标题

• 基本语法：<h#> ... </h#>

– #=1, 2, 3, 4, 5, 6

– 从<h1>到<h6>，即标题1-标题6

段落元素 <p>

• <p> 元素提供了结构化文本的一种方式

• <p> 元素中的文本会用单独的段落显示

– 与前后的文本都换行分开

– 添加一段额外的垂直空白距离，作为段落间距

– 常用属性： align

<p>The first paragraph.</p>

<p align="right">The second paragraph.</p>

换行元素 <br>

• 使用 <br> 元素在任何地方创建手工换行

– 空标记

<p>This is a <br/> paragraph.</p>

分区元素 <span>和<div>

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

• 块分区元素：<div></div>

• 行内分区元素：<span></span>

– 设置同一行文字内的不同格式

<p>first</p>

<p>second</p>

</div>

<p>

一周畅销<span style="color:red;">榜</span>

</p>

行内元素与块级元素

• 块级元素

– 默认情况下，块级元素会独占一行，即元素前后都会自动换行

– 如：<p>、<div>、<hn>

• 行内元素

– 不会换行，可以和其他行内元素位于同一行

– 如：<span>、<b>、<i>、<u>

URL

统一资源定位器，

用来标识网络中的任何资源

– 文本、图片、音视频文件，段落，或其他超文本

• 即路径，指从当前位置到目标位置所经过的路线

• Web 页面常用 URL 形式：

– 绝对路径

– 相对路径

图像元素 <img>

• 使用 <img> 元素将图像添加到页面

– 空标记

• 必须属性：src

• 常用属性：width、height

链接元素 <a>

• 使用 <a> 元素创建一个超级链接，语法如下：

• <a href="" target="">文本</a>

– href 属性：链接 URL

– target 属性：目标，可取值为 _blank、_self 等

– name 属性：锚点名称

<a href="http://www.google.com.hk">To Google</a>

<br />

To other page

</a>

链接的表现形式

• 目标文档为下载资源

• 电子邮件链接

• 返回页面顶部的空链接

• 链接到JavaScript

锚点

• 锚点是文档中某行的一个记号

– 用于链接到文档中的某个位置

• 使用方式

– 1、定义锚点

– 2、链接到锚点：在锚点名前加上#

如果文本/图像与锚点存在同一页面

如果文本/图像与锚点存在不同页面

定义锚点

<a href="#here">Return to top</a>

使用链接，导航到锚点

表格

定义表格：使用成对的 <table></table> 标记

• 创建表行：使用成对的 <tr></tr> 标记

• 创建单元格：使用成对的 <td></td> 标记

<tr>

</tr>

<tr>

</tr>

</table>

表格的常用属性

• <table>元素

– width，设置表格宽度

– height，设置表格高度

– align，设置表格对齐方式(left|center|right)

– border，设置表格边框宽度

– cellpadding，设置内边距(单元格边框与内容之间的距离)

– cellspacing，设置外边距(单元格之间的距离)

– bgcolor，设置表格背景颜色

<tr>元素

– align，设置水平对齐方式(left|center|right)

– valign，设置垂直对齐方式(top|middle|bottom)

• <td>元素

– align，设置水平对齐方式(left|center|right)

– valign，设置垂直对齐方式(top|middle|bottom)

– width，设置宽度

– height，设置高度

– colspan，设置单元格跨列

– rowspan，设置单元格跨行

不规则表格

• 设置单元格 <td> 的跨行或者跨列属性

• 跨列：colspan

– 水平方向延伸单元格，值为一正整数，代表此单元格

水平延伸的单元格数

• 跨行：rowspan

– 垂直方向延伸单元格，值为一正整数，代表此单元格

垂直延伸的单元格数

列表

列表是指将具有相似特征或者具有先后顺序的几行文字

进行对齐排列

• 所有的列表都由列表类型和列表项组成

– 列表类型：有序列表<ol>和无序列表<ul>

– 列表项：<li>，用于指示具体的列表内容

有序列表 <ol>

• <ol> 元素编写有序列表，用于列出页面上有特定次序的一些项目

• <ol> 元素中只能包含列表项元素 <li>

…

</ol>

• type 属性值

– 1，数字(默认)

– a，小写字母

– A，大写字母

– i，小写罗马数字

– I，大写罗马数字

<li>MySQL</li>

<li>MS SQL Server</li>

<li>Oracle</li>

<li>Sysbase</li>

<li>Informix</li>

</ol>

无序列表 <ul>

• <ul> 元素表示无序列表，用于列出页面上没有特定次序的一些项目

• <ul> 元素中只能包含具体的列表项元素 <li>

…

</ul>

• type 属性值

– disc，实心圆(默认)

– circle，空心圆

– square，实心矩形

<li>HTML/XHTML</li>

<li>JavaScript</li>

</ul>

列表嵌套

• 将列表元素嵌套使用，可以创建多层列表

– 常用于创建文档大纲、导航菜单等

<ul>

<li>

Web基础知识

<ul>

<li>Web的工作原理</li>

</ul>

</li>

<li>

HTML快速入门

<ul>

</ul>

</li>

</ul>

表单

表单的作用

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

• 表单有两个基本部分

– 实现数据交互的可见的界面元素，比如文本框或按钮

– 提交后的表单处理

• 界面元素

– 使用 <form> 元素创建表单

– 在 <form> 元素中添加其他表单可以包含的控件元素

表单元素 <form>

• 定义表单：使用成对的 <form></form> 标记

• 主要属性

– action：定义表单被提交时发生的动作，通常包含服务方脚本的URL（比如JSP、PHP）

– method：指出表单数据提交的方式，取值为 get 或者 post

– enctype：表单数据进行编码的方式

– name：表单名称

表单控件

• 表单可以包含很多不同类型的表单控件

• 表单控件元素是包含在表单元素中具有可视化外观的 HTML元素，用于访问者输入信息

• 表单控件元素有

– input元素：文本输入控件、按钮、单选和复选按钮、选项框、文件选择框和隐藏控件等

– textarea元素

– select和option元素

– 其他元素

<input> 元素

• <input> 元素用于收集用户信息

• 该元素是一个单标记，语法为：<input />

• 主要属性

– type：根据不同的 type 属性值，可以创建各种类型的输入字段，比如文本框、复选框等

– value：控件的数据

– name：控件的名称

– disabled：禁用控件

文本框与密码框

• 文本框：<input type =“text” />

• 密码框：<input type =“password”/>

• 主要属性

– name：名称

– value ：由访问者自由输入的任何文本

– maxlength ：限制输入的字符数

– readonly ：设置文本控件只读

姓名：<input type="text" name="username"

value="mary" maxlength="6" />

<br /><br />

密码：<input type="password" name="pwd" />

单选框和复选框

• 单选框： <input type=“radio”/>

• 复选框： <input type=“checkbox” />

• 主要属性

– name：设置名称，并用于分组，一组单选框或者复选框

的名称必须相同

– value：文本，当提交 form 时，如果选中了此单选按钮，

那么 value 就被发送到服务器

– checked：设置默认被选中

性别:

<input type="radio" name="sex" value="0"/>男

<input type="radio" name="sex" value="1"/>女

<input type="radio" name="sex" value="2" checked="checked"/>保密

<br /><br />

喜欢的城市:

<input type="checkbox" name="cities" value="1"/>北京

<input type="checkbox" name="cities" value="2"/>厦门

<input type="checkbox" name="cities" value="3"/>敦煌

<input type="checkbox" name="cities" value="4" checked="checked"/>

杭州

按钮

• 提交按钮： <input type=“submit”/>

– 传送表单数据给服务器端或其它程序处理

• 重置按钮： <input type=“reset” />

– 清空表单的内容并把所有表单控件设置为最初的默认值

• 普通按钮： <input type=“button” />

– 用于执行客户端脚本

• 主要属性

– name：名称

– value：按钮的标题文本

隐藏域和文件选择框

• 隐藏域： <input type=“hidden”/>

– 在表单中包含不希望用户看见的信息

– name 属性：名称

– value 属性：值

• 文件选择框： <input type=“file” />

– name 属性：名称

其他控件

<label> 元素

• 语法： <label>文本</label>

• 主要属性：

– for：表示与该元素相联系的控件的 ID 值

• 作用：

– 将文本与控件联系在一起后，单击文本，效果就同单击控件一样

<label for="chkHid">不要公开我的信息</label>

选项框

• 两种：下拉选项框和滚动列表

• <select>：创建选项框

– name：选项框命名

– size：大于 1 ，则为滚动列表

– multiple：设置多选

• <option>：选项

– value：选项的值

– selected：预选中

选择课程：

<select>

<option value="1">Java</option>

<option value="2">C++</option>

<option value="3">PHP</option>

</select>

-----------------------------------------------+

选择课程：<br />

<select size="4">

<option value="1">Java</option>

<option value="2">C++</option>

<option value="3">PHP</option>

</select>

<textarea> 元素

• 多行文本输入框

– <textarea>文本</textarea>

• 主要属性：

– name：名称

– cols：指定文本区域的列数

– rows：指定文本区域的行数

– readonly：只读

多行文本框：<br />

#工作再忙也要让眼睛稍息一会哦~

HTML 标签说明