新建一个
Html
文件
页面中的基础标签
HTML
的语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
告诉浏览器，当前的文档类型
DOC document
文档
TYPE
类型
HyperText Markup Language
超文本 标记 语言
超文本：文本内容 和 非文本内容（图片、 音频、 视频）
标记：
<
单词
>
语言：编程语言
<html></html>
根元素，在根元素之中包含两大块主要内容
<head></head>
网页的头部内容
head
<body></body>
网页的主体内容
body
，用于书写浏览器中展示的所有内容
<meta charset="utf-8">
定义字符的编码方式
,
万国码
<title></title>
网页的标题
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
可以设置网页小图标
https://www.bitbug.net/ ===>
比特虫网站制作
.ico
文件
文件快捷键
Ctrl + /
注释文本，被注释的文本，不会体现在网页之中
标签：
<
单词
>
， 也叫做 标记 ，也叫做 元素， 也叫做 盒子
双标签
:
封闭类型标签
有两个
<>
开始标签和结束标签
/
必须带上
<html></html>
单标签
:
非封闭类型标签
只一个
<>
/
可带可不带
,
建议带上
<meta />
<link />
HTML
提示：使用小写标签
HTML
标签对大小写不敏感：
<P>
等同于
<p>
。许多网站都使用大写的
HTML
标签。
HTML
常用标记
/
标签
/
元素
因为万维网联盟（
W3C
）在
HTML 4
中推荐使用小写，而在未来
(X)HTML
版本中强制使用小写。
<
标签 属性名
="
属性值
"
属性名
="
属性值
"></
标签
>
标签名字和属性之间需要有空格，键值对
属性和属性值之间需要
=
连接
每一组键值对 之间需要有空格
属性值需要带引号
常见的属性值
id="",class="",
<meta charset="utf-8">
人的体貌特征，
eg:
身高， 体重
体貌特征的值，
eg: 178cm, 75kg
0.
注释
<!-- -->
可以将注释插入
HTML
代码中，这样可以提高其可读性，使代码更易被人理解。
浏览器会忽略注释，也不会显示它们，合理地使用注释可以对未来的代码编辑工作产生帮助
快捷键
Ctrl + /
1.
标题元素
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
特点： 字号由大到小，
h1
最大，
h6
最小
自动加粗
有默认的间距
自动换行（独占一整行的意思）
应用
: h1
作为一级标题应用再文章标题或者是布局
logo
区域
h2
，
h3
作为的文章内部的标题
h4
，
h5
，
h6
根据实际情况进行使用
2.
段落元素
<p></p>
包裹一段描述性的文本
有默认的间距
在一个段落里面想使用空格
3.
换行的标签
<br/>
强制换行
4.
水平分割线
<hr/>
应用：分割区域内容
5.
字体加粗的标签
<b></b>
<strong></strong>
有强调的意思
6.
字体倾斜的标签
<i></i>
<em></em>
有强调的意思
7.
加下划线的标签
<u></u>
8.
加删除线的标签
<s></s>
<del></del>
有强调的意思
9.
加上角标的标签
<sup></sup>
10.
加下角标的标签
<sub></sub>
11.
字体标签
<font color="" size=""></font>
应用：通过
html
的手段设置字体颜色和大小
size
的取值范围为 从
1
到
7
的数字。浏览器默认值是
3
12.
图片标签
<img src="" alt="" title="" width="" height=""/>
src :
引入图片的路径
路径： 绝对路径和相对路径
绝对路径
:
指是某个目录或者网站的绝对位置，可以直达想要的目标位置
1
、某目录的直达位置
2
、某完整的网站地址
3
、必须是以本地直接打开的，不然无法显示，路径是无法匹配的
相对路径
:
以引用文件所在位置为参考基础，而建立的目标路径
1
、同级：目标文件和当前文件是同级
路径书写：目标文件的名字
.
扩展名
2
、下级：目标文件位于当前文件的下级
路径书写：目标文件所在文件夹名字
/
目标文件
.
扩展名
3
、上级：目标文件位于当前文件的上级
路径书写：
../
目标文件的名字
.
扩展名
alt
与
title
之间的区别？
alt :
图片不显示时显示的文本
title :
鼠标移入时显示的文本
网页上常用的图片格式
1
）
jpg :
有损压缩格式，靠损失图片本身的质量来减小图片的体积，
适用于颜色丰富的图像
;(
像素点组成的，像素点越多会越清晰
)
2
）
gif
：无损压缩格式，支持透明，支持动画，
适用于颜色数量较少的图像
;
3
）
png:
无损压缩格式，支持透明，不支持动画，
适用于颜色数量较少的图像
;
......
13.
超链接标签
<a href="" target="" id=""></a>
href :
链接指向的页面的
URL
target :
在何处打开链接文档
_self :
在当前窗口打开 （默认的）
_blank :
在新的窗口打开
id :
特殊标识，可用于
href
的直接跳转（用于锚点）
锚点链接，可以在同一页面内的不同位置进行跳转
第一步：在标签内加上
id = "
命名锚点名称
"
第二步：
<a href="#
命名锚点名称
"></a>
需要注意的是
!!!
在使用
a
标签的过程中，会出现无法继承父元素样式的情况，如 字体颜色
解决方案：
a { color:inherit; //
强制继承
}
或者 直接加
css
样式
常用的转义字符
标签的简单分类
14.
列表
+
有序列表
<ol type="1 / A / a / i / I ">
<li></li>
</ol>
- 1
数字
/ A
大写英文字母
/ a
小写英文字母
/ i
小写罗马数字
/ I
大写罗马数字
type
表示哪种类型
start
表示从第几个开始
+
无序列表
<ul type="disc / circle / square ">
<li>
无序列表
1</li>
</ul>
- disc
实心圆
/ circle
空心圆
/ square
实心方块
+
自定义列表
<dl>
<dt>
名词
</dt>
<dd>
名词解释
</dd>
</dl>
15.
容器标签
无实际意义
<div></div>
15.
容器标签
无实际意义
<span></span>
应用：更改一段文本中的一部分字体样式
,
优点是
span
本身没有任何样式
,span
前后不换行
16. iframe
标签
作用：
iframe
是用来在网页中插入第三方页面，早期的页面使用
iframe
主要是用于导航栏这种很多页面都相同的部分，
这样在切换页面的时候避免重复下载。
语法：
<iframe src="
规定在
iframe
中显示的文档的
URL(
默认的显示页面
)" width="" height=""
frameborder="1/0" name="iframe
名称
" scrolling="yes/no/auto"> </iframe>
frameborder="1/0" 1
代表有框架边框
/0
代表无框架边框
滚动条：
scrolling="yes/no/auto" yes :
有
no:
无
auto
：自动
<a href="" target="iframe
的
name
属性值
"></a>
表示超链接的目标地址在框架中打开
空格 ：
小于号
< : <
大于号
> : >
注册标识：
® ®
商标标识：
™ ™
版权标识：
© ©
Q:
了解其他的转义字符
HTML
元素一般分为块级元素和行内元素两种类型
标签的嵌套规则
接课堂练习
留课下练习
1
、块级元素：
<div>
、
<h1> ~ <h6>
、
<p>
、
<ol>
、
<ul>
、
<li>
等
特点：
1
：独占一行
2
：高度、行高、外边距以及内边距都可以控制
3
：宽度默认是父级容器宽度的
100%
4
：内部可以放块级或行内元素
注意：文字类的元素内不能存放块级元素
<p>
标签主要存放文字，因此
<p>
标签不能放块级，如：
div
2
、行内元素（内联元素）：
<span>
、
<b>
、
<i>
、
<a>
等
特点：
1
：相邻行内元素在一行上，一行可以显示多个
2
：高度、行高直接设置是无效的，
3
：水平方向的
padding
和
margin
可以设置，垂直方向的无效
4
：宽度默认是它本身内容的宽度
5
：行内元素只能容纳文本或则其他行内元素
注意：链接内不能放链接
<a>
可以放块级元素，但是给
<a>
转换一下块级模式最安全
1
、
<h1> ~ <h6>
、
<p>
可以直接包含行内元素和纯文本内容，但是不能直接包含块状元素
2
、
<ul>
、
<ol>
只能直接包含
<li>
元素，但是可以在
<li>
元素中包含其他元素
3
、
<dl>
只能直接包含
<dt><dd>
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
