一、HTML简介及文档结构
1、html简介
-
HyperText Markup Language
-
超文本标记语言
-
不是编程语言
-
纯文本
-
描述文档语义的语言
html就是负责描述页面的语义;css负责描述页面的样式;js负责描述页面的动态效果的。
2、html文档结构
SEO,search engine optimization,搜索引擎优化。
<!DOCTYPE html>
<!--文档类型定义,简称DTD-->
<html lang="en">
<!--语言:英语-->
<head>
<!--head头部,主要用来完成网页设置-->
<meta charset="UTF-8">
<!--
meta:元,完成对应设置
meta字符集属性:
国际编码,多字节
gbk编码
meta的其他属性:
<meta name="keywords" content="">
//找到网站的搜索关键字
<meta name="description" content="">
//网站的描述内容
-->
<title>Title</title>
<!--标题,显示在浏览器的标签栏中-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!--title前的logo-->
</head>
<body>
<!--网页内容-->
</body>
</html>
快速生成文档结构的方式:
- html:5 + tab
- ! + tab
<style>
/*引入外部样式文件*/
<link rel="stylesheet" href="style.css">
</style>
3、html特点
- 简易性
- 可扩展性
- 平台无关性
- 通用性
4、网页分类
- 静态
- 动态
二、主流浏览器及内核
1、主流浏览器
- Internet Explorer(IE)
- FireFox(火狐)
- Chrome(谷歌)
- Opera(欧朋)
- Sarafi(苹果)
2、浏览器内核
浏览器内核由渲染引擎和JS引擎两部分组成。
- Trident内核-----IE
- Gecko内核------FireFox
- WebKit内核------Safari和Chrome
- Presto内核-----Opera
- Blink内核------Chrome和Opera
国内大多数浏览器采用双核驱动:
- trident和webkit
- trident和blink
移动端:
- iphone/ipad:webkit内核
- android4.4以下版本webkit内核,4.4以上版本blink内核
三、html基本标签
语义化标签:明白每个标签的用途.
- 容器级的标签,里面可以放置任何东西;
- 文本级的标签,里面只能放置文字、图片、表单元素。
1、块级标签和行内标签
-
块级标签:独占一行,可以设置宽高,宽度默认铺满整行,块级元素内可以包含块级和行内元素。
-
行内标签:不会独占一行,不能设置宽高,只能包含行内元素。
-
相互转换
块级----->行内:display:inline;
行内----->块级:display:block;
举例:
<span>黑鸭</span>
<span>绝味</span>
<style type="text/css">
span{
display:block;
}
</style>
或者:
<span style="display:block;">黑鸭</span>
<span>绝味</span>
2、div和span
-
div:布局,块级标签
-
span:布局,行内标签
3、 hx 标题
大----->小 h1----->h6
<h1>我</h1>
<h2>我</h2>
<h3>我</h3>
<h4>我</h4>
<h5>我</h5>
<h6>我</h6>
4、段落标签p(文本级标签)
p:块级
<p></p>
5、换行br
br:单/空标签,行内
<br/>
6、水平线hr
hr:单/空标签,块级
<hr/>
7、图片img
<img src="" alt="">
src:图片路径,相对路径和绝对路径
alt:图片加载不出来出错时显示的文字
title:鼠标悬停在图片上的时候替代的文字
8、超链接a(文本级标签)
1、a标签属性
<a href=""></a>
- href:要跳转的地址
- title:表示鼠标悬浮的提示文字
- target:表示跳转的目标形式
- name:锚点
target属性值:
_blank(新窗口)
_self(默认,本身窗口)
_parent(返回父一级)
_top(返回最顶层)
2、a标签伪类
- a:link 未访问
- a:visited 已访问
- a:hover 鼠标悬浮
- a:active 点击鼠标时
3、锚点
跳转到指定的位置。
1.html:
<a href="#wdzp">点击我就查看我的作品</a>
2.html:
<a name="wdzp">我的作品</a>
或者:
<a id="wdzp">我的作品</a>
9、无序列表ul
ul
<ul>
<li></li>
<li></li>
<li></li>
</ul>
10、有序列表ol
ol
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
11、短文本引用q
浏览器会对q标签自动添加双引号。
12、地址信息address
为网页加入地址信息
13、表格标题摘要caption标签
为表格添加标题和摘要。
摘要的内容不在浏览器显示,作用是增加表格可读性。
四、HTML文本格式化标签
1、加粗b、strong(行内)
- b:加粗
- strong:加粗,强调(强调主要用于SEO,提取关键字)
2、倾斜i、em(行内)
- i:倾斜
- em:倾斜,强调
3、预格式化文本pre(块级)
保留换行和空格及宽度。文字的字号会小一号。
<pre>
预保留 换行
和空格
及宽度。
</pre>
4、文字缩小small(行内)
浏览器支持的最小字号12px。
5、文字放大big(行内)
big在html5中淘汰掉了,但并没有删除。
开发中尽量不去使用淘汰的标签。
6、文本下标sub
<p>X1+X2=Y</p>
X<sub>1</sub>+X<sub>2</sub>=Y
7、文本上标sup
<p>X2+Y2=Z</p>
X<sup>2</sup>+Y<sup>2</sup>=Z
五、html实体转义符
- < 小于号 <;
- > 大于号 >;
- 空格  ;
- " 引号 ";
- © 版权符号 ©;
- × 乘号 ×;
- ÷ 除号 ÷;
六、W3C
w3c规范由结构(html)、表现(css)、形(JavaScript)三部分组成。
- 万维网联盟
- World Wide Web
- 负责统一web相关的各项标准
1、标签嵌套原则
- 块级元素可包含块级元素和行内元素
- 行内元素只能包含行内元素
- 块级元素不能放在p里
- h1-h6、p、dt里不能包含块级元素
- 块级元素与块级元素并列,行内元素与行内元素并列
2、文件命名规范
- 项目开发时,不能用汉字或空格作为文件或目录名
- 文件和目录名一般以字母或下划线开头,后面可以出现字母、数字、下划线
- 首页必须是index.html
- 产品页product.html
- 订单页order.html
3、规范总结