1.基本标签
标题<h1>~</h6>、段落<p></p>、换行</br>、加粗<strong></strong>、倾斜<em></em>
删除线<del></del>、下划线<ins></ins>、盒子<div></div>,<span></span>
图像<img src="URL" alt="替换文本" title="提示文本"/>
链接<a href="URL" target="_self或_blank"></a>
2.路径
A.相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
相对路径分类:同一级路径( ),下一级路径(/),上一级路径(../)
B.绝对路径:是指目标下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
3.链接的分类
A.外部链接:例如<a href="http://www.baidu.com">百度</a>
B.内部链接:网站内部之间的相互链接,例如<a href="index.html">首页</a>
C.空链接:当时没有确定链接目标时,例如<a href="#"></a>
D.下载链接:如果href里面是一个文件或压缩包会下载这个文件,例如<a href="img.zip"></a>
E.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频都可以加超链接。
F.锚点链接:点击链接可以快速定位到页面中的某个位置。
在链接文本的href属性中,设置属性值为#名字的形式,例如<a href="#kobe">科比</a>
找到目标位置标签,里面添加一个id属性 = 刚才的名字,例如<h1 id="kobe">黑曼巴</h1>
4.注释和特殊字符
<!--注释语句--> 快捷键ctrl+/
小于号< 大于号> 空格符
5.table表格
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
<thead>
<tr>
<th>表头</th>
<th rowspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格</td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
跨行合并:rowspan 跨列合并:colspan
6.列表
<ol>
<li>有序列表</li>
</ol>
<ul>
<li>无序列表</li>
</ul>
<dl>
<dt>自定义列表</dt>
<dd></dd>
</dl>
7.表单
<form action="url地址" method="POST或GET" name="表单域名称">
文本框 <input type="text" value="值" maxlength="规定字符最大长度"/>
密码框 <input type="password" value="值"/>
单选框 <input type="radio" name="sex" checked="checked"/>
多选框 <input type="checkbox" name="sex"/>
普通按钮<input type="button" value="普通">
提交按钮<input type="submit" value="提交"/>
重置按钮<input type="reset" value="重置"/>
上传文件<input type="file" value="上传"/>
<label for="kobe">科比</label>
<input type="radio" name="kobe" id="kobe">
下拉表单
<select>
<option>科比</option>
<option selected="selected">默认选项</option>
<option>库里</option>
</select>
文本域
<textarea>欧文</textarea>
</form>
A.name是表单元素的名字,单选按钮和复选框必须有相同的名字name才可以实现多选一。
B.单选按钮和复选框可以设置checked属性,当页面打开的时候就可以默认选中这个按钮。
C.label标签为input元素的标注标签,当点击label标签内的文本时,浏览器会自动将光标转移到对应的表单元素上,用来增加用户体验。label标签的for属性应当与相关元素的id属性相同。
8.HTML5新增特性
A.头部标签 <header>
B.导航标签 <nav>
C.内容标签 <article>
D.定义文档某个区域 <section>
E.侧边栏标签 <aside>
F.尾部标签 <footer>
G.音频 <audio>
1.自动播放 autoplay="autoplay"
2.向用户显示播放插件 controls="controls"
3.循环播放 loop="loop"
4.音频播放地址 src="url"
H.视频 <video>
1.自动播放 autoplay="autoplay"
2.向用户显示播放插件 controls="controls"
3.设置播放器宽度 width="width"
4.设置播放器高度 height="height"
5.循环播放 loop="loop"
6.视频播放地址 src="url"
7.加载等待的画面图片 poster="url"
8.静音播放 muted="muted"
I.新增input表单
我们在验证时必须添加form表单。
当我们点击提交按钮就可以验证表单。
但有些类型主流浏览器不支持无法验证。
<form action="">
邮箱: <input type="email" />
网址: <input type="url" />
日期: <input type="date" />
时间: <input type="time" />
数量: <input type="number" />
手机号码: <input type="tel" />
搜索: <input type="search" />
颜色: <input type="color" />
<input type="submit" value="提交" />
<form>
J.新增表单属性
1.内容不能为空 required="required"
2.提示文本 placehlder="第二名意味着你是头号输家"
可以通过 input::placeholder{color:pink}来改变里面字体颜色。
3.自动聚焦属性 autofocus="autofocus"
4.输入历史记录 autocomplete="on/off"
需要放在表单内,同时加上name属性,同时提交成功。
5.提交多个文件 multiple="multiple"