HTML基础
作者：互联网
文档类型定义
- 文档类型定义（Document Type Definition,DTD）
<!DOCTYPE html>
网页模板
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页标题放在这里</title>
<meta charset="utf-8">
</head>
<body>
...主体文本和更多是HTML标签放在这里
</body>
</html>
head,title,meta和body元素
- 页头区域
- 包括网页标题，用于描述meta标记及对脚本和样式的引用
- 包含在head 元素中，以
<head>标记开始，以</head>标记结束 - 至少包含一个title 元素和一个meta 元素
- title元素
<title>和</title>之间文本是网页的标题，收藏和打印网页会显示标题- 搜索引擎会根据标题文本判断关键字相关性
- meta元素
- 描述网页特征。如字符编码
- meta标记独立使用
<meta charset="utf-8">
- 主体区域
- 配置网页内容
- 以
<body>开始，</body>结束
第一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>
标题元素
- 标题(heading)元素从h1到h6字号逐渐减少
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
段落元素
- 段落元素组织句子或文本。
<p>和</p>之间的文本显示成段落
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<P>
This is a sampleparagraph.Heading tags can help to make your pages more accessible and usable.It is good coding practice to use heading tags to outline the structure of your web page content.
</P>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
换行元素
- 换行元素
<br>使浏览器跳到下一行显示下一个元素或文本 - 换行标记单独使用，称void元素
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<P>
This is a sampleparagraph.<br>Heading tags can help to make your pages more accessible and usable.It is good coding practice to use heading tags to outline the structure of your web page content.
</P>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
块引用元素
<blockquote>和</blockquote>之间为引文块内容,左右两边都缩进
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee,the inventor of tje World Web,at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.
</blockquote>
</body>
</html>
短语原始元素
| 元素 | 例子 | 用法 |
|---|---|---|
<abbr> |
WIPO | 标识文本是缩写。配置title属性 |
<b> |
加粗文本 | 样式采用加粗字体 |
<cite> |
引用文本 | 标识文本是引用或参考，通常倾斜显示 |
<code> |
代码文本 | 通常使用等宽字体 |
<dfn> |
定义文本 | 标识文本通常是词汇或专业术语定义，倾斜显示 |
<em> |
强调文本 | 使文本强调或突出，通常倾斜显示 |
<i> |
倾斜文本 | 样式采用倾斜字体 |
<kbd> |
输入文本 | 标识用户输入的文本，等宽字体显示 |
<mark> |
记号文本 | 文本高亮显示 |
<samp> |
sample文本 | 标识是程序的示例输出，等宽字体显示 |
<small> |
小文本 | 用消字号显示的免责声明等 |
<strong> |
强调文本 | 使文本强调或突出，加粗显示 |
<sub> |
下标文本 | 在基线以下用效稳步显示的下标 |
<sup> |
上标文本 | 在基线以上用效稳步显示的上标 |
<var> |
变量文本 | 标识并显示变量或程序输出，倾斜显示 |
- 所有短语元素都是容器标记，有开始结束标记
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee,the inventor of tje World Web,at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality.<em>Access by everyone </em>regardless of disability is an essential aspect.
</blockquote>
</body>
</html>
标签：Web,显示,Level,元素,基础,HTML,文本,Heading 来源： https://www.cnblogs.com/yushihua/p/14902637.html