一. 结构中的每个标签的含义:
<!DOCTYPE>
<html>
<head>
<meta />
<title></title>
</head>
<body>
</body>
</html>
1 DOCTYPE:文档类型
DTD(Document Type Definition):文档类型定义
声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范.
1.1 HTML与xHTML包括的文档类型:
html:三种
xhtml:三种(html2.0版本)是一种相对html语法更加严谨的html;
文档类型 | 分类 | 备注 |
HTML | HTML Strict DTD | 请求比较严格的html类型 |
HTML Transitional DTD | 相对而言比较规范不太严禁 | |
Frameset DTD
| 框架级的类型 | |
xHTML | HTML Strict DTD | 请求比较严格的html类型 |
HTML Transitional DTD | 相对而言比较规范不太严禁 | |
Frameset DTD
| 框架级的类型 | |
html5 |
|
|
注意:
1.0将来在使用DOCTYPE的时候把html后面的所有的内容全部去掉,因为xhtml中的这些规范都过时了,因为h5问世。
2.0每个页面都必须设置一个doctype,如果不设置,浏览器会默认开启quirks mode(怪异模式)解析(quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式)。
2 Html标签:
作用所有html中标签的一个根节点。
lang:用来设置当页面的语言。
作用:
a.设置页面上主要使用语言的类型。
b.将来做SEO的时候在权重上起到一定的作用。
c.用于特殊设备上的设置。
3 Head标签:
作用:用于存放:
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title
4 Body标签:
作用:页面在的主体部分,用于存放所有的html标签:
p,h,a,b,u,i,s,em,del,ins,strong,img
5 Title标签:
作用:让页面拥有一个属于自己的标题。
有什么作用:
title中的文本在seo中占有很大的权重。
6 meta 标签:
注意:meta中设置的所有的内容在页面都不会显示。
常用用法:
1. Description:可以描述页面,可以用来使用百度程序(网络爬虫)来收录关键信息,以此提高页面的排名。
2. Keywords:关键词,可以用来提高页。面的关健词的比重(前升排名的一种方式。)
3. 字符集(编码格式):
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
Charset(字符集的格式):UTF-8.
注意:字符集(文字在电脑是存储的字典):
电脑是不能直接存储文字的,一般情况下电脑存储的是这个文字在“字典”里对应的位置。
gb2312---->gbk;
国标2312---->国标扩
所有一般看到乱码的原因是因为查找的字典不对:
我们做了一个小的例子:文档的内容用的是utf-8格式,而我们的存放文档的这个文件的格式是gbk,
7 Gbk,utf-8之间的区别:
相同点:都是字符的编码格式(字库)。
区别:
Utf-8:收录是全世界所有的语言中的文字。
Gb2313:收录了汉字,片假名。
大小:
Utf-8>gbk
性能:
Uft-8<gbk
约定:将来我们在整个学习过程中都用utf-8;
Utf-8存储一个汉字占3个字节,
Gbk存储一个汉字点占2个字节
Gb2312-->国标(国际标准)2312
GBK-->国标扩(国际标准的扩展)
二. 列表:
作用:页面有一些数据需要显示。
1 无序列表:
作用:显示一列没有排列顺序的数据。
语义:就是一组没有顺序的数据。
代码:ul:Unordered List li:List Item
<ul>
<li></li>
<li></li>
</ul>
注意:
1.0无序列表中的数据没有先后顺序之分。
2.0ul标签最好不要单独出现。
3.0ul标签是用来管理li标签。
4.0ul标签中只能放li标签。
5.0li标签中可以放其它标签。
6.0li标签是一个容器。
2 有序列表:
作用:显示一段有顺序的数据。
语义:一组有顺序的数据。
代码:ol:Ordered List
<ol>
<li></li>
<li></li>
</ol>
注意:有序列表中的所有数据都是顺序的。
现在一般情况下ul标签用的比较多,ol标签用的比较少。
3 自定义列表:
作用:显示一段数据,格式自己定义
代码:dl:Definition List dt:Definition Term dd:Definition Description
<dl>
<dt></dt>
<dd></dd>
</dl>
处理兼容性:
将所有的标签设置一个统一的样式。
三. 表格
总结:在早期的网站开发中,表格的使用非常的泛滥。
表格:不是没你不可,而是有你更好。
作用:用来将数据以表格形式显示出来。
代码:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性 | 作用 |
border | 给表格加上了边框 |
width | 给表格设置宽 |
height | 给表格设置高 |
cellspacing | 规定单元格之间的空白。 |
cellpadding | 规定单元边沿与其内容之间的空白。 |
虽然我们可以使用table中的标签来设置标签的一些样式,但是最好不要用,因为将来凡是与样式相关内容都是由css来设置的。
表格中的其它标签:
标签 | 作用 | 特点 |
<th></th> | 起到表头的作用 | 其中的文字加粗,居中 |
<caption></caption> | 给表格设置标题 | 在表格的最上面显示标题 |
<thead></thead> | 用来存放当前列的表头 | 如果没有加css页面默认将表头中的高度设置变小 |
<tbody></tbody> | 一般用来存放页面中的主体数据 | 如果不写会自动加上 |
<tfoot></tfoot> | 一般情况不会出现 |
|
四. 表单:
作用:收集信息。
1 表单元素
注册页面上能够填写的内容都是我们的表单元素。
作用:用来收集用户的信息,将来提交到服务器。
标签 | 属性 | 作用 |
input | type
| text:文本框 password:密码框 hidden:隐藏域 radio:单选框 checkbox:多选框 button:按钮 reset:重置 image:图片按钮 submit:提交 |
| value | 用于设置默认值(text,password,button) |
select | option | 下拉框 |
textarea |
| 文本域 |
注意点:如果想要多个radio或者checkbox组成一个选择集合,那么必须给每个radio以及checkbox都设置相同name属性。
如何给radion,checkbox设置默认值呢?
设置另外一个属性:checked=”checked”
我需要给下拉框设置默认值?
selected="selected"
2 Form标签:
为什么占击reset没有效果啊?
因为type=resrt的按钮只能在Form之中才能起作用。
作用:用来管理页面上的表单元素,表单元素如果要起作用,必须要放在form标签中。
属性 | 作用 |
action | 将所有的数据提交到action指定的页面 |
|
|
为什么提交之后没有将数据显示在地址栏上呢?
必须要给需要提交的标签加上name属性。
五. Html中空格的合并现象:
特点:无论在页面有同时出现多少个空格,缩进,换行,将来浏览器在解析的时候只会当一个空格显示。
结论:html中对空格,缩进,换行不敏感,如果同时出现多个空格缩进或者执行,页面只会把它们当作一个空格来解析。
特殊字符对应的转译符:
六. SEO与标签的语义化:
作用:用来优化网站,使用网站在搜索引擎上的排名先前。
百度是如何收录一个网站的信息的呢?
百度自己写的一个程序来收录每个网站的信息。
1)花钱买排名
a) 缺点:烧钱。
b) 优点:效果杠杠的。
2)将页面做成静态页面(html)..(了解)
3)发外链(网站就越受欢迎,将来被用户搜索出来的机会就要大)
4)页面的友好性(语义化规范):
标签语义化的应用:每个html标签都有属于自己的语义,有使用标签时候要一定要了解每个标签的语义,合理使用。(在合适的地方使用合适的标签。)
语义化的好处:
01对搜索引擎的友好(将来网络爬虫进入页面之后可以很方便的得到页面的重要信息。)
02提升用户体验
03利于代码的可读、维护、提高开发效率.
七. 没有语义的标签:
Html中大部分的标签都具有语义,所在使用的时候一定要注意。还有一部分标签没有语义,没有语义的标签一般只用来进行布局。
1 Div
<div></div>
特点:默认占一整行,并且一行里面只能显示一个。
2 Span
<span></span>
特点:大小由内容来决定,并且一行里面可以显示多个。
3 Div和span默认显示特点:
Div默认占一整行(根据浏览器的显示大小),div的高度是由div中的内容来决定的。
Span的宽度和高度都是由内容来决定。(行内元素,块级元素。)
八. 总结:
html:超文本标记语言。可以表示图片,音频,视频,超连接(a).
html的作用:用来页面的内容添加语义,用来确定html页面的结构。
html:决定页面的结构(给内容添加语义) 骨骼
Css: 决定页面的样式(使用页面更好看) 穿着
Javascript:决定页面的行为(使页面动起来)行为
无序列表:
l 苹果
l 西瓜
l 香蕉
有序列表:
1 一年级
2 二年级
3 三年级