html简介
HyperText Markup Language
超文本标记语言
超文本
能够表达更丰富的内容（相对于普通文本）
标记：标识符号，就是html中的标签
语言
不是编程语言，就是html标签的描述
浏览器来翻译html代码
网页扩展名
.html .htm
[size=10.5000pt]
HTML文档结构
HTML框架基本构架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
解释：
带<>的都叫标签
html: 指明当前的文档的类型，是一个网页
head是网页头部 包括网页的相关信息，基本设置，其中title网站的标题就在里面。
body:在浏览器的看到的内容。
[size=10.5000pt]
html标签分类
双标签 <font>HTML</font>,有开始标签和结束标签（标记）
单标签 <br />
标签书写规范
所有的标签都在< >中
所有的标签都有开始和结束，即使是单标记也要结束
<br /> 强制换行
<img /> 图片标记
所有的标签和属性及值小写
标签和属性，属性与属性之间有空格
属性值必须有加引号（单引号或双引号都可以）
属性必须有值
属性可写可不写
标签与标签之间正确嵌套(标签不可交叉嵌套)
标签格式
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n”>控制的内容</开始标签>(双标签格式)
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n” 空格/>(单标签格式)
<开始标签 空格/>(单标签格式)
html注释
<!--注释内容-->
注释的内容在html页面中是无法看到的，但是可以在页面源代码中发现
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
> new document </
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=UTF-8"
/>
</
head
>
<
body
>
HTML注释
<!--这段文字是看不见的-->
</
body
>
</
html
>
文本的修饰
属性：
Color(颜色):red,blue,green,yellow,gray,pink等
Size(大小):值(1-7),默认值：3
字体最大尺寸为7，若比7大，则默认为7。字体默认尺寸为3，当出现对尺寸的加减时，就是对3进行加减
代码实现：
<html
>
<
head
>
<
title
> new document </
title
>
</
head
>
<
body
>
<
font
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"7"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"70"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"+1"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"4"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"-1"
>我的第一个网页</
font
><
br
/>
<
font
color
=
"green"
size
=
"2"
>我的第一个网页</
font
><
br
/>
</
body
>
</
html
>
HTML文本修饰标记
<big>相对默认文字大一些
<small>对默认文字小一些
<b>加粗
<strong>加强语气
<i>斜体
<em>斜体
<u>下划线
<s> 删除线
<ins><del>
<sup> <sub>
superscript 上标 subscript 下标
HTML排版标记
p 段落
自动在段前段后添加一个空白行
属性：align:值：left(左对齐,默认) center（居中对齐） right（右对齐）
br
强行换行<br />
hr
单标记 <hr />
属性：width 宽度：值:默认是像素，也可是百分比
align:对齐方式：left center right ，默认 center
color :颜色
noshade 阴影设置
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
> new document </
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=UTF-8"
/>
</
head
>
<
body
>
<
hr
width
=
"50%"
color
=
"blue"
size
=
"10"
noshade
=
"noshade"
>
<
hr
width
=
"50%"
size
=
"3"
>
<
hr
width
=
"50%"
size
=
"3"
noshade
=
"noshade"
>
</
body
>
</
html
>
h1-h6
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
> new document </
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=UTF-8"
/>
</
head
>
<
body
>
<
h1
>标题1</
h1
>
<
h2
>标题2</
h2
>
<
h3
>标题3</
h3
>
<
h4
>标题4</
h4
>
<
h5
>标题5</
h5
>
<
h6
>标题6</
h6
>
</
body
>
</
html
>
HTML字符实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
[size=12.0000pt]显示结果 | [size=12.0000pt]描述 | [size=12.0000pt]实体名称 |
[size=10.5000pt] | [size=12.0000pt]空格 | [size=10.5000pt] |
[size=12.0000pt]< | [size=12.0000pt]小于号 | [size=12.0000pt]< |
[size=12.0000pt]> | [size=12.0000pt]大于号 | [size=12.0000pt]> |
[size=12.0000pt]& | [size=12.0000pt]和号 | [size=12.0000pt]& |
[size=12.0000pt]¥ | [size=12.0000pt]元（yen） | [size=12.0000pt]¥ |
[size=12.0000pt]© | [size=12.0000pt]版权（copyright） | [size=12.0000pt]© |
[size=12.0000pt]® | [size=12.0000pt]注册商标 | [size=12.0000pt]® |
更多实体符号请访问W3C官方实体符号参考网站：
http://www.w3school.com.cn/tags/html_ref_entities.html
Pre:可定义预格式化的文本
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.
<div>和span区别块元素和行内元素
<div> 标签可以把文档分割为独立的、不同的部分
<span> 标签被用来组合文档中的行内元素。
如果不对span设置样式，他跟其他文本是没有区别的
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=UTF-8"
/>
</
head
>
<
body
>
<
div
style
=
"color:#00FF00"
>
<
span
style
=
"color:red"
>This is a header</
span
>
<
span
>This is a paragraph.</
span
>
This is a paragraph.
</
div
>
</
body
>
</
html
>
file:///C:\Users\itcast\AppData\Local\Temp\ksohtml\wps3AB5.tmp.jpg
