1、HTML是超文本标记语言。(Hyper Text Markup Language)
2、HTML不是编程语言,而是一种标记性语言,标记语言是一套标记标签,HTML使用标记标签描述网页。
3、html文档的基本结构
<!DOCTYPE html>
<html>
<head>
<meta/>
<title></title>
</head>
<body>
</body>
</html>
4、<!DOCTYPE html>引用官方的DTD文件,主要是对标签引用的约束。但HTNL5不需要应用严格意义上的DTD文件。
5、html重要标签
(1)head标签是HTML文档的头部标签,成对出现<head>...</head>
(2)body标签是HTMl主题部分标签,成对出现<body>...</body>
-
head标签的主要元素
标签 | 用法 |
---|---|
title | 该元素用于定义文档标题 |
meta | 用于HTML页面元数据 |
scripe | 用于包含JavaScript脚本 |
link | 用于链接外部css资源文件 |
style | 用于定义内部css样式 |
(1) title标签
- 能在浏览器窗口中所能看到的,title标签使用户最看重的标签,是当前页面的主旨,应该将网站的最核心内容写到title中。
<title>我的第一个网页</title>
(2) meta标签
- 用于定义页面原信息
属性 | 用法 |
---|---|
http-equiv | 指定原信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确地处理网页内容 |
content | 指定元信息名称,该名称值可以随意指定 |
name | 指定元信息的值 |
<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
<meta name = "author" content = "zqn"/>
<meta name = "keywords" content="梦想,加油"/>
<meta name = "description" content="为了梦想成功要加油"/>
6、常见的块级标签
-
标题标签(从h1到h6字体大小依次变小)
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
-
段落标签(这三个p标签分别会成三个段落显示)
<body>
<h2>歌手曲目</h2>
<p>第一首:岑宁儿 追光者</p>
<p>第二首:jam 七月上</p>
<p>第三首:何洁 你要幸福啊</p>
</body>
呈现效果:
歌手曲目
第一首:岑宁儿 追光者
第二首:周柏豪 走狗
第三首:何洁 你要幸福啊
-
水平线标签(有一条水平线,用于分割)
<hr/>
-
有序列表标签
<h3>我喜欢吃的水果</h3>
<ol>
<li>橙子</li>
<li>圣女果</li>
<li>柚子</li>
</ol>
呈现效果:
我喜欢吃的水果
1.橙子
2.圣女果
3.柚子
-
无序列表标签
<h3>我想去的地方</h3>
<ul>
<li>北京</li>
<li>上海</li>
</ul>
呈现效果:
我想去的地方
- 北京
- 上海
-
分区标签(有几个div标签整体页面就会被分为几块,对网页进行整体分块布局)
<div>头部内容</div>
<div>导航内容</div>
<div>底部内容</div>
7、常见的行级标签(按行逐一显示,前后不会自动换行)
-
文本格式化元素
标签 | 用法 |
---|---|
<b> | 定义粗体文本 |
<i> | 定义斜体文本 |
< em > | 定义强调文本,实际效果与斜体差不多 |
< strong > | 定义粗体文本,与<b>的作用基本相同 |
< small > | 定义小号文本 |
< sub > | 定义下标文本 |
< sup > | 定义上标文本 |
< bdo > | 定义文本显示方向,内有dir属性,只能取ltr或rtl |
<ul>
<li><b>水</b>:H<sub>2</sub>O</li>
<li><i>氧气</i>:O<sup>2</sup></li>
<ul>
呈现效果:
- 水:H2O
-
氧气:O2
-
超链接标签
<a href="链接地址" target="目标窗口">链接文本或图片</a>
常用属性:
属性 | 作用 | |
---|---|---|
href | 指定超链接所关联的另一个资源 | |
target | 指定框架集中的哪一个框架装载另一个资源,该属性可以是_self、_blank、_top、_parent四个值,分别代表自身、新窗口、顶层框架、父框架来装载新资源 | ` |
<a href="http://baidu.com" target="_blank">百度网页</a><br/>
/*这条语句就是点击百度网页就会在新的窗口打开百度页面*/
-
图像标签
<img src="图片地址" alt="提示文字">
<p><a href="http://baidu.com" target="_blank">
<img src="lovely.jpg" alt="可爱的女生头像"/></a></p>
-
span标签(div标签和p标签)
<span>文本等行级内容</span>
-
换行标签
< br/ >换行
-
常用的特殊符号
空格 |   |
大于(>) | > |
小于(<) | < |
引号(“”) | " |
版权号 | © |