导航
HTML：
超文本标记语言 HyperText Markup Language，是一种标记语言，用标记描述网页，是一种前端语言
每一个网页都有源码，查看方式：Ctrl+U / F12或许还能有意外发现
文章目录
- 导航
- 1.第一个简单的HTML网页
- 图示
- 2.简单网页的组成
- 简单网页的主体
- 内容
- head
- body
- 3.补充标记
- 标题段落相关标签
- 文本格式化标签
- 计算机输出标签
- 引文、引用、标签定义相关
- 4.标签格式
- 完
1.第一个简单的HTML网页
HTML层理清晰，从上到下依结构描述即可得到简单的网页
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>
Hello World!
</title>
</head>
<body>
<h1>
This is the biggest title.
</h1>
<h2>
This is the smaller title.
</h2>
<p>
This is the first paragraph.
</p>
<p>
This is the second paragraph.
</p>
<a href="https://www.baidu.com">
Click here to Baidu.
</a>
<br/>
<img src="picture.jpg" alt="This is a picture" width="105" height="140"/>
</body>
</html>图示
思维导图结构展示与实际观察视角
2.简单网页的组成
简单网页的主体
<!doctype html>
- 声明文档类型为HTML5文档
- 必须位于第一行,
<html>标签之前 - 对大小写不敏感，全大写√全小写√混合√
<html></html>
- 文档起始和结束标记
- 一切内容位于两个标记之间
< head></head>
- 文档的开头，不可见，包含文档的属性
<body></body>
- 网页的主体，可视部分
内容
head
-
<title></title>网页标题标签 -
<script></script>加载脚本标签 -
<style></style>预渲染网页标签 -
<base></base>默认链接地址标签
图像标签的常用属性：
属性 | 含义 |
href | 默认URL |
target | 打开方式 "_blank"新窗口打开，"_top"当前窗口打开 |
-
<meta/>网页原信息标签
原信息标签的常用属性：
属性 | 含义 |
name | 作者 |
content | 关键词或网页简述 |
charset | 指定字符集 |
http-equiv="refresh" content=“n” | 网页每n秒刷新一次 |
对于中文网页，需提前声明编码方式，一般为utf-8 另，某些浏览器默认为GBK，根据浏览器修改
-
<link></link>连接标签
连接标签的常用属性：
属性 | 含义 |
rel | 连接目标的名称 |
type | 连接目标的格式 |
href | 连接目标的URL |
常用于连接到外部的样表
body
-
<h1></h1>标题标签，从h1-h6共有六种大小样式 -
<p></p>段落标签 -
<a></a>超链接标签
超链接标签的常用属性：
属性 | 含义 |
id | 命名 对读者不可见 |
target | 打开方式 "_blank"新窗口打开，"_top"当前窗口打开 |
href | URL |
URL分为绝对、相对、锚
绝对：如该网页的根目录
相对：如网址
锚：如#书签。当href=#+id时，浏览可以快速定位到所指向元素
-
<br>换行标签 -
<img/>图像标签
图像标签的常用属性：
属性 | 含义 |
src | 图片URL |
border | 边框厚度 |
alt | 注释 |
weight && height | 大小 |
当图片无法加载时，图像呈空白并显示alt的值，alt一般不省略 需要图片作为超链接时，将图片标签置于超链接标签之间
3.补充标记
标题段落相关标签
标签格式 | 标签含义 |
| (注释标签) |
| 水平线标签 |
文本格式化标签
标签格式 | 标签含义 |
| 加粗标签*1 |
| 斜体标签 *2 |
| 缩放标签 |
| 上下标标签 |
| 插入字和 |
*1、*2： 一般是将后者代替前者使用，即二者呈现的效果相同。但二者含义不同。 后者实质是表示突出显示，而前者只有改变外观的含义。
计算机输出标签
标签格式 | 标签含义 |
| 计算机代码标签 |
| 键盘码标签 |
| 计算机代码样本标签 |
| 变量标签 |
| 预格式标签 |
举个栗子： Hello world!
此文本便是由计算机代码样本标签生成
引文、引用、标签定义相关
标签格式 | 标签含义 |
| 缩写注释标签 缩写置于title属性 |
| 地址标签 |
| 文字方向标签 方向置于dir属性 方向：ltr rtl |
|
短引用标签 引用URL置于cite属性 |
| 引用引证标签 |
| 定义项目标签 |
4.标签格式
HTML的标签严格封闭，分为成对和独立两种，大部分为成对标签
- 成对标签：包含起始标签和结束标签，结束标签前置正斜杠，内容置中
<关键字 属性1=“值1”……属性n=“值n”>内容</关键字> - 独立标签：只有关键字和后置正斜杠，独立使用
<关键字 属性1=“值1”……属性n=“值n”/>
一般要求标签为小写字母组成，属性为字符串形式,单双引号均可
