HTML5学习
-
HTML(Hyper Text Markup Language)超文本标记语言
-
w3c标准 world wide web (万维网)
w3c标准包括
-
结构化标准语言(HTML、XML)
-
表现标准语言(CSS)
-
行为标准语言(DOM、ECMAScript)
-
-
标签
-
标题标签 h(n)
-
段落标签 <p></p>
-
换行标签 <br/>
-
水平线标签 <hr/>
-
粗体斜体标签
<strong></strong> <b></b>
<i></i><em></em>
-
特殊符号
空格& nbsp; 大于& gt; 小于& lt; 版权符号& copy;
-
图片标签img <img scr="./img01.jpg" alt="未成功加载" title="悬停信息" height="" width=""/>
-
链接标签a
href:目的网址、锚点(#):通过#要跳转到的name名、邮件(mailto)通过写mailto:邮件地址即可打开本地邮件应用
target:
-
_blank 新窗口打开
-
_self 本网页打开(默认)
-
-
列表标签
无序列表ul(li)有个type属性, 可指定编号类型
有序列表ol(li)
定义列表dl(dt dd)
-
表格
table标签
tr行 td列
colspan 跨列 rowspan跨行
-
媒体元素
-
video
-
audio
属性
controls 控制台
aotuplay 自动播放
-
-
行内元素和块级元素的区别
行内元素
-
与其他行内元素并排
-
不能设置宽高,默认的宽度就是文字的宽度
块级元素
-
霸占一行,不能与其他任何元素并列。
-
能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
-
在HTML的角度来讲,标签分为:
文本级标签:p , span , a , b , i , u , em
容器级标签:div , h系列 , li , dt ,dd
p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
块级元素:所有的容器级标签,都是块级元素,以及p标签。
页面结构分析
元素名 | 描述 |
---|---|
header | 标记头部区域 |
footer | 标记脚部区域 |
section | web页面中一块独立的区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(位于侧边栏) |
nav | 导航类辅助 |
-
内联标签iframe
src: 路径
name:框架表示名
width:高度
height:宽度
name:框架表示名 可使用a标签中的target属性进行跳转
iframe src="" name="MyIframe"></iframe
a herf="http://www.baidu.com" target="MyIframe">点击跳转</a
-
表单form
action:目的网址
method:提交方式 两种方式:get和post
form中的input标签
属性 说明 type 指定元素的类型,如text文本、password密码、checkbox多选框、radio单选、reset重置、file文件、hidden、image点击图片提交、button按钮、submit提交 name 指定元素名称,方便后端获取数据 value 内容的初始值 size 指定表单元素的初始宽度 maxlength 能输入的最大字符数 checked 指定radio或者checkbox的元素是否被默认选中 -
下拉选择
select 包含 option
属性 : value值 selected默认被选中
-
文本域
textarea
属性:cols可容纳列数 rows可容纳行数
-
文件域
input value="file"
-
数字
input type="number" max最大值 min最小值 step跨度(即一次可增加或减小多少长度的值)
-
滑块
input type="range" max最大值 min最小值 step属性
-
搜索框
input type="search"
禁用:disabled
隐藏:hidden
只读:readonly
label标签:增强鼠标可用性
通过label属性 for="id名称"即可实现绑定
表单初级验证
placeholder:提示输入,用户输入框中
required:不能为空
pattern: 正则表达式
正则表达式查询网站:www.jb51.net/tools/regexsc.htm
注释
<!-- -->