HTML学习总结
2015-10-25 20:20
591 查看
HTML学习总结
一、网页结构类标记
- 所有html文档拥有三个文档级元素：html、head、body<br/>单标记和双标记两种类型。
- 告知浏览器文档使用哪种html或哪种xhtml规范：<!doctype html...><BR/>
其中，版本主要分为严格版本、过度版本和基于框架的html文档
- HTML文档标记格式：`<html>……</html>`
- HTML文件头标记格式：`<head>……</head>`
- HTML文件标题标记格式：`<title>……</title>`(在浏览器的标题栏中显示)
- HTML文件说明信息标记,声明编码语言：meta元素（定义在head元素里面，可放关键
字、作者信息等）:`<meta http-equiv="" content="" /><meta name="" content="" />`
- 网页上显示的主要内容与显示格式`<body>……</body>`
二、文档处理
- 段落标记格式：`<p align=“center”>……</p>`
- 标题标记格式：`<hn align=“”>……</hn>(n=1~6)`
- 换行标记格式：`<br/>`
- 水平线标记格式：`<hr align="" size="" width="" color=""/>`
- 注释标记格式：`<!--……-->`
- 设置网页的背景色:`bgcolor`
- 设置网页的背景图像:`background`
- 设置网页文本的颜色:`text`
- 引文文本：`<blockquote/>`
- 列表：`<ul><li>...<li></ul>`(无序列表)、`<ol><li>...<li></ol>`(无序列表）`<dl><dt>..<dd>..</dt></dl>`（定义列表）<BR/>
ol属性：
type=“ ” 设置编号方案
start=“ ” 由某个数字或字母开始
ui属性：
type=“ ” disc 实心圆点（默认值）、circle空心圆点、square方形<BR/>
li属性：
type=“ ” 设置编号方案；
value=” “ 设置开始的序号，仅用于有序列表
- 预编排文本`<pre>...</pre>`
- 超链接` <a href="URL" title=”xxx“></a>`（其中，src中相对路径和绝对路径）
- 图形 `<img src=“” title=“” border=“” align=“” width=“” height=“” />`
- 表格 `<table><tr><td>...</td></tr></table>`<BR/>
table属性:
Border 设定表格边框粗细
borderColor 设定表格边框的颜色
width和height 用来设定表格宽度和高度
Cellspacing 用来设定单元格之间的间隙。
Cellpadding 用来设定单元格格内部空白。
Bgcolor 设置表格的背景颜色
Background 设置表格的背景图像
Align 设置表格的对齐方式：center,left和right<BR/>
tr属性：
Align 设置单元格中内容的水平对齐位置
Valign 设置一整行单元格内容的垂直对齐
Bgcolor 设置表格的背景颜色
Background 设置表格的背景图像<br/>
td属性：
colspan=" " 设置列合并
rowspan=" " 设置行合并
border=""(1代表显示边框)
- 字符风格：斜体：`<i>……</i>` 下划线：`<u>……</u>` 删除线：`<strike>……</strike>` 以较大字体显示：`<big>……</big>` 以较小字体显示 `<small>……</small>` 上标`<sup>……</sup>` 下标`<sub>……</sub>` 粗体：`<STRONG>..</strong>`
- 字符格式：`style="font-size：xxx"` or `<basefont face=" " size=" " color=" " /`>
三、表单
- 表单结构
`<form name=“” action="URL" method="get|post”>`
其中，get为收到，post为传递，action用来设定将要处理表单的URL，一般是一个服务器端的脚本文件
- 文本框
`<input type=“text” name=“” maxlength=“” size=“” value=“”>`
其中，maxlength为可输入的最大字符数，size为显示的最大字符数，readonly为只读，当type为password时，输入文字显示为”*“号；
- 复选框
` <input type=“checkbox” name=“text” value= ““>`
其中，若写出checked，则初始状态默认选取该项，其次name应取不同的值，如果相同则会形成一个数组，value属性的参数值将传送到后台服务器，必须与选项内容相同或基本相同
- `<input type="radio" name="radio" value="">`
其中，形成单选，通过多个单选框的name相同构建组，若写出checked，则初始状态默认选取该项
- 文件上传
`<input name="file " type="file" >`
其中，Accept用来设置浏览文件时默认能看到的文件类型，Disabled:设置当前状态不能用，Readonly设置当前不接受用户的输入
- 菜单列表框
`<select name=“” multiple="multiple" size="" >
<option>菜单项</option>
<option>菜单项</option>
</select>`
其中，multiple表示允许用户从列表中选择多项，去掉将显示为普通下拉框，size属性的值是数字，表示显示在列表框中选项的数目,若加入selected表示该选项在初始时被选中
- 多行文本输入框
`<textarea name=“” rows=“” cols=“”></textarea>`
其中，wrap是文本自动换行
- 提交按钮
` <input type="submit“ name=“button” value="提交">`
其中，在一个表单中必须有提交按钮，否则将无法向服务器传送信息，disabled设置当前状态不能用；
-重置按钮
`<input type="reset“ name=“button” value="重置">`
- 普通按钮
- `<input type=“button“ name=“button” value=”按钮”>`
四、其他
- 跑马灯：
`<marquee behavior=“”（滚动方式） direction=“”（滚动方向）> ... </marquee>`
- 窗口分帧（用于建立框架，不能与body同用）
`<frameset cols（or rows）="宽度1，宽度2,…,* ">
<frame src="url“ />
<frame src="url“ />
</frameset>`
五、语义化标签
- header元素
- footer元素
- hground元素
- nav元素
- aside元素
- aticle元素
- section元素
- address元素
一、网页结构类标记
- 所有html文档拥有三个文档级元素：html、head、body<br/>单标记和双标记两种类型。
- 告知浏览器文档使用哪种html或哪种xhtml规范：<!doctype html...><BR/>
其中，版本主要分为严格版本、过度版本和基于框架的html文档
- HTML文档标记格式：`<html>……</html>`
- HTML文件头标记格式：`<head>……</head>`
- HTML文件标题标记格式：`<title>……</title>`(在浏览器的标题栏中显示)
- HTML文件说明信息标记,声明编码语言：meta元素（定义在head元素里面，可放关键
字、作者信息等）:`<meta http-equiv="" content="" /><meta name="" content="" />`
- 网页上显示的主要内容与显示格式`<body>……</body>`
二、文档处理
- 段落标记格式：`<p align=“center”>……</p>`
- 标题标记格式：`<hn align=“”>……</hn>(n=1~6)`
- 换行标记格式：`<br/>`
- 水平线标记格式：`<hr align="" size="" width="" color=""/>`
- 注释标记格式：`<!--……-->`
- 设置网页的背景色:`bgcolor`
- 设置网页的背景图像:`background`
- 设置网页文本的颜色:`text`
- 引文文本：`<blockquote/>`
- 列表：`<ul><li>...<li></ul>`(无序列表)、`<ol><li>...<li></ol>`(无序列表）`<dl><dt>..<dd>..</dt></dl>`（定义列表）<BR/>
ol属性：
type=“ ” 设置编号方案
start=“ ” 由某个数字或字母开始
ui属性：
type=“ ” disc 实心圆点（默认值）、circle空心圆点、square方形<BR/>
li属性：
type=“ ” 设置编号方案；
value=” “ 设置开始的序号，仅用于有序列表
- 预编排文本`<pre>...</pre>`
- 超链接` <a href="URL" title=”xxx“></a>`（其中，src中相对路径和绝对路径）
- 图形 `<img src=“” title=“” border=“” align=“” width=“” height=“” />`
- 表格 `<table><tr><td>...</td></tr></table>`<BR/>
table属性:
Border 设定表格边框粗细
borderColor 设定表格边框的颜色
width和height 用来设定表格宽度和高度
Cellspacing 用来设定单元格之间的间隙。
Cellpadding 用来设定单元格格内部空白。
Bgcolor 设置表格的背景颜色
Background 设置表格的背景图像
Align 设置表格的对齐方式：center,left和right<BR/>
tr属性：
Align 设置单元格中内容的水平对齐位置
Valign 设置一整行单元格内容的垂直对齐
Bgcolor 设置表格的背景颜色
Background 设置表格的背景图像<br/>
td属性：
colspan=" " 设置列合并
rowspan=" " 设置行合并
border=""(1代表显示边框)
- 字符风格：斜体：`<i>……</i>` 下划线：`<u>……</u>` 删除线：`<strike>……</strike>` 以较大字体显示：`<big>……</big>` 以较小字体显示 `<small>……</small>` 上标`<sup>……</sup>` 下标`<sub>……</sub>` 粗体：`<STRONG>..</strong>`
- 字符格式：`style="font-size：xxx"` or `<basefont face=" " size=" " color=" " /`>
三、表单
- 表单结构
`<form name=“” action="URL" method="get|post”>`
其中，get为收到，post为传递，action用来设定将要处理表单的URL，一般是一个服务器端的脚本文件
- 文本框
`<input type=“text” name=“” maxlength=“” size=“” value=“”>`
其中，maxlength为可输入的最大字符数，size为显示的最大字符数，readonly为只读，当type为password时，输入文字显示为”*“号；
- 复选框
` <input type=“checkbox” name=“text” value= ““>`
其中，若写出checked，则初始状态默认选取该项，其次name应取不同的值，如果相同则会形成一个数组，value属性的参数值将传送到后台服务器，必须与选项内容相同或基本相同
- `<input type="radio" name="radio" value="">`
其中，形成单选，通过多个单选框的name相同构建组，若写出checked，则初始状态默认选取该项
- 文件上传
`<input name="file " type="file" >`
其中，Accept用来设置浏览文件时默认能看到的文件类型，Disabled:设置当前状态不能用，Readonly设置当前不接受用户的输入
- 菜单列表框
`<select name=“” multiple="multiple" size="" >
<option>菜单项</option>
<option>菜单项</option>
</select>`
其中，multiple表示允许用户从列表中选择多项，去掉将显示为普通下拉框，size属性的值是数字，表示显示在列表框中选项的数目,若加入selected表示该选项在初始时被选中
- 多行文本输入框
`<textarea name=“” rows=“” cols=“”></textarea>`
其中，wrap是文本自动换行
- 提交按钮
` <input type="submit“ name=“button” value="提交">`
其中，在一个表单中必须有提交按钮，否则将无法向服务器传送信息，disabled设置当前状态不能用；
-重置按钮
`<input type="reset“ name=“button” value="重置">`
- 普通按钮
- `<input type=“button“ name=“button” value=”按钮”>`
四、其他
- 跑马灯：
`<marquee behavior=“”（滚动方式） direction=“”（滚动方向）> ... </marquee>`
- 窗口分帧（用于建立框架，不能与body同用）
`<frameset cols（or rows）="宽度1，宽度2,…,* ">
<frame src="url“ />
<frame src="url“ />
</frameset>`
五、语义化标签
- header元素
- footer元素
- hground元素
- nav元素
- aside元素
- aticle元素
- section元素
- address元素
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML问答
- HTML媒体
- html命名规范
- HTML元素1 - 链接<a>
- 使用CSDN Markdown写博客
- HTML学习7：常用标签之表格标签
- HTML 公告滚动
- HTML, 超文本标记语言, 描述网页结构
- 利用Data URL(data:image/jpg;base64,)加速网页加载的方法
- html复选框选中事件
- HTML基础_03_表单标签
- HTML基础_02_格式标签
- sublimetext 安装插件
- html中表格table的内容居中显示
- html
- Html 语法学习笔记三
- 浏览器打开HTML页面(UTF-8编码)是总是乱码
- 设计师必备的html工具
- html页面例子
- [转]手机web HTML头信息解释和viewport meta标签解释