优秀的编程知识分享平台

网站首页 > 技术文章 正文

HTML基础2019-1-21（html基础选择器）

nanyue 2024-09-14 06:20:42 技术文章 6 ℃

1.1 HTML简介

1.1.2 什么是HTML?

HTML 是用来描述网页的一种语言。

l HTML 指的是超文本标记语言: Hyper Text Markup Language

l HTML 不是一种编程语言，而是一种标记语言

l 标记语言是一套标记标签 (markup tag)

l HTML 使用标记标签来描述网页

l HTML 文档包含了HTML 标签及文本内容

l HTML文档也叫做 web 页面

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

实例解析

l DOCTYPE 声明了文档类型

l 位于标签 <html> 与 </html> 描述了文档类型

l 位于标签 <body> 与 </body> 为可视化网页内容

l 位于标签 <h1> 与 </h1> 作为一个标题使用

l 位于标签 <p> 与 </p> 作为一个段落显示

l <!DOCTYPE html> 在HTML5中也是描述了文档类型。

1.1.3 HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

l HTML 标签是由尖括号包围的关键词，比如 <html>

l HTML 标签通常是成对出现的，比如 <b> 和 </b>

l 标签对中的第一个标签是开始标签，第二个标签是结束标签“/”

l 开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

1.1.4 HTML 元素

"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

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

1.1.5 Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari，Chrome）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

1.1.6 HTML 网页结构

下面是一个可视化的HTML页面结构：

1.1.7 HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

.1.8 <!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

常见的 DOCTYPE 声明

u HTML 5

<!DOCTYPE html>

u HTML 4.01 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

u HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

u HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

u XHTML 1.0 Strict

这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

u XHTML 1.0 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

u XHTML 1.0 Frameset

这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

u XHTML 1.1

这个 DTD 与 XHTML 1.0 Strict 相同，但是允许添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

1.1 HTML基础

1.1.1 标题<h1…h6>

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。

实例：

1.1.1 段落<p>

HTML 段落是通过标签 <p> 来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。

1.1.1 链接<a>

HTML 链接是通过标签 <a> 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。

使用target属性,可以定义被链接的文档在何处打开，target=“_blank”会在新窗口打开文档。

<a href="http://www.edu360.cn/" target="_blank">这是一个链接！</a>

1.1.1 图像<img>

HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例：<img src="https://www.your-image-source.com/your-image.jpg">

注意：img元素是自关闭元素，不需要结束标记。 图像的名称和尺寸是以属性的形式提供的。

1.1.1 水平线<hr>

<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

1.1.2 折行

<br/>元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

1.2.7 文本格式化

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如：粗体 or 斜体

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

1.1.1 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

表格的表头使用th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

行合并和列合并:

1.1.1 列表

HTML 支持有序、无序和定义列表:

未完待续

Tags：

猜你喜欢

最近发表
标签列表