html 自动整理,HTML基础整理

html的基本结构

html的基本结构

1.DOCTYPE:声明文档类型。此处为文档类型为html5;

2.html标签声明此文件为html文件，[lang]代表语言，主要语言为英语；

3.head标签内存放页面信息，body标签内书写页面结构；

4.meta标签提供元信息，[charset]定义字符编码；

5.title标签内书写页面标题；

[注]：保存文件时记得将文件字符编码和页面字符编码保持一致，避免出现乱码。(文件—另存为—编码—保存)

html的基本语法

注释格式：

注释方便程序员理解代码，注释的内容不会呈现在页面上。

标签html标签：由一对尖括号包裹起来的整体。

单标签：meta,input,br,hr……格式：
……

双标签：div,span,p,h1……格式：

……

[注]：双标签:指有开始标签和结束标签的标签，结束标签要在右尖括号前加上/，例如:div的结束标签为

。

元素html元素：由双标签或者单标签组成。

[注]：在双标签中，html元素包括开始标签和结束标签中间的文字、标签等内容。如：

test

这里段落

属性html属性：写在标签名后面，用空格隔开，多个属性之间用空格隔开，同一个属性多个属性值，属性值之间也用空格隔开。

格式：html属性="属性值"

html常用标签

div(division) 块级标签

标签可以把html文档分割为独立区块

文档顶部信息及导航区块

文档主体区块

文档底部信息区块

span标签被用来组合文档中的行内元素。

没有固定的格式表现当对它应用样式时，它才会产生视觉上的变化

[注]块级元素会独占一整行，而行内元素一行可以显示多个。

标题标签 h1-h6视觉上文字字体从大到小，语义上从重到轻。一个页面只有一个h1标签。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签 p

这是一个段落

换行标签 br

珠三角地区包括了广州、深圳、东莞、珠海、中山
以上都是我瞎写的

加粗标签 b、strong大写加粗的牛掰

大写加粗的帅气

倾斜标签 i、em让这世界为我倾斜

而我为你倾斜

视觉标签 b、i; 语义标签(起强调作用) strong、em

实体标签(标识符)   < > ……书写代码时，多个空格及换行会被渲染成一个空格，所以要用标识符 来输出空格。空格大小不等于字体大小，但受字体大小的影响。

同理像这些在html语言中有特殊含义的字符，想要在页面中正常输出也要使用标识符输出。

列表标签

1.无序列表(unordered list)列表项(list item)标签：ul>li

• 吃饭
• 睡觉
• 打机

2.有序列表(ordered list)标签：ol>li

1. 秩序废铁
2. 最强生铁
3. 荣耀钢铁

3.自定义列表(definition list)自定义列表项(definition term), 对自定义列表项的描述(definition description)标签：dl>dt+dd

端游

DOTA

LOL

DNF

手游

王者荣耀

吃鸡

阴阳师

图片标签 img代码：

[src]所引入图片的路径,../代表返回上一层目录;

[alt]图片无法正常显示时出现的文字

[titlt]鼠标悬停在图片上出现的文字

超链接(锚链接)

[href]锚链接跳转的路径;路径一般为网址，html文件(其他页面)或者#号，#代表不跳转且回到当前页的顶部

[target]跳转方式，_self:在当前窗口跳转(默认) _blank:打开一个新窗口并跳转到路径地址

特殊用法：href="javascript:void(0);" || href="javascript:;"

此用法表示保留a标签的特性,但阻止跳转。

表格标签 table (行 tr ,单元格 td)代码:table>tr>td

游戏ID	段位
haha	倔强废铁
xixi	执拗钢铁

部门	姓名	电话号码
BUG修复部	技术宅	123456789	020-1234567
BUG测试部	测试神	987654321

table的属性

[border]表格边框

[cellspacing]单元格之间的间距

[cellpadding]单元格的边框与内容之间的间距

[width]表格宽度

[height]表格高度

tr的属性

[align]内容水平对齐方式。值为:left、center、right;

[valign]内容垂直对齐方式。值为:top、middle、bottom等

td的属性

[colspan]单元占据的列数

[rowspan]单元格占据的行数

以上两个属性用于合并单元格(合并行:往下合并;合并列:往右合并)

表单标签 form

用户名：

密码：

性别：male

female

爱好：吃饭 睡觉 打机

idol

彭于晏

吴彦祖

蔡徐坤

1.form属性：

[action]表单信息提交的后台地址

[method]提交方式,有两种方式：get、post

2.表单控件:input ,[type]表单控件的类型

[name]给同一组的表单控件加上相同的名字(写了名字就能提交)

[value] 给表单控件添加内容

[checked] 默认选中

3.type的属性值：

text 文本框

password 密码框

radio 单选框

checkbox 多选框

submit 提交按钮

button 普通按钮

reset 重置按钮

4.下拉列表:select,选项:option[value][selected默认选中]

5.文本域 textarea[cols列数][rows行数]

textarea限制字数的兼容方法在input标签中限制字数只需要设置maxlength="number"即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的eg:限制字数长度为231。

[注] onchange、onkeydown、onkeyu三者缺一不可.如省略onchange，当你用复制功能，此时一直按着ctrl不松开，鼠标去点击其他地方(焦点移出textarea)时，不会自动取消超出部分；

如省略onkeydown，快速录入的时候会有很多个字符突然不见；

如省略onkeyup，原想预计200的情况下，会变成201，并且最后一个字符是最后敲进去的。

Maxlength 也不可省略，加上maxlength 当碰到IE10及以上版本时，可以完美的实现限制输入框字数的功能。不像其他低版本的IE浏览器还可能出现一个字母后消失。