HTML5常用标签

 

1、<font>标签

<font color="#1D7AD9" size="7">font标签，处理文字大小和颜色</font>

2、加粗标签

        <b>文字加粗</b>
		<em>文字加粗em</em>
		<strong>强壮加粗</strong>

3、斜线、下划线、上标、下标

<i>倾斜</i>
		<u>下划线</u>
		a<sub>2</sub>
		a<sup>3</sup>

4、<details> 标签 用于描述文档或文档某个部分的细节。目前只有 Chrome 支持 <details> 标签。提示：与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<details>
	<summary>请看详情</summary>
	详情。。。
</details>

5、图片标签

	<img src="img/3.jpg" title="狮子" alt="如果不能显示时显示文字信息" />

6、超连接标签

href:链接的地址:target:目标 跳转的页面显示的位置(默认是_self:在本窗口内打开，_blank:在新窗口中打开)

<a href="index.html" target="_blank">在新窗口中打开</a>
<a href="http://www.baidu.com">打开百度网页</a>
<a name="top">锚点</a>
<a href="#top">回到顶部</a>

7、列表标签 <ul>、<ol>

     无序列表

                <ul type="circle">
				  <li>三国演义</li>
				  <li>红楼梦</li>
				  <li>西游记</li>
				  <li>水浒传</li>
				</ul>

   有序列表

                        <ol type="1">
						  <li>三国演义</li>
						  <li>红楼梦</li>
						  <li>西游记</li>
						  <li>水浒传</li>	
						</ol>

8、表格标签

 table:表格 属性: cellspacing:单元格间距;align:对齐方式;border:边框;caption:表名;thead:表头;tbody:表主体;tfoot:表格的页脚

tr：行 放在table 或thead 或tbody 或tfoot 里面

th:单元格 常放在thead中  有加粗和居中的效果  放在tr里面

td:单元格 表格中的内容只能放在单元格中(td和th中)  放在tr里面

属性:colspan:合并列;rowspan:合并行

<table border="1" cellspacing="0" align="center" width="1000">
			<caption>学生表</caption>
			<thead>
				<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>班级</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>张三</td>
					<td>高一</td>
				</tr>
				<tr>
					<td>002</td>
					<td>李四</td>
					<td>高一</td>
				</tr>
				<tr>
					<td>003</td>
					<td>刘备</td>
					<td>高一</td>
				</tr>
				
				<tr>
					<td>004</td>
					<td>张飞</td>
					<td>高一</td>
				</tr>
			</tbody>
			
		</table>

9、表单标签

     表单: form:所有的表单元素都是放在form中提交到服务器端 。

     属性: action:提交的页面地址   

         method:提交的方式

                 get:提交的内容都会通过url传递,不安全，传递的内容长度有限制

                 post:提交的内容会加密，通过正文传递，可以提交大量数据

   表单元素:

     1)输入框

        

《1》文本框：<input   type="text" name="必须的"  />

  《2》密码框：<input   type="password" name="必须的"  />

  《3》单选框：<input   type="radio"   name="必须的"  />

注意：

同组的单选按钮名称(name) 必须相同，才能彼此互斥

  《4》复选框：<input   type="checkbox" />

  《5》按钮   ：

普通按钮：<input   type="button"  />

重置按钮：<input   type="reset"  />

提交按钮：<input   type="submit"  />

图片按钮：<input   type="image"  src="图片的路径"   />

注意： 默认有 表单提交功能的是 ： submit   /   image

  《6》隐藏域：<input   type="hidden"  />

6》隐藏域：<input   type="hidden"  />

《7》上传文件：

<input   type="file"  />  
                       用户名:<input type="text"  size="20"  value="客户输入的值或者默认的值" />
            密码:<input type="password"  value="123456" />
            性别:<input type="radio" name="sex" value="1"  checked="checked" />男 
             <input type="radio" name="sex" value="2"  />女 
            爱好:<input type="checkbox"  value="1" checked="checked" />吃饭
             <input type="checkbox"  value="2" checked="checked" />睡觉
             <input type="checkbox"  value="3" />打豆豆 
            上传控件:<input type="file"   />
            隐藏框:<input type="hidden" value="商品id"  />          
            <input type="submit"  value="注册" />  
            <input type="reset" value="取消"  />
             <input type="button" value="普通按钮"  /> 
            图片提交按钮:<input type="image" src="img/27125326.jpg"  />

 2) 多行文本框

<textarea   cols="列数目"   rows="行数目" ></textarea>
 留言:<textarea rows="4" cols="30">	 </textarea>

3)下拉列表框<select >

 你的密保问题:
<select>
     <option value="1">请选择</option>
     <option selected="selected" value="2">你的妈妈叫什么名字?</option>
    <option value="3">你的爸爸叫什么名字?</option>
    <option value="4">你最喜欢的电影?</option>				
 </select>
下拉列表框可以设置为多选:
<select multiple="multiple" size="3">
   <option value="1">请选择</option>
   <option selected="selected" value="2">你的妈妈叫什么名字?</option>
   <option value="3">你的爸爸叫什么名字?</option>
   <option value="4">你最喜欢的电影?</option>				
 </select>