前端入门学习——HTML5

HTML5

文本格式化标签

<b></b>&<strong></strong> 加粗
<i></i>&<em></em>		  斜体
<s></s>&<del></del>		  删除线
<u></u>&<ins></ins>		  下划线
<br/>					  换行		
<hr>					  一条线

图像标签

<img src="图像url" alt="图像无法显示时显示得文字" title="鼠标悬停时候显示的内容"/>

连接标签

<a href="跳转目标url" target="目标窗口弹出的方式">元素</a>

锚点定位

使用"a href"="#id名"链接文本/a"创建链接文本
<a href="#id名">文本</a>
使用相应的id名标注跳转目标的位置 

base标签

设置整体链接的打开状态
head中写 <base target="_black"/>

特殊字符

空格	&nbsp
<		&lt
>		&gt
&		&amp
￥		&yen
?		&copy
?		&reg
°		&deg
±		&plusmn
?		&times
÷		&divide
n次方	&supn

相对路径

图像和HTML位于统一文件夹：		1.jpg
图像在HTML的子文件夹下：			img/img01/1.jpg
图像在HTML的上一级文件夹下：		../img/1.jpg

列表标签

无序列表
	<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

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

单元格标题标签

<caption>表格名称</caption>
写在table里面，与thead、tbody同级

合并单元格

跨行合并		rowspan
跨列合并		colspan
<td rowspan="2"></td>
<!--合并2个单元格-->

表单标签（收集用户信息）

1.表单域
2.提示信息
3.表单控件

input控件： 
	type属性：
		text、password、radio(单选按钮)(用name控制)、checkbox、button、submit(提交)、reset(重置)、image、file
	name属性：
		用户自定义的控件名称
	value属性：
		input控件的默认文本
	size属性：
		宽度
	checked属性：
		定义选择控件默认被选中的项
	maxlength属性：
		允许输入的最多字数

label标签

用于绑定一个表单元素，当点击label标签时，被绑定的表单标签就会获得焦点

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件（文本域）

如果需要输入大量的信息，就需要用到textarea标签。通过textarea控件可以创建多行文本输入框
<textarea cols="每行的字符数" rows="显示的行数">
	文本内容
</textarea>

下拉菜单

<select>
	<option select="selected">option 1</option>		<!-- 默认选中-->
	<option>option 2</option>
	<option>option 3</option>
</select>

表单域

<form action="提交到后台" method="提交方法" name="名称">
	<input type="submit" value="提交">
	<!--ajax会用 -->
</form>

datalist标签：定义选项列表，与input配合使用

<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标签：分组打包

<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>