1、什么是HTML
HTML(Hyper Text Markup Language),超级文本标记语言
超文本: a
标记 : 超文本都是由标记组成的<a>
语言 : 包含自己独特的语法
HTML最终由浏览器负责解释
HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript
2、HTML版本
超级文本标记语言(第一版) HTML2.0 HTML3.2 HTML4.0 HTML4.01 XHTML1.0 HTML5
声明使用的html版本和风格 <!doctype html>
2、html页面
1)文档根元素
每个文档有且仅有一对根元素 , html
2)在根元素的内部,包含两对子元素
1⃣️head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件
2⃣️body : 页面的主体内容
任何一个标签,都可能会出现在body中
3)head元素
1⃣️声明网页标题
<title></title>
2⃣️定义网页文本编码格式
默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
4)body元素
属性:
text : 文本的颜色
转义字符:
空格:
< : < less than
> : > greater than
版权标识:©
2)文本标记
1⃣️文本样式
<b>...</b> : 加粗文本 <i>...</i> : 斜体文本 <u>...</u> : 下划线 <s>...</s> : 删除线 <sup>...</sup> : 上标 <sub>...</sub> : 下标
2⃣️标题元素
1-6级6个标题 <hn></hn> n:1-6
一级最大 六级最小
3⃣️段落元素
提供了结构化文本的表现方式
语法:<p></p>
注意:
1、每对p标签单独成一个段落 2、段落与其他元素有垂直空白,段落间距
常用属性:
align : 水平对齐方式 取值:left center right
4⃣️换行元素
在代码的任何位置处,实现回车的效果 <br />
5⃣️水平线
又叫分割线
<hr />
属性:
1、size : 水平线的粗细,通常以像素(px)为单位
2、width: 宽度
3、align: 水平线的水平对齐方式
4、color: 颜色
6⃣️分区元素
目的:为元素进行分组,多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意:
div :主要用在布局上
span:修改其内部内容的样式
7⃣️预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3)注释
可以写在html源码中,但不被浏览器解释的文本
语法:
<!-- 注释内容 -->
4)行内元素与块级元素
块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div,hn,hr,p
块级元素作用:布局
行内元素:默认情况,多个元素位于同一行,不会换行
span,文本标记... ...
行内元素作用:修改内部内容的样式
HTML(Hyper Text Markup Language),超级文本标记语言
超文本: a
标记 : 超文本都是由标记组成的<a>
语言 : 包含自己独特的语法
HTML最终由浏览器负责解释
HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript
2、HTML版本
超级文本标记语言(第一版) HTML2.0 HTML3.2 HTML4.0 HTML4.01 XHTML1.0 HTML5
3、文档结构
1、文档类型声明声明使用的html版本和风格 <!doctype html>
2、html页面
1)文档根元素
每个文档有且仅有一对根元素 , html
2)在根元素的内部,包含两对子元素
1⃣️head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件
2⃣️body : 页面的主体内容
任何一个标签,都可能会出现在body中
3)head元素
1⃣️声明网页标题
<title></title>
2⃣️定义网页文本编码格式
默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
4)body元素
属性:
text : 文本的颜色
bgcolor : 背景颜色
4、文本标记
1)特殊的文本转义字符:
空格:
< : < less than
> : > greater than
版权标识:©
2)文本标记
1⃣️文本样式
<b>...</b> : 加粗文本 <i>...</i> : 斜体文本 <u>...</u> : 下划线 <s>...</s> : 删除线 <sup>...</sup> : 上标 <sub>...</sub> : 下标
2⃣️标题元素
1-6级6个标题 <hn></hn> n:1-6
一级最大 六级最小
3⃣️段落元素
提供了结构化文本的表现方式
语法:<p></p>
注意:
1、每对p标签单独成一个段落 2、段落与其他元素有垂直空白,段落间距
常用属性:
align : 水平对齐方式 取值:left center right
4⃣️换行元素
在代码的任何位置处,实现回车的效果 <br />
5⃣️水平线
又叫分割线
<hr />
属性:
1、size : 水平线的粗细,通常以像素(px)为单位
2、width: 宽度
3、align: 水平线的水平对齐方式
4、color: 颜色
6⃣️分区元素
目的:为元素进行分组,多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意:
div :主要用在布局上
span:修改其内部内容的样式
7⃣️预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3)注释
可以写在html源码中,但不被浏览器解释的文本
语法:
<!-- 注释内容 -->
4)行内元素与块级元素
块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div,hn,hr,p
块级元素作用:布局
行内元素:默认情况,多个元素位于同一行,不会换行
span,文本标记... ...
行内元素作用:修改内部内容的样式