简单html的标签应用

1、大家平常在一些商品页面如淘宝上看到的的价格栏处对价格的一个描述（现价和原价），利用标签<del>来实现

<html>
<head>
<title>the price</title>
<meta charset="utf-8">
</head>
<body>
<p>惊爆价！！！</p>
<p>现在的价格是<del>￥999</del> ￥888</p>
</body>
</html>

运行结果：

惊爆价！！！

现在的价格是￥999 ￥888

另：HTML中的下划线表示的标签为<ins>,使用方法同上无差。可表示插入文本的效果。

2、实现点击图片跳至指定链接可采用标签<a>和<img>相结合:（其中，target="_blank"属性可以使得链接在新的窗口打开）

<html>
<body>
<p>please click this icon to go to a website </p>
<a href="http://www.baidu.com" target="_blank">
<img src="/example/picture.png">
</a>
</body>
</html>

 3、若要在同一页面跳转至指定的位置，可以通过在指定位置的所在的标签中添加属性name或者id来进行标识作为文档内的书签，而创建指向该锚的链接可以是同一文档内的，即像下面的例子一样；也可以是在其他页面创建指向，即在其他页面的链接路径后加上#demo。（该例子采用的name的值均设定为“demo”）

<html>
<body>
<a href="#demo">consult the demo</a>
......
<!--省略号为页面其他内容，请自行补充-->
<h1 name="demo">demo</h1>
<p>this is the content of demo</p>
</body>
</html>

 4、在我们平常看到的一些页面中经常会有项目表格，在HTML中是通过<table>来实现的，其下的节点有<caption>（表格标题），<tr>（定义表格的行），<th>（表格的表头），<td>（表格单元）；往比较笼统的方面讲，其中还包含<thead>,<tbody>,<tfoot>，分别来表示表格的页眉，主体和页脚，此三个标签可以方便开发者阅读和理解表格的各个部分。<table>中包含的属性有border（定义表格边框的厚度），若要创建一个无边框表格则border为0即可，cellpadding（单元格与其内容的边距大小，以像素px为单位），cellspacing（单元格之间的距离）。对于表格中的内容可以采用align来设定其排列的位置，一般这些样式都是通过CSS来定义会比较方便使用。

<html>
<body>
<table border=1 cellpadding=5 cellspacing=5>
<caption>my title</caption>
<tr>
<th align="left">姓名</th>
<th align="left">年龄</th>
<th align="left">Tel</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>89335198</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>80245183</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>87256190</td>
</tr>
</table>
</body>
</html>

当跨行或跨列时，则在<th>或<td>等中利用属性clospan和rowspan，跨几行或几列，其属性值就为数字几。如跨两行，则可以写为：<td rowspan=2>合计</td>。而当为单元格内容为空时，为保持其边框可将内容写为&nbsp（全称为non-breaking space）。

补充一点，<table>中的一个框架属性frame的值有“box”，“above”，“below” ，“hsides”，“vsides”。顾名思义，box就是仅仅只有外边的盒子状边框，内部的边框就没有了；而above则是仅上面有一条边框，below仅下面有一条边框，hsides则是上下各有一条，vsides是左右各有一条。

整理到这里，突然想跟大家缕缕bgcolor和background-color的区别，前者是标签属性，在一些标签下是可以使用的，如body和table，而后者是CSS中的样式属性，当你不采用CSS设置样式时，要给背景改变颜色可以采用bgcolor或style来实现，如：<table bgcolor="red">和<table style="background-color:red"二者之间的效果是等同的，而给背景添加图片等，直接用background="......"便可以实现。但大多情况下还是希望可以采用CSS来设计样式比较简洁一点。

5、HTML中的列表有无序列表，有序列表和定义列表，其各自的头节点分别是<ul>,<ol>,<dl>；前面二者的子节点都是<li>，而<dl>的子节点有<dt>,（定义列表的项目），<dd>（定义列表的项目的描述或注释等）。需要注意的是这些标签都是配套使用的，各种列表之间可以相互嵌套。以下列举个例子方便理解

<html>
<body>
<!--无序列表-->
<ul type="circle">
<li>口红</li>
<li>腮红</li>
<li>粉底</li>
</ul>
<!--有序列表-->
<ol start="2">
<li>口红</li>
<li>腮红</li>
<li>粉底</li>
</ol>
<!--定义列表-->
<dl>
<dt>mobile phone</dt>
<dd>it can be used to communicate</dd>
</dl>
</body>
</html>

 6、我们日常所见的表单是在<form>标签下建立<input>元素，其中<input>的属性type的属性值有很多，包括text（文本域），password（密码域），checkbox（复选框，即可以对所列选项进行多选），radio（单选框）。

<html>
<head>
<title>user</title>
<meta charset="utf-8">
</head>
<body>
<form>
性别：
<br/>
男<input type="radio" name="sex" value="male" />
女<input type="radio"name="sex" value="felmale"/>
<br/>
选择：
<br/>
线上谈<input type="checkbox" name="way" value="inline" checked="checked"/>
面议<input type="checkbox" name="way" value="offline"/>
<br/>
用户名：<input type="text" name="userName"/>
<br/>
密码：<input type="password" name="password"/>
</form>
</body>
</html>

运行效果：

 

性别：
男 女
选择：
线上谈 面议
用户名：
密码：

还可在<form>下添加子节点<select>来创建下拉列表

<html>
<head>
<title>list</title>
<meta charset="utf-8">
</head>
<body>
<form>
<select name="fruits">
<option value="apples">苹果</option>
<option value="pears">梨</option>
<option value="oranges" selected="selected">橙子</option>
<option value="grapes">葡萄</option>
</select>
</form>
</body>
</html>

 此外，还可以在表单外创建一个边框来提高可观性

<html>
<head>
<title>personal form</title>
<meta charset="utf-8">
</head>
<body>
<form> 
<fieldset>
<legend>个人信息</legend>
姓名：<input type="text" name="name"/>
年龄：<input type="number" name="age"/>
<br/>
性别：<input type="text" name="sex"/>
民族：<input type="text" name="nation"/>
</fieldset>
</form>
</body>
</html>

 

posted @ 2020-07-18 16:35  正义的小怪兽z  阅读(165)  评论(0)    收藏  举报