HTML基础标签及用法

HTML5添加的标签

video 视频标签 属性 src 路径 controls 显示工具栏

audio 音频文件 属性 src 路径 controls 显示工具栏

如：

<video src="a.mp4" controls ="controls " >次浏览器不支持次视频标签<video>

autoplay 自动播放属性

controls 暂停、声音等控件属性

表单元素支持表单元素增添 x最大值 setp 每次的变化量

url 链接地址效验

range 滑块

search

表单提交进行优化

required 进行非空效验

placeholder 文本框进行文本提示

pattern 正则效验

header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

判断表单是否上传

<form οnsubmit="return 函数A()" method="post" action="上传路径" >

<input type=submit >

<form>

//表示函数A返回true或false onsubmit判断是否上传

结尾的标记(是一种双标签)

center 居中显示(双标签)

head 头部标签(是一种双标签)

title 标题标签 （是一 种双标签）

body 主体标签 进行显示主体内容（是一种双标签）

h1-h6 标题标签 被包起来的内容以标题的形式进行展现

有换行效果 h1-h6字体大小逐渐减小

（是一种双标签）

span 没有任何效果的标签（是一种双标签）

p标签 是段落标签 在结束标签后进行换行（是一种双标签）

br标签 是换行标签 在br处换行（是一种单标签）

strong标签 强调标签 被包含起来的内容加粗显示（是一种双标签）

em 斜体标签 被包含起来的内容进行倾斜（是一种双标签）

&nbsp； 空格

&lt; 小于号

&gt； 大于号

&quot 引号

&copy 版权符号

html注释 <!--注释性的文字-->

img标签 叫做图像标签 src=“路径” width=“宽度”

height="高度" alt=“图片替代文字” title=“帮助性文字”

a标签 链接标签 href="路径" target="打开位置"

title="提示性的文字"

a标签中的锚链接。由链接和锚点（标记）构成

锚点点位<a name="描点名称">

a标签跳转方式1:<a href="#描点名称">(本身页面)

a标签跳转方式2:<a href="页面路径#描点名称">（页面间跳转锚点处）

功能性链接:a href="mailto:邮箱"

链接分类：页面间链接 、锚链接、功能性链接

概念：路径（指的文件存放的位置）

路径分为相对路径 以及 绝对路径

相对路径：相对于当前文件的位置

绝对路径：盘符--->文件位置 ..\指的是返回上一层

做开发通常采用相对路径进行操作

第二章

ul 无序列表标签（声明列表）（双标签）

li 列表项标签 （双标签）

ul type属性控制列表展示类型 disc（默认）square(实心方块) circle(空心圆)

ol 有序列表（双标签）

li 列表项标签 （双标签）

ol type属性控制列表展示类型 1 a/A i/I

dl 定义列表

dt 列表项标签

dd 列表项内容

table 表格标签

tr 行标签

td 单元格标签

colspan 所跨的列数

rowspan 所跨的行数

border 表格线的宽度

width 属性 指定宽度 可以为表格指定宽度 可以为单元格指定宽度

height 属性 指定高度 可以为表格指定高度 可以为单元格指定高度

align 属性 可以设置表格水平位置 left center right

可以设置单元格内容位置 left center right

valign属性 可以设置单元格垂直方向上的位置 top middle bottom （Xbaseline(基准线))

框架（frameset)

意义：可使一个页面分多个窗口

用法：<frameset cols="20%,35%,*" rows="50%,*" scrolling="yes"noresize="noresize"framborder="1">

<fram src="第一个页面的路径">

<fram src="第二个页面的路径">

<fram src="第三个页面的路径">

</frameset>

cols 表示把页面横向分割 % 为大小

rows 表示把页面纵向分割

scrolling 表示是否显示滚动条

noresize 表示是否允许调整框架窗口大小

framborder 表示是否显示窗口的边框

内联框架（iframe）

意义：

用法：<iframe src="引用页面的地址">

第三章

表单

<form method="post" action="">

<input type="" >

</form>

method 上传方式

action 上传路径

<from>

<input type={text submit reset radio checkbox image password file}

required //表单为空不能提交

pattern="^1[358]\d{9}" //正则表达式

placeholder="请输入要搜索的关键字" //提示内容重要用于文本框

readonly //只读

disabled //禁用

for=“表单元素id” 点击时焦点转移

>

</from>

text 输入帐号密码时用到

password 使输入帐号或密码时不可见

submit 提交按扭

reset 重置按钮

radio 选择男女时可用

checkbox 选择爱好时可用 for=“表单元素id” 点击时焦点转移

image 提交按钮可用图片代替

file 用于实现文件的选择

hidden 隐藏的文本框

number 只能输入数字 max最大值 min最小值 step 数字间隔

range 横向滑块

email 判断是否为邮箱地址

url 判断是否为网址

search 搜索框和文本框类似

value 表示表单的初始值和上传的内容，但type为radio时必须指定一个值

size 表单的初始宽度

maxlength 在text中指定输入的最大字符数，默认值为无限

checked 指定按钮是否被选中，当类型为radio或checkbox时使用此属性

列表框

<select>

<option value=""selected="selected">1</option>

<option value="">2</option>

<option value="">3</option>

...

</select>

selected 列表框的默认值

多行文本域

<textarea cols="显示列的宽度" rows="显示行的宽度">

显示的内容。。。

</textarea>

第四章

<style type="text/css"> 双标签

font-size：**px; 表示字体大小

</style>

color 表示字体颜色

当为class时，在 <style type="text/css"> 中用 .class名{}表示

当为p,h1,body,ul,ol...时，用p,h1,body,ul,ol...{}表示

当为id时，用#id名{}表示

第五章

div 分板块

span 双标签，没有任何凸显作用，为默认值

font-family 设置字体类型

font-size 设置字体大小

font-style 设置字体风格

font-weight 设置字体粗细

bold 加粗

bolder 更粗的字

lighter 更细的字

font 设置字体属性

color 设置文本颜色

text-align 设置文本水平对齐方式

left 浏览器左边 默认

right 浏览器右边

center 中间

justify 实现两端对齐文本效果

text-indent：xpx 设置首行文本缩进

line-height： 设置文本的行高

text-decoration： 设置文本的装饰

none 默认值 定义的标准文本

underline 设置文本的下划线

overline 设置文本的上划线

line-through 设置文本的删除键

blink 设置文本闪烁。此值只在Firefox浏览器中有效，在IE无效

标签名 img｛vertical-align:middle｝ 图片与文本居中对齐

a:link｛｝ 未单击访问时超链接样式

a:visited｛｝ 单击访问后超链接样式

a：hover｛｝ 鼠标悬浮其上的超链接样式

a:active｛｝ 鼠标单击未释放的超链接样式

text-decoration:none; 超链接无下划线

text-decoration:underline; 超链接有下划线

background-color： 设置背景颜色

background-image：url（图片路径） 添加背景图片

background-repeat：

repeat 沿水平和垂直两个方向平铺

no-repeat 不平铺，只显示一次背景图片

repeat-x 只沿X轴平铺

repeat-y 只沿Y轴平铺

backround-position：Xpx Ypx ,X% Y%,关键词 水平left、center、right。垂直top、center、bottom。可组合 图片出现的方向

background:color image repeat; 以上简写方式

list-style-type：列表项标记类型

none 无标记符号

disc 实心圆，默认值

circle 空心圆

square 实心正方形

decimal 数字

list-style-image：url（图片路径） 设置列表标记图片

list-style-position： 属性设置在何处放置列表标记项

outside 默认，标记放置在文本以外，标记在文本左侧

inside 标记放置在文本以内，且环绕文本根据标记对齐

list-style 以上简写样式

第六章

利用盒子时，很多情况需把盒子内外边距清零；

border 盒子边框

content 元素内容

padding 内边距

margin 外边据

margin:0px auto; 居中显示

box-shadow 盒子阴影

box-shadow: inset 内阴影默认为外 Xpx Ypx Zpx 颜色

border-radius 边框的角度

border-radius：上 右 下 左

border-color 边框颜色

border-top-color：上边框颜色

border-right-color： 右边框颜色

border-bottom-color：下边框

border-left-color：左边框

border-color：#上 #右 #下 #左

border-width 边框粗细

border-top-width：上边框粗细

border-right-width： 右边框

border-bottom-width：下边框

border-left-width：左边框

border-width：上px 右px 下px 左px

border-style 边框样式，solid实线，dotted点线，dashed虚线

border-top-style：上边框

border-right-style： 右边框

border-bottom-style：下边框

border-left-style：左边框

border-style：上 右 下 左

border-bottom：颜色 粗细 样式； 以上的简写

是否隐藏

display 显示方式属性

block 块级元素默认值 元素会显示为块级元素 该元素前后会带有换行符

inline 内联元素默认值，元素会显示为块级元素，该元素前后没有换行符

inline-block 使无序列表ul li变为整行顺便使点消失 块集元素加前后换行符

none 设置元素不会被显示

float 定义元素向哪浮动

left 元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动，并会显示在其文本中出现的位置

clear 定义向哪不浮动

left 元素向左不允许浮动

right 元素向右不允许浮动

both 在左右两边不允许浮动元素

none 默认值，允许浮动元素出现在两侧

position:

absolute 绝对定位 //相对于祖先元素

relative 相对定位 //相对于自己

fixed 固定定位 //相对于浏览器