HTML知识点

Hyper Text MarkupLanguage（超文本标记语言）。
超文本包括：文字、图片、音频、视频、动漫等

W3C标准
*World Wide Web Consortium（万维网联盟）
*成立于1994年，Web技术领域最权威和具影响力的 国 际中立性技术标准机构
*W3C标准包括:
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、JavaScript ）

HTML基本结构

	 
		 
	 
	
        网页内容
 //主体部分 
	

注意：

1、< body>、等成对的标签，分别叫开放标签和闭合标签;

2 、 单独呈现的标签 （ 空元素 ）， 如

---

； 意为用 / 来关闭空元素 ;

页面规范声明DOCTYPE声明 （告诉浏览器使用什么规范）

    
    
    
         
     
    
        网页内容
     

声明当前网页类型

html一个页面的“根”结点

字符集编码，编码格式是 utf-8（三码合一）

只有三码合一，才能保证当前我们浏览的页面不会出现乱码

网页的标题

编写页面时注意一点：标签要成对出现（有开始标签，就会有结束标签）

body标签里写的内容都会在浏览器端呈现

body标签里都可以放什么？答：标题标签，段落标签、页面布局标签、无序列表标签

 页面编码设置

标签-用于定义文件信息

注意：

1 、 gb2312包含全部中文字符 ; utf-8 则包含全世界所有国家需要用到的字符

2 、 页面编码应与页面文件保存时的编码一致

标签	说明	例子
~	标题标签 (head)	清平乐 · 年年雪里
	段落标签 （paragraph ）	年年雪里 ， 常插梅花醉 ..
	换行标签 （break row ）	原文 ：
	水平线标签 （horizontal row ）	原文 ：
	斜体标签	朝代 : 宋代
	加粗标签	李清照

注释和特殊符号

特殊符号	字符实体
空格
大于号（>）	>
小于号（<）	<
引号（"）	"
版权符号	©

注释：

标签规范（XHTML标签规范）

1.标签名应小写

2.HTML标签应闭合

3.标签应正确嵌套

标题标签

h1、h2、h3、h4、h5、h6要成对出现

在一个页面中h1最多只能出现一次，如果出现多次，搜索引擎就会认为你是在作弊，严重情况下会k掉整个网站

h1-----一级标题（主标题）

h2----副标题、h3----副标题

h2-------h6(可以出现多次)

特点：1.文字大小逐级变小

           2.默认加粗

文字标签

默认的属性href------文字链接（指定跳转的页面）；

如果没给target属性和你给target="_self"，那么默认就是在当前选卡刷新href的链接所跳转的页面；

如果给target="_blank"-----那么在新的选项卡打开（推荐使用的）。

特点：

1.默认文字带有颜色；

2.浏览器默认的文字大小16px，12px字号最小，不能比12px再小。

段落标签

页面布局标签,块标签div；

 span标签：正常如果不添加任何样式，这个span是无意义的；此标签需要与样式一起使用；

p标签和div标签差异:

div标签默认没有上下外边距； p标签默认是有上下外边距（橙色区域margin）

图像标签

常见的图像格式

图像类型	优点	缺点
*.jpg	体积小 ， 较清晰 . 适合色彩丰富的图像	有损压缩 ， 画面失真
*.gif	体积小 、 支持动画图片 ， 较为常用的网页图片类型	支持有限的透明度 , 效果不如其他PNG图片
*.bmp	支持 24 位颜色深度 ， 兼容性好	不支持压缩 ， 容量大
*.png	最新的图片格式 ， 兼有 GIF 和 JPG的优势	部分浏览器 （ IE.6 ） 不支持透明

语法

src：图像路径（绝对路径或相对路径）

alt：图像的替代文字（无网络时，图片加载不出来）

title：鼠标悬停时的提示文字

width：图像宽度（px像素单位）

height：图像高度

超链接标签

链接文本或图像

herf：链接路径

target：连接在哪个窗口打开，常用值： _self、_blank

锚链接

1.从A页面的甲位置跳转到本页中的乙位置(同一页面)

2.从A页面的甲位置跳转到B页面中的乙位置(两个页面)

创建步骤

乙位置

甲位置

HTML列表

无序列表

    
列表项内容一
    
列表项内容x
    
列表项内容最后一项

说明：

1.没有顺序符号，每个

标签独占一行

2.默认

标签项前有实心小圆点

3.一般用于无序类型的列表，如导航，侧边栏新闻列表等

有序列表

    
列表项内容一
    
列表项内容x
    
列表项内容最后一项

说明：

1.有顺序符号，每个

标签独占一行

2.默认

标签项前有顺序标记

3.可通过修改

标签的type属性值(a,A等)更改

4.一般用于排序类型的列表，如试卷，问卷选项等

定义列表

    
咖啡
    
黑色的热饮料
    
Milk
    
白色的冷饮料

说明：

1.没有顺序符号,每个

、

标签独占一行

2.默认没有标记

表单

常见的表单元素

单行文本框（text）

单选按钮（radio）

复选框（checkbox）

提交按钮 （submit）

密码框（password）

文本选择框（file）

下拉列表（select）

重置按钮（reset）

文本域（textarea）

表单基本结构-

标签

form表单作用:用于将用户输入的数据提交到后台服务器

name: 表单提交时的名称

action: 表单提交到的地址

method:提交表单的方式

    … 文本框、按钮等表单元素…

注意：

action属性：如果为空则代表向当前页面提交

method属性：可选值 post | get

                        get方法提交参数在地址栏可见

                        post方法一般用于多数据、保密数据提交

面试常考------post与get提交方式的区别（建议用post方式提交）

1.数据提交的方式不同，get提交方式在地址栏中可以看到，post方式提交在地址栏中看不到

2.get一般用于提交少量数据，post用于提交大量的数据

3.get最多能提交1k数据，受浏览器的限制；post理论上无限制，受服务器限制

4.get提交的数据在浏览器历史记录中依然存在，安全性不好

表单基本元素-标签

input里的name和value是用来提交到后台的，value值可以为空，也可以写值（name必须要有）

单选按钮不给value值是不可以的，默认显示的是on--后台开发人员不清楚我们前端选择了男还是女

lable标签---没有实际意义，能绑定到input输入框上，它可以让input自动获取焦点（label的for属性与input的id绑定到一起）

注意：

type属性：可选值 text（默认）、password、button、checkbox、 radio等

checked属性： 仅与input type="checkbox"或input type="radio"配合 使用，选中值为 checked

type	功能
text	单行文本输入
password	密码
radio	单选
checkbox	多选
reset	充值表单数据
file	文件上传
submit	提交表单数据
hidden	隐藏域
button	普通按钮

其他表单元素

列表框

...

文本域

    文本内容

表单的高级用法

关联表单元素

姓名:


姓名:

只读属性
readonly：希望某个框内的内容只允许用户看，不能修改
禁用属性
disabled：因没达到使用的条件，限制用户使用

表格

表格基本语法

        ......
    
        ......
    

    
    

        
第1个单元格的内容
        
第2个单元格的内容
    

        
第1个单元格的内容
        
第2个单元格的内容

表格常用属性

属性	功能
width/height	表格的宽 / 高 ， 单位可以为像素 （ px ） 或百分比 （ % ）
border	默认为表格边框为 0 （ 无边框 ）， 可设置为数值
cellspacing	控制单元格之间的间距 ， 可设置为数值
cellpadding	控制单元格边框和其内容的间距 ， 可设置为数值
align	设置文本的水平对齐方式 ， 可为 left （ 左对齐 ， 默认），center （ 居中对齐 ）， right （ 右对齐 ）
valign	设置文本的竖直方向对齐方式 ， 可为 top （ 顶部）， middle （ 竖直居中 ）， bottom （ 底部 ）
bgcolor	设置背景色 ， 如 red ， #fff ， rgb(255,0,0)

表格的分组标签

表头

表格标题

页眉

数据主体

页脚

表格的跨行与跨列

跨列

 标签的 colspan 属性，值为数字，代表合并几列

跨行

标签的 rowspan 属性，值为数字，代表合并几行

框架结构

iframe>标签

作用：创建文档的内联框架

属性：

        src ( 需引入的文档路径 )

        width/height ( 设定框架的宽与高)

        scrolling (是否显示滚动条，auto | yes | no)

        frameborder( 是否要边框，1 显示，0 不显示)

        name ( 内联框架的名称)