HTML Basic - 基础知识
HTML Basic - 基础知识
目标:
- 认识 html 元素
- html 属性
- html 头部
- html 标题
1. 认识 html 元素
开始标签 | 元素内容 | 结束标签 |
---|---|---|
<p> | 段落 | </p> |
<div> | 块级元素 | </div> |
<span> | 子元素 | </span> |
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。
1.1 元素基本语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素内容时位于开始标签和结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行闭合(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
1.2 Html 嵌套
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
1.3 HTML 文档实例
<!DOCTYPE html>
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
2
3
4
5
6
7
8
以上实例包含了三个 HTML 元素。
1.4 HTML 实例解析
<p>
元素:
<p>这是第一个段落。</p>
这个 <p>
元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>
以及一个结束标签 </p>
.
<body>
元素:
<body>
<p>这是第一个段落。</p>
</body>
2
3
<body>
元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>
以及一个结束标签 </body>
。
<html>
元素:
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
2
3
4
5
6
7
<html>
元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>
,以及一个结束标签 </html>
.
2. html 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:
name="value"
。
2.1 属性示例
<div class="div" id="box"> Div </div>
注意: 属性和属性值对大小写不敏感,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
3. html 头部
<head>
元素
3.1 <head>
元素包含了所有的头部标签元素。在 <head>
元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>
, <style>
, <meta>
, <link>
, <script>
, <noscript>
和 <base>
。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
meta 文档级元数据元素
- name: 元数据的名称
- content: 元数据的值
- charset: 字符集
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title 标题 -->
<title>html Head 描述</title>
<!-- CSS 样式部分 -->
<style></style>
<!--
link 引入全局文件
- rel: 描述文件引入类型
- href: 文件路径
-->
<link rel="stylesheet" href="">
<!-- script 用于书写 JS 代码, 也可以src引入JS文件 -->
<script src=""></script>
<!-- noscript 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。 -->
<noscript></noscript>
</head>
<body>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
标签 | 描述 |
---|---|
<head> | HTML head 元素 规定文档相关的配置信息(元数据),包括文档的标题,引用的文档样式和脚本等。 |
<title> | HTML <title> 元素 定义文档的标题,显示在Browser的标题栏或标签页上。它只应该包含文本,若是包含有标签,则它包含的任何标签都将被忽略。题 |
<base> | HTML <base> 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。 |
<link> | HTML 外部资源链接元素 (<link> ) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表,此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。 |
<meta> | HTML <meta> 元素表示那些不能由其它 HTML 元相关(meta-related)元素(base、link, script、style 或 title)之一表示的任何Metadata信息。 |
<script> | 定义了客户端的脚本文件 |
<style> | HTML 的<style> 元素包含文档的样式信息或者文档的部分内容。默认情况下,该标签的样式信息通常是CSS的格式。 |
4. html 标题
标题(Heading)是通过 <h1> - <h6>
标签进行定义的。
<h1>
定义最大的标题。 <h6>
定义最小的标题。
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。 因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。 应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4.1 html 注释
<!-- 这是一个注释 -->
开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要。