HTML前端开发

文章中的"<>"将会用引号代替

基本格式

文档类型 doctype

这是为了让浏览器知道我们使用的html版本,一般会在网页的最上端添加一个doctype声明,告诉浏览器网页的版本
html5 : “!DOCTYPE html” doctype大小写均可
如果不写文档声明,则会导致有些浏览器进入怪异模式(Quirks Mode) 无法正常显示;为了兼容旧页面,浏览器中设置了两种模式 :
标准模式(Standards Mode)
怪异模式(Quirks Mode)
怪异模式解析网页时会产生一些不可预期的行为

乱码问题

乱码出现的原因: ANSI自动以系统的语言保存, 字符集不同

计算机只认识0 1 ,在计算机中保存的内容都需要转换为0 1 两进制编码来保存,包括网页中的内容,在读取内容时,需要将二进制编码转为正确的内容
**编码: **依据一定的规则,将字符转换为二进制编码的过程
**解码: **依据一定的规则,将二进制编码转换为字符的过程
**字符集: **编码和解码所采用的规则
常见的字符集: ASCⅡ码,ISO-8859-1, GBK,GB2312, UTF-8

常用的标签

1.根标签 “html” “/html”

**在网页开始有一对根标签 " html" “/html”**有且只有一对,而且网页中的所有内容都要写到根标签下

根标签的两对子标签

① head标签: “head” “/head”
head标签中的内容不会在网页中直接显示
head标签也有一对子标签: title标签
“title” "/title"标签中的内容在标签页的标题中显示当搜索引擎在搜索页面的时候,会首先检索title中的内容
② body标签: “body” “/body”
页面中的所有的内容都应该写在body标签内

2. meta标签 (自结束)

标签格式: “meta /”
①可以用来设置网页关键字:
“meta name=“description” content=“发布h5等相关信息” /”
搜索引擎在检索页面的时候,会同时检索页中的关键字和描述,但是这两个值不会影响页面在搜索引擎中的排名
②使用meta可以用来做请求的重定向:
“meta http-equiv=“refresh” content=“5”,url=http://www.baidu.com” /"
(5秒后跳转到百度页面)
格式:“meta http-equiv=“refresh” content=“秒数”,url=目标路径(也可以使用相对路径)” /"
防止乱码: “meta charset=“utf-8” /” utf-8 与编码的字符集保持一致

3.标题标签 “h1” “/h1”

在html中标题标签一共有六级标题标签
标签格式: “h1” “/h1” ~“h6” “/h6”
在显示效果上,h1最大,但是我们主要关心标签的语义,我们使用的标签都是语义化的,6级标题中,h1最重要,表示一个网页中的主要内容,对于搜索引擎,h1重要性仅次于"title"标签,会影响网页在搜索引擎的排名,一般页面中只写h1-h3

4.段落标签 “p” “/p”

使用p标签来表示一个段落,但是p标签中的内容独占一行,并不会换行,而且在html中,多个空格与换行只会被当作是一个空格来解析,多个换行也一样,这时候用br标签来进行换行,br标签是自结束标签 格式:“br /”

5.分隔线标签 “hr /”

加分割线的标签," hr /",可以在页面中形成一条水平线

6.图片标签 “img /”

使用img标签来向网页中引入一个外部图片,img也是一个自结束标签

属性:

标签中的属性必须要有值,且值必须要加引号,单引号双引号都可以
src: 设置一个外部图片的路径
可以使用绝对路径与相对路径:
相对路径:如果是不在同一个文件夹下,可以使用 …/ 进行返回一级文件夹,目前我们使用的都是相对路径,如果是网页与图片分别位于不同磁盘,要使用绝对路径
alt: 可以用来设置在图片不能显示的时候,对图片的描述,实际上是可有可无的,搜索引擎可以通过alt属 性来识别不同的图片,如果不写alt属性的话,搜索引擎不会收录该图片
width: 可以用来设置修改图片的宽度,一般会用px作为单位
height: 可以用来修改图片的高度,一般使用px作为单位
宽度和高度两个属性如果只是修改其中一个则会保留原始比例对宽高都进行调整
一般开发中除了自适应的页面,不建议设置width和height

图片格式

常用:JPEG(JPG),GIF,PNG
**JPEG:**支持颜色比较多,图片可以压缩,但是不支持透明背景,一般用来保存照片等颜色丰富的图片
**GIF:**支持的颜色少,只支持简单的透明,支持动态图片,只支持直线的透明,用于图片颜色单一或者是动态图
**PNG:**支持的颜色多,并且支持复杂透明(使用较多)
效果不一致,选用效果好的,一致选择小的,颜色单一,十有八九用GIF.

7.超链接标签 “a” “/ a”

使用超练级跳转到指定页面
属性:
href: 指向链接跳转的地址,可以写成相对或者完整的地址 href是直接打开一个制定的页面,不是打开一个新的标签页
完整地址:"a href =“http://www.baidu.com”