1、HTML概述
HTML(Hyper Text Markup Language)：超文本标记语言
超文本：具备特殊功能的文本
普通文本：a
超文本：a，功能为超链接
普通文本：b
超文本：b，加粗显示文本
标签：Markup，规范了 超文本的组成形式
超文本a：<a>
超文本b：<b>
语言：Language，具备特定的语法规范
HTML是网页的设计语言，由HTML编写的语言的文件 以 .html 或 .htm 结尾。并且由浏览器负责运行
HTML开发及运行工具：
1、开发工具
记事本,超级记事本(Editplus)
2、运行环境(工具)
各款浏览器(IE,Firefox,Chrome,Safari,Opera)
2、HTML基础语法
1、标记语法
什么是标记？
在HTML中，用于描述功能的符号称为 标记
标记在使用过程中，必须用 <> 括起来
1、标记分类：
1、封闭类型标记
2、非封闭类型标记
2、标记语法
1、封闭类型标记：必须成对出现
<标记>内容</标记>
注意：封闭类型标记必须有结束 </>
ex:
1、a标签<a>百度</a>
2、b标签<b>百度</b>
2、非封闭类型标记：也称为 空标记，单标记
语法：
<标记>
或
<标记/>
ex:
<br/>
<hr/>
<img>
2、元素
元素，即标记，标签
1、元素嵌套:在一个元素中，允许出现另一个元素，形成更为复杂的语法结构
ex:
<a>
<img>
</a>
注意：
1、嵌套时注意顺序
<p><a></p></a> 错误
2、嵌套格式-缩进
被嵌套的内容前要通过 Tab 键表示缩进
<div>
<p>
<span></span>
</p>
</div>
3、属性和值
属性用来修饰元素的
语法：
<标记 属性="值" 属性="值"></标记>
ex:
<p align="center"></p>
属性：align：当前元素的文本的水平对齐方式
值：center：居中对齐
标准属性：
又称为通用属性，页面上所有的标记都会具备的属性
1、id
页面元素独一无二的标识
2、title
鼠标移入到元素上时所以是的内容
3、class(css中用)
定义元素的类选择器
4、style(css中用)
定义元素行内样式
4、注释
注释是不会被浏览器所解释运行的
<!-- 这里面的内容，
都是被注释掉的 -->
注意：
1、注释不能嵌套注释
<!--
<!--
<!--
-->
-->
-->
2、注释不能位于 <> 中
5、HTML 和 XHTML
1、HTML4.01
1999年12月24日 发布HTML4.01标准
2、XHTML1.0
2000年01月26日 发布XHML1.0标准
与 HTML4.01几乎相同
更严格，更纯净的HTML版本
要求单标记必须有结束:
<br/>
<br> xhtml1.0 错误
<p align=center></p> xhtml1.0 中错误
3、HTML5
目标：实现更为简洁的HTML
能少写就少写
能不写就不写
<p align="right"></p> 正确
<p align=right></p> 正确
<input readonly> 正确
<input readonly="readonly">正确
3、文档结构
1、文档类型声明
作用：指定文档的版本和类型
语法：
页面最顶端
<!doctype html>
2、html页面
语法：<html></html>
又称为 html根标记
内容：两个子元素
1、<head></head>
网页头部
作用：定义页面中的全局信息
包含如下内容：
1、<title>网页标题</title>
2、<meta charset="utf-8">
作用：指定网页的编码格式为utf-8
告诉浏览器按照utf-8的方式解析内容
注意：网页文件的编码也必须为 utf-8
1.title：定义文档的标题 <title>网页标题</title>
2.meta：定义网页的基本信息：编码格式，关键字，描述等，主要针对 "搜索引擎"
<meta charset="utf-8" />
作用：指定网页的编码格式为utf-8,告诉浏览器按照utf-8的方式解析内容
注意：网页文件的编码也必须为 utf-8
<meta name="keywords" content="关键词1,关键词2,关键词3">
作用：定义网页关键字
<meta name="description" content="描述信息">
作用：定义网页描述信息
3.base标签：设置超链接的基本设置，可以统一设置超链接的打开方式
<base target=”_blank”/> 所有超链接均打开一个新页面
4.<script>：定义或引用javascript
5.<style>：定义内部样式
6.<link>：引入外部样式
2、<body></body>
网页主体
包含的是显示个用户去看的内容
属性：
1、text
控制整个页面的文本颜色
2、bgcolor
控制整个页面的背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面向HTML</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>3、文本标记
a、特殊字符
1、在html中，任意多个空格，和回车，最后都会被解析成1个空格
2、由<>所包裹的文本，会当成标记被解析
3、通过 转义字符 的特殊表现方式表示特殊效果
< : < (less than)
> : > (greater than)
: 空格
© : ©
¥ : ￥
b、文本标记
1、文本样式
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup> 上标
<sub></sub> 下标
2、文字标签：<font> </font>
作用：修改文字的样式
属性:
size:文字的大小 取值范围1-7，超出7默认还是7
color：文字的颜色
3、标题元素
作用：以标题的方式显示文本
表现方式：
1、垂直的空白距离
2、不同的标题字体大小不同,加粗显示
3、独占一行
语法：
<hn></hn>
n : 1~6
<h1></h1> : 1级标题
<h6></h6> : 6级标题
4、段落元素
作用：在页面中表示一段独立的文本
表现形式：
1、具备垂直空白
2、独占一块
语法：
<p></p>
注意：p标记不能嵌套块级元素的(块元素看下面 10、行内元素 和 块级元素)
5、换行元素
语法：<br> 或 <br/>
6、分割线元素
作用：在页面中显示线条
语法：
<hr> 或 <hr/>
属性：
1、size ：尺寸，大小(以 px 为单位)
2、width ：宽度 (以 px 为单位)
3、align ：线条的水平对齐方式，取值,left,center,right
4、color：颜色
7、预格式化
作用：保留源文档中的格式。即保留源文档中所有的 回车和空格
语法： <pre></pre>
8、块分区元素 - div
作用：为元素分组，实现网页布局
表现形式：
1、独占一行
语法：
<div></div>
9、行内分区元素 - span
作用：设置同一行文本的不同样式
语法：
<span></span>
10、行内元素 和 块级元素
1 、块级元素
默认情况下，每个块级元素独占一行，即元素前后都会有换行
如：p,div,h1~h6,pre,... ...
作用：用在布局
2、行内元素
不会换行，可以和其它的行内元素或文本在一行内显示
如：span,s,b,i,u,sup,sub,... ...
作用：处理文本样式
3905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
