初识 HTML
- HTML（Hyper Text Markup Language）超文本标记语言
-
w3c标准 world wide web （万维网）
w3c标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准语言（DOM、ECMAScript）
HTML基本语法
- 标签
<!DOCTYPE html>是指此HTML按h5标准编写
lang是指语言 规定编码格式utf8 网页的标题
- 标题标签 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
注释
<!-- -->