html5基础

html5基础

1. 浏览器内核

• IE Trident

• firefox Gecko

• Safari webkit

• chrome Blink 基于webkit

• Opera blink

• 移动端主要是webkit

2. html标签分类

常规标签（双标签）

<标签名>内容 比如 …

占主要 结束标签带有“/”

空元素

<标签名 /> 比如
需要结尾，比较少

3. html模板标签

	

​	



 

文档类型说明为html5的类型

页面语言类型

lang = “en” language类型 en为英文 zh-CN 中文 位置写在在标签内部，主要告知浏览器页面语言类型，以便浏览器处理

字符集存储类型

UTF-8最常用 另外还有

GB2312中文国标，包括6763个汉字

BIG5繁体中文 GBK则包含简体和繁体

utf-8支持全世界所有国家所需要的字符

若编码类型出错，解码出来则会乱码

lang主要主要在于原始网页内容的语言类型，而meta则是注重编码解码

4. 常用标签

标题标签有1-6级标题字号依次减小，字体变粗，一行一个标题

段落标签

---

水平线标签 单标签


换行标签 类似敲下回车行彼此间距较小（break）

盒子布局标签

div一行一般只放一个div，而span一行可以放几个

4.1 文本格式化标签

粗体文字 （XHTML建议使用strong）

斜体 （XHTML建议em）

删除线（XHTML建议del）

加下划线 （XHTML不赞成使用u）

4.2 标签属性

<标签名 属性1=“属性值1” 属性2 = “属性值2”.。。> 内容

4.3 img图像标签

属性	属性值	描述
src	URL	图形的路径
alt	文本	图片不能正常显示的替换文本
title	文本	鼠标悬停时文本
width	像素	图像宽度
height	像素	图像高度
border	数字	设置图像边框宽度

4.5 链接标签

单词缩写： anchor 的缩写 [ˈæŋkə®] 锚点，铁锚

文本或图像

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

注意

1. 外部链接需加上 http://

2. 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页 ,也可以使用id方式，跳转链接

3. 暂时是空链接时，可以使用href="#" 占位代替

4.5.1 base标签

1. base 可以设置整体链接的打开状态
2. base 写到 之间
3. 把所有的连接 都默认添加 target="_blank"

4.6 注释标签

         快捷键是：    ctrl + /       或者 ctrl +shift + / 

5. 路径

相对路径

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如。
下一级路径	“/”	图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images） 如。
上一级路径	“…/”	在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推， 如。

绝对路径

完整的路径以及网络地址

注意

绝对路径使用\相对路径使用/

6. 特殊字符

7. 表格标签

7.1 创建表格

    ...
  
  ...

  

    
单元格内的文字

1. table用于定义一个表格标签。

2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。

3. td 用于定义表格中的单元格，必须嵌套在标签中。

4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

注意

• 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签

• 中只能嵌套 类的单元格
• 标签，他就像一个容器，可以容纳所有的元素

7.2 表格属性

属性	含义	常用值
boder	设置边框 值0表示无边框	默认值 0 像素值
cellspacing	设置单元格与边框之间空白间隔	默认值 2 像素值
cellpadding	设置单元格内容与单元格边框之间的间距	默认值1 像素值
width	表格宽度	像素值
height	表格高度	像素值
align	设置对齐方式	left，center，right

7.3 表格头标签

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签替代相应的单元格标签即可。

th只是一种特殊的单元格，让自己里面的文字居中且加粗

7.4 表格标题

   
我是表格标题

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。

7.5 合并单元格

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

合并顺序

先上 后下 先左 后右 的顺序 ,找到目标单元格，确定跨行或跨列合并数，删除多余单元格

7.6 表格结构

表格分为三个部分：题头，正文，脚注——thead,tbody,tfoot

1. ：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签！
2. ：用于定义表格的主体。放数据本体 。
3. 放表格的脚注之类。

8. 列表与表单

8.1有序与无序

有序列表ol

  
列表项1
  
列表项2
  
列表项3
  ......

有序列表有序号

注意

1. 在 ol中只能嵌套li，直接在ol标签中输入其他标签或者文字的做法是不被允许的
2. li相当于是一个容器

无序列表

  
列表项1
  
列表项2
  
列表项3
  ......

8.2 自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

  
名词1
  
名词1解释1
  
名词1解释2
  ...
  
名词2
  
名词2解释1
  
名词2解释2
  ...

8.3 表单标签

组成

表单控件：包含具体的表单功能，如文本输入，密码框，复选框，提示按钮，重置按钮

提示信息

对于表单内容的提示性信息

表单域

相当于一个容器，包含有表单的所有内容，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法

8.3.1 input控件

常用属性

name属性：表单的区别属性，自定义，radio同组应有相同的名字

8.3.2 label标签

当点击label标签时，所绑定的表单自动获得输入焦点

绑定方式

1. 直接绑定

    用户名：    
   

2. for与name结合

   男
   
   

8.3.3 文本域

  文本内容

8.3.4 select下拉列表

  选项1
  选项2
  选项3
  ...

注意 select中至少包含一个option当其中一个option 中selected = ”selected“ 默认选中当前选项

8.4 form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

  各种表单控件

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

黑马前端全栈教程