HTML标签

来源:互联网 发布:知豆电动汽车多少钱 编辑:程序博客网 时间:2024/06/05 17:48
1.超链接标签
1.1超级链接标签:a
<a href=""></a>
href 是指跳转的地址
1.2如果要在新的页面打开链接需要设置target
<a href = “http://www.hqyj.com” target =“_blank”> 超级链接内容 </a>
设置target标签 设置超链接是否在本页面还是新页面打开
1.3将图片作为超链接
<p>创建图片链接: <a href="http://www.3g-edu.org"><img src="img/qq6.jpg" width="100px" height="100px"></a></p>
1.4 创建锚点链接:
通过锚点链接,用户可以快速定位到目标内容
创建锚点链接分为两步
使用相应的id名标注跳转的位置
使用<a href = “#id名”> 链接文本 </a> 创建链接文本
<p><a href="#C4">查看 Chapter 4。</a></p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
1.5页面刷新
<a href = "#">xxx</a>

2.列表标签
1.1无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签,每一项用<li>标签
<h4>无序列表:</h4>
<ul>
<li>Android</li>
<li>H5</li>
<li>嵌入式</li>
</ul>
1.2 无序列表的不同显示方式:通过在标签中设置style属性 style = "list-style-type:类型名"
<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>

<h4>圆点列表:</h4>
<ul type:disc>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</lio>
</ul>

<h4>正方形列表:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
1.3 有序列表的不同的编号显示:在 标签中添加 type属性,选择相应的显示模式
<h4>编号列表:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>大写字母列表:</h4>
<ol type="A" >
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>小写字母列表:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>罗马数字列表:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>小写罗马数字列表:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
1.6 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
dl是英语define list定义列表的意思,用于定义一些词。
dt是英语define title 定义标题
dd是英语define description 定义描述的意思
dt、dd必须交替出现,合法格式:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dl>
3.表格标签

HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
Border bgcolor width height
1 没有边框的表格:
<h4>这个表格没有边框:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>


2 跨行或者跨列的表格单元格
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>//横跨两列
</tr>
<tr>
<td>张三</td>
<td>1388888888</td>
</tr>
</table>
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
<th>Name</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>//跨两行
<td>1388888888</td>
</tr>
</table>

3 表格内的一些标签的使用
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>

4.表单
HTML 表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:


HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>

单选按钮(Radio Buttons)
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框(Checkboxes)
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按钮submit)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的《》文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

下拉列表: HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<form action="">
select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
预选状态的下拉列表
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

文本域
<textarea rows="10" cols=" 30">//rows 多少列 cols:多少行
我是一个文本框。
</textarea>

按钮
<form action="">
<input type="button" value="Hello world!">
</form>

块级标签:
h1-h6; p ; u l; ol ; li ; div

行内标签:
span;a;img;


原创粉丝点击