前端入门学习——HTML5
HTML5小笔记！
HTML5
文本格式化标签
1
2
3
4
5
6
| <b></b>&<strong></strong> 加粗
<i></i>&<em></em> 斜体
<s></s>&<del></del> 删除线
<u></u>&<ins></ins> 下划线
<br/> 换行
<hr> 一条线
|
图像标签
1
| <img src="图像url" alt="图像无法显示时显示得文字" title="鼠标悬停时候显示的内容"/>
|
连接标签
1
| <a href="跳转目标url" target="目标窗口弹出的方式">元素</a>
|
锚点定位
1
2
3
| 使用"a href"="#id名"链接文本/a"创建链接文本
<a href="#id名">文本</a>
使用相应的id名标注跳转目标的位置
|
base标签
1
2
| 设置整体链接的打开状态
head中写 <base target="_black"/>
|
特殊字符
1
2
3
4
5
6
7
8
9
10
11
12
| 空格  
< <
> >
& &
￥ ¥
? ©
? ®
° °
± ±
? ×
÷ ÷
n次方 &supn
|
相对路径
1
2
3
| 图像和HTML位于统一文件夹： 1.jpg
图像在HTML的子文件夹下： img/img01/1.jpg
图像在HTML的上一级文件夹下： ../img/1.jpg
|
列表标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
|
表格table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| tr是行，td是单元格
<table>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
表格属性：
border 设置表格的边框 像素值
cellspacing 设置单元格与单元格之间的空白距离 像素值
cellpadding 设置单元格边框与内容之间的空白距离 像素值
width 设置宽度 像素值
height 高度 像素值
aling 表格在网页中的水平对齐方式 left right center
|
单元格标题标签
1
2
| <caption>表格名称</caption>
写在table里面，与thead、tbody同级
|
合并单元格
1
2
3
4
| 跨行合并 rowspan
跨列合并 colspan
<td rowspan="2"></td>
|
表单标签（收集用户信息）
1.表单域
2.提示信息
3.表单控件
input控件：
type属性：
text、password、radio(单选按钮)(用name控制)、checkbox、button、submit(提交)、reset(重置)、image、file
name属性：
用户自定义的控件名称
value属性：
input控件的默认文本
size属性：
宽度
checked属性：
定义选择控件默认被选中的项
maxlength属性：
允许输入的最多字数
label标签
用于绑定一个表单元素，当点击label标签时，被绑定的表单标签就会获得焦点
1
2
| <label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
|
textarea控件（文本域）
1
2
3
4
| 如果需要输入大量的信息，就需要用到textarea标签。通过textarea控件可以创建多行文本输入框
<textarea cols="每行的字符数" rows="显示的行数">
文本内容
</textarea>
|
下拉菜单
1
2
3
4
5
| <select>
<option select="selected">option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
|
表单域
1
2
3
4
| <form action="提交到后台" method="提交方法" name="名称">
<input type="submit" value="提交">
</form>
|
datalist标签：定义选项列表，与input配合使用
1
2
3
4
5
6
7
8
| <input type="text" placeholder="input star" list="star">
<datalist id="star">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
|
fieldset标签：分组打包
1
2
3
4
5
6
7
| <fieldset>
<legend>用户登陆</legend>
<label for="name">Name</label>
<input type="text" placeholder="please input name" id="name">
<label for="password">PassWord</label>
<input type="password" placeholder="please input password" id="password">
</fieldset>
|
