html学习总结

html

标题标签 h1-h6 分六个等级

<h1> 标题标签 </h1>

段落标签 p

<p> 段落 标签</p>

换行标签 <br />      水平线标签 <hr />

图像标签 img
属性 属性值 描述
src url 图像路径
alt 文本 图像不能正常显示时，替换的文本
title 文本 鼠标放在图像上时显示的内容
width 像素 图像显示宽度
height 像素 图像显示高度
border 数字 设置图片边框宽度（不常用）

语法：<img src="图像URL" />
示例：<img src="a/b" alt="风景图" title="翠峰寺">

链接标签 a
href：用于指定链接目标的url地址，必须属性
target：用于指定链接页面的打开方式，其取值有 self和 blank两种，其中 _self为默认 值，blank为在新窗口中打开方式

语法：<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
示例：<a href="http://www.baidu.com" target="blank"></a>

表格

语法：<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

列表

无序列表：
<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
......
</ul>
有序列表：
<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</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>

表单

文本框 <input type="text" value="默认值"/>
密码框 <input type="password" />

单选按钮组 
	<input type=“radio” name=“ral” />男 
	<input type=“radio” name=“ral” checked=“checked”/>(默认选中)女
<!--*disabled="disabled" (禁用) *  checked="checked"   (默认选中)-->

复选框组 
<input type="checkbox" name="" /> 
<input type="checkbox" name="" disabled="disabled" />

按钮组：
空按钮 <input type="button" value="按钮内容" />
提交按钮 <input type="submit" value="按钮内容" />
重置按钮 <input type="reset" value="按钮内容" />
图片按钮 <input type="image" src='bg.png' />
文件按钮 <input type="file" />

文本域

<textarea cols="每行中显示的字符数" rows="显示的行数">
  文本信息
</textarea>

下拉框

<select>
  <option>选项1</option>
  <option selected>选项2</option>
  <option>选项3</option>
  ...
</select>

布局标签

<div>
  商品展示
   <span>价格</span>
</div>

html5新增的几个标签
1.datalist 定义下拉列表，请与 input 元素配合使用该元素

<input type="text" value="输入水果名称" list="star"/> <!-- input里面用 list -->
<datalist id="star">   <!-- datalist 里面用 id 来实现和 input 链接 -->
   <option>Apple</option>
   <option>Banana</option>
   <option>Orange</option>
   <option>Grape</option>   
   <option>Pear</option>  
</datalist>

2.fieldset 定义围绕表单中元素的边框，可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
   <legend>用户登录</legend>
  用户名: <input type="text"><br /><br />
  密　码: <input type="password">
</fieldset>