HTML快速入门(重点)
1、HTML概述
1、什么是HTML
Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件
WEB页是由HTML编写而成
HTML：(Hyper Text Markup Language),超文本标记语言
a : 26个字符中的首字符
超文本a:超链接的功能
b : 26个字符中的第二个字符
超文本b:给文字加粗
Markup :标记，规定了超文本的组成形式，是由标记组成
超文本a:<a>
2、HTML基础语法(重点)
1、标记语法(Markup)
1、作用
HTML用于描述功能的符号称之为"标记"
2、语法
标记 必须用 尖括号"<>" 括起来
<a></a>：超链接
<b></b>: 加粗文本显示
<p></p>: 段落
标记分类：
1、封闭类型标记-双标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记，有开始，必须有结束，否则会有意想不到的效果
2、非封闭类型标记-单标记
也称之为 空标记
<标记>
或
<标记/>
<br>:换行
<hr>:一条横线
<img>:图像
2、元素
元素即标记
<a>测试文本</a>
1、元素嵌套
元素(标记)中又嵌套元素(标记)，形成更复杂的语法结构
编写嵌套代码时，一定要注意嵌套顺序和格式
ex：a标记，嵌套b标记
<a>
<b>
<br/>
</b>
</a>
2、属性 和 值
1、作用
用来修饰元素
ex:让 p 标记的文本水平居中对齐
<p>Hello World</p>
2、语法
1、属性的声明必须位于开始标记里
<标记 属性></标记>
2、属性都可以有值，属性和值得表现方式 属性="值"
<标记 属性="值"></标记>
3、一个元素中允许出现多属性和值，中间用 空格 隔开，并且排名不分先后
<标记 属性="值" 属性="值"></标记>
ex:给 一对 p 标记 设置 align属性，值为 center
<p align="center"></p>
3、标准属性
每个元素都有自己的特有属性
有些属性是所有元素都支持的，称为标准属性
1、id:元素在页面中的唯一标识
2、title:鼠标移入到元素时所提示的文本内容
3、class：元素引用的类选择器(与样式相关)
4、style:元素定义的内联样式(与样式相关)
3、注释
1、作用
在编辑文档下可见，在浏览器展示页面时并不显示的内容
2、语法
<!-- 注释内容 -->
3、注意
1、注释不能嵌套
<!--
<!-- 这是注释 -->
-->
以上结构-错误
2、注释不能位于<>中
<p<!-- 注释内容 -->>
以上结构-错误
4、HTML 和 XHTML
3、文档结构
1、HTML文档结构
1、文档类型声明
作用：指定使用的HTML版本和风格
<!doctype html>
2、html页面
<html></html>
位置 位于 doctype 之下
包含以下两对子元素
1、<head></head>
网页头部内容
2、<body></body>
网页主体
3、html页面-<head>
1、作用
定义页面全局信息
2、包含以下子元素
1、<title>标题</title>
网页标题
2、<meta>
定义页面元数据
<meta charset="utf-8">
注意：设置网页编码的同时，保证网页文件的编码也为utf-8
4、html页面-<body>
网页显示的主体内容
属性：
1、text
控制网页文本的颜色
2、bgcolor
控制网页的背景颜色
3、文本标记(重点)
1、概述
1、作用
通过文本标记，改变文本的默认样式
2、特殊字符
< 表示 <
> 表示 >
表示 一个空格
© 表示 ©
¥ 表示 ￥
2、文本标记
1、文本样式
<b>...</b> : 加粗
<i>...</i> : 斜体
<u>...</u> : 下划线
<s>...</s : 删除线
<sup></sup>:上标
<sub></sub>:下标
2、标题元素
作用：在页面中完成标题效果的显示(突出显示大小和加粗效果)
<h#></h#>
#:1~6
一级标题(最大)~六级标题(最小)
特点：
1、每个标题 独占一行
2、每个标题 都具备上下垂直空白
属性：
align：文本水平对齐方式
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
3、段落元素
特点：
1、独占一行
2、上下垂直空白
语法：<p></p>
4、换行
语法：<br/>
5、分割线元素
语法：<hr/>
属性：
1、size:尺寸,取值是一个以px(像素)为单位的数字,单位可以省略
2、width：宽度，取值数字，同上
3、align ：分割线的水平对齐方式left,center,right
4、color ：颜色
6、块分区元素-div
语法:<div></div>
特点：
独占一行
作用：布局
7、行分区元素-span
语法：<span></span>
注意：多个span会在一行内显示
作用：包裹文本，并设置文本样式
8、块级元素与行内元素
1、块级元素
默认情况下，会独占一行的元素就是块级
<h#>,<p>,<div>
作用：布局
2、行内元素
不换行，多个行内元素都在一行内显示
i,b,s,u,sub,sup,span
作用：处理文本显示效果
9、预格式化
作用：保留原文档中的格式，即保留文档中的回车和换行
语法：<pre></pre>
网友评论