Html学习笔记
一、Html是什么?
Html是一种超文本标记语言,它用来描述页面的结构。
二、HTML的标准格式
1.标准格式
标准格式:
<!doctype html> /*文档头信息声明*/
<html> /*根标签(一个网页内,只能有一个根标签)*/
/*
*head标签中的内容不会在网页中直接显示,
*它会帮浏览器解析网页
*/
<head> /*头部标签*/
<meta charest : "utf-8"> /*字符编码*/
/*网页标题标签*/
/*
默认显示在标题栏中,
搜索引擎检索页面时,会首先搜索title标签里的内容
故该标签会影响网页在搜索引擎中的排名
*/
<title>此处输入网页标题</title>
</head>
/*
*网页中所有展现的内容全部写在body标签中
*/
<body> /*网页主体标签*/
在此处输入网页内容
</body>
</html>
2.细节解析
(1).文档声明
代码如下:
<!doctype html> /*HTML5文档头信息声明*/
HTML版本中至少有三个版本正在广泛使用,为了让浏览器知道我们使用的HTML版本,就需要添加一个文档声明。
- 若不写文档头信息声明,浏览器可能会进入怪异模式
进入怪异模式后,浏览器的解析页面可能会导致页面无法正常显示
(2). 字符编码【乱码问题】
<meta charest : "utf-8"> /*字符编码*/
计算机仅认识二进制数,故在计算机中的任何内容都要转换成二进制编码,在读取时要将二进制编码转化为内容。
- 【编码】:根据一定的规则将字符转化为二进制编码的过程。
- 【解码】:根据一定的规则将二进制编码转化为字符的过程。
- 【字符集】:编码和解码所采用的规则。
I . ASCII码:美国编码
II . ISO-8859-1:欧洲编码
III . GB2312:中文默认编码
IV . UTF-8:万国码【支持全球语言】
V . ANSI:系统默认编码保存编码
- 【产生乱码的根本原因】:编码和解码所采用的字符集不同。
(3). meta标签
·1.【设置网页的关键字】
<meta name :"keywords" concent : "此处输入关键字"/>
·2.【指定网页的描述】
<meta name : "description" concent : "此处输入关键字"/>
·3.【做请求的重定向】
*语法:<meta http-equiv:“refresh” content:“秒数; url:目标路径”>
<meta http-equiv:"refresh" content:"5; url:www.baidu.com">
·4.搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但这两个值不会影响页面在浏览器器中的排名
(4). 标签的id属性
·在HTML中有一个id属性,每个元素都可以设置,该属性作为该标签独一无二的标识
一个确定的id属性在页面中只能出现一次,不可以重复
三. 常用标签
1.标题标签<h1>…<h6>
·在HTML中有六级标题标签,从h1到h6,重要性依次递减
·在六级标签中,h1最重要,重要性仅次于title
在搜索引擎检索完title后,紧接着就会检索h1标签,故h1标签会影响网页在搜索引擎中的排名
·一个页面按道理讲只能写一个h1标签,若写多个,会被浏览器默认为垃圾网页,不予收录
2. 段落标签<p>
·该标签用于表示一个自然段
·p标签中的内容,会默认独占一行,且段与段之间会有间距
3. 换行标签<br/>
·在html中字符间再多的空格,浏览器都会当做一个空格解析(换行也会当做一个空格解析),所以在页面中引入br标签来表示换行
·该标签是一个自结束标签
4. 水平线标签<hr/>
·作用是在网页中引入一条水平线
·该标签是一个自结束标签
5. 图片标签<img/>
(1)该标签用于引入外部图片,且该标签是一个自结束标签
(2)属性
·src:设置一个外部图片的路径。
·alt:在图片不能显示时,显示的对图片的描述。
浏览器可以通过alt属性来识别不同的图片,不写alt浏览器就不收录该图片
·width:修改图片的宽度。【单位:像素px】
·height:修改图片的高度。【单位:像素px】
6. 超链接<a><a/>
·使用a标签可以创建一个超链接
·使用超链接可以从一个页面跳转至另一个页面
·(1)属性
href:指向超链接跳转的地址(可以是相对地址也可以是一个完整的地址)
target:用于指定打开网页的位置可选值: _self:[默认值],在当前窗口打开
_blank:在新的窗口打开链接
·(2)占位符
创建超链接后,没有目标网址时,可以将超链接的href属性设置为“#”,那样超链接会变的可以点击,且点击后页面自动跳转至当前页面的顶部
·(3)利用id属性实现跳转
·语法:在href属性中添加**#id属性值**
点击超链接会跳转到该id属性所在的位置
·(4)发送邮件
·语法:href="mailto:邮件地址"
//a标签的属性
<a href="http://www.baidu.com">点击链接打开百度</a> //设置a标签的href属性
<a href="http://www.baidu.com" target:"_self">点击链接打开百度</a> //点击链接后在当前页面打开链接
<a href="http://www.baidu.com" target:"_self">点击链接打开百度</a> //点击后,新建一个页面打开链接
//a标签的占位符
<a href="#">点击跳转至页面的顶部</a> //设置a标签的href属性为“#”作为占位符
//利用id属性实现跳转
<a id:"bottom" href="#">点击跳转至页面的顶部</a>
<a id:"top" href="#bottom">点击跳转至页面的底部</a>
//a标签发送邮件功能
<a href="mailto:1361645965@qq.com">点击链接发送邮件联系我</a>
7. 居中标签<center></center>
·作用:center标签中的内容会在页面中默认居中显示
·语法:<center>
要居中的内容
</center>
四.实体
·在HTML中,一些如“>“、”<”这种特殊的字符不能直接使用,需要一些特殊的符号来表示这些字符,这些特殊符号我们叫做实体(或叫做转义字符串)
·语法:& + 实体的名字 + ;
【常见的实体】(本图截自W3SCHOOL离线手册)
五. XHTML语法规范
·1.HTML中不区分大小写,但我们一般使用小写
·2.HTML中注释不能嵌套
·3.HTML中,标签结构必须完整,要么成对出现,要么是自结束标签
浏览器会尽最大努力正确的解析页面,所有不符合语法规范的内容,浏览器都会尽最大的努力自动修正,但仍旧有可能会出现错误。
·4.HTML中,标签可以嵌套,但是标签不能交叉嵌套
·5.HTML标签中的属性必须有值且必须有引号
<div class :"wrong"><span>这是一个错误的交叉嵌套的标签</div></span> //错误写法
<div class :"right"><span>这是一个正确的交叉嵌套的标签</span></div> //正确写法