1.浏览器内核
2.网页中web标准三层组成
结构(structure):用于对网页元素进行整理和分类(html)
表现(presentation):用于设置网页元素的版式,颜色,大小等外观样式(css)
行为(behavior):网页模型的定义及交互的编写(javascript)
3.html超文本标记语言(Hyper text markup language)
用来描述网页,不是编程语言,是标记语言,标记语言是一套标记标签(markup tag)。
4.html作用
网页是由网页组成的,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以现实给用户了。
5.超文本
超文本即超越文本限制,可以有图片链接音频等。不仅如此,它还能从一个文件跳转到另一个文件,于世界各地主机的文件连接(超级链接文本)。
6.html骨架标签
html标签、头部标签、网页标题标签、主体标签
7.html元素标签分类
常规标签(双标签(开始标签,结束标签))
内容
空元素(单标签)
8.html标签关系
嵌套关系(包含关系、父子集关系)
并列关系(兄弟姐妹关系)
9.开发工具
sublime text生成html骨架结构快捷键:输入!或者html:5然后按tab键。
10.html模版
版本号
语言
字符集
常用字符集:
gb231 简单中文,包括6763个汉字
BIG5 繁体中文,港澳台等用
GBK 包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8 基本包含全世界所有国家要用到的字符。(注意格式,大写和连字符)
11.html标签的语义化
所谓标签语义化,就是指标签的含义
标签语义化目的:根据标签的语义,在合适的地方给一个最为合理的标签,让结构更加清晰。
优点:
方便带吗的阅读和维护。
让浏览器或者网络爬虫可以更好地解析,从而更好分析其中的内容。
使用语义化标签会具有更好的搜索引擎化。
12.html常用标签
1.排版标签:网页布局中最常用的标签,显示网页结构的标签,主要和css搭配使用
1)标题标签 h (共有6级)
一级标题文本
二级标题文本
三级标题文本
四级标题文本
五级标题文本
六级标题文本
2)段落标签 p
第一段文本
第二段文本
第三段文本
3)水平线标签 hr (是单标签)
4)换行标签 br(单标签)
5)div和span标签
没有语义,就是个盒子用来装元素的
特点:一行一个div,多个span在一行。
内容
内容
2.文本格式化标签:对文字设置粗体,斜体,下划线等
1)粗体
和 : b只是加粗,strong除了加粗还有强调的意思,语义更强烈。
2)斜体
和:后面语义更强烈
3)删除线
和:后面语义更强烈
4)下划线
和:后面语义更强烈
补充: 标签属性
<标签名 属性1="属性一" 属性2="属性二" ...> 内容 标签名>
3.图像标签
图像标签的标签属性:
注:如果要使图片等比例缩放,width和height改一个即可,另一个会等比变化。
4.链接标签:a,anchor的缩写
文本或图像
注意
1)外部链接:需要添加例如 http:// www.baidu.com
2)内部链接:直接链接内部页面名称即可,如
3)空链接:如果当前没有确定链接目标,通常将链接目标设置为“#”,即href=“#”
4)不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接,如:
5)target标签属性:用于指定页面的打开方式,值为self或_blank,self为默认值,表示在当前页面打开(覆盖当前页面),_blank表示在新的页面打开。
5.注释标签
6.路径
1)相对路径:以引用文件的网页的当前位置为参考基础而建立出来的文件路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称为相对路径。2)绝对路径:文件的完整本地位置(不推荐),或文件的完整网络地址
13.锚点定位
通过创建锚点定位,用户能够快速定位到目标内容。
步骤:
1.用id名标注跳转目标的位置。(要跳转到的)
第二集
2.创建链接文本。(被点击的)
14. base标签
设置整体链接打开方式
Document
百度
搜狐
新浪
网易
15.预格式化文本
保留空格和换行符
Document
白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
16.特殊字符
17.表格table
1.标签:
表格标签
基本语法
单元格内的文字
...
...
2.表格属性
姓名
年龄
性别
张三
17
女
里斯
50
女
3.表头单元格标签 th
表头单元格内文字居中加粗
姓名
年龄
性别
张三
17
女
里斯
50
女
4.表格标题 caption
个人信息表
姓名
年龄
性别
张三
17
女
里斯
50
女
5.合并单元格
跨行合并:rowspan="合并单元格个数"
跨列合并:colspan="合并单元格个数"
合并单元格顺序:先上后下,先左后右。
合并单元格三部曲:
1)先确定是跨行还是跨列
2)根据先上后下,先左后右的顺序去找目标单元格,然后写上合并方式和要合并的单元格数量,比如:
3)删除多余的单元格
个人信息表
姓名
年龄
性别
张三
17
里斯
50
女
6.注意
1)表格定义了html中定义表格数据的方法,(不能用来做页面布局)。
2)表格由行和行中的单元格组成(没有列),列的个数取决于每行中单元格的个数。
3)表格不要纠结于外观,那是css的作用。
7.表格划分结构
thead、tbody、tfoot
Document
个人信息表
姓名
年龄
性别
张三
17
女
里斯
50
女
信息地址
白塔堡
18.列表标签
表格是用来显示数据的,列表就是用来布局的,因为非常整齐和自由。
列表概念:容器里面装载着结构、样式一致的文字或图表的一种形式,叫列表。
列表特点:列表的最大特点就是整齐、整洁、有序,跟表格类似,但是他可组合自由度会更高。
1.无序列表 ul(重点)
无序列表的各个列表项之间没有没有顺序级别之分,是并列的。其基本语法格式如下:
!!!ul标签里面只能有li,不能有其他任何标签。li只有在ul里才有意义。li里面可以放任何标签。
- 列表项1
- 列表项2
- 列表项3
2.有序列表 ol
所有特性基本与ul一致,但是实际中比无序列表用得少很多。
- 列表项1
- 列表项2
- 列表项3
3.自定义列表 dl
定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号,其基本语法如下
- 沈阳
- 和平区
- 浑南区
- 铁西区
- 大东区
- 北京
- 昌平区
- 海淀区
- 大兴区
- 东城区
19.表单标签
作用:为了收集用户信息
1.input标签
1)type属性:设置不同的属性值用来指定不同的控件类型。
除了type属性还有别的属性。
2)value属性:为默认的文本值(input框里的提示文字)。
3)name属性:name是表单控件的名称,后台可以通过name这个属性找到对应的表单。一组radio或一组checkbox的name是相同的。
性别:
男
男
爱好:
爬山
睡觉
足球
4)checked属性
定义选择空间默认被选中的项
性别:
男
女
爱好:
爬山
睡觉
足球
5)button普通按钮
6)submit提交按钮
7)reset重置按钮
8)图片提交按钮
必须包含src属性
9)文件域
用来上传文件
2.lable标签
概念:lable标签为input元素定义标注
作用:用于绑定一个表单元素,当点击lable标签的时候,被绑定的表单元素就会获得输入焦点。
如何绑定?
1)第一种方法就是用lable直接包裹input表单。适合单个表单选择。
2)第二种用法用for属性和id规定lable与哪个表单元素绑定
3.文本域 textarea
双标签
多行文本输入框
cols="每行中的字符数" rows="显示的行数"实际开发中不会用,直接用css设置。
4. select下拉列表
实际开发中用得比较少(可用div和li代替),因为select在不同浏览器的显示可能不同,而且select样式局限比较丑。
select中至少包含一个option。
在option中定义select="selected"时,当前选项即为默认选中项。
20.form表单域
通过form表单域将收集到的信息传递给服务器。