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 onsubmit="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 固定定位 //相对于浏览器





展开阅读全文

没有更多推荐了,返回首页