您的位置：首页 > Web前端 > HTML

HTML常用标签的使用

2018-01-25 15:01 232 查看

hn标题标签

包含h1、h2、h3、h4、h5、h6，n从1到6逐渐变小，超过6按照6显示

特点：加粗、加黑显示，单独占用一行，与上下两行有一定的行间距

hr水平线标签

size属性：水平线的高度，单位像素

noshade属性：没有阴影，取值：noshade，表示显示纯色

<hr />
<hr size="5" />
<hr noshade="noshade" />

font字体标签

颜色color 可以直接用red,blue,green等表示

用#xxxxxx 表示用红绿蓝三原色设置的颜色

#000000表示黑色，#FFFFFF表示白色，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色

红绿蓝两位相同时可以省略成1位，比如#331144省略成#314

<font color="red">红色字体字体</font>
<font color="#00FF00">16进制绿色字体 每两位代表一种颜色</font>

字体大小size，从1到7逐渐变大，超过7按照7显示

face字体属性

默认是微软雅黑字体

<font face="楷体">16进制绿色字体 每两位代表一种颜色</font>

img图片标签

alt提示信息，图片没有加载出来，或者找不到时

<img src="../../img/logo2.png" width="260px" height="45px" alt="logo图片"/>

ul和ol列表标签

ol定义有序列表，type列表类型，取值：A、a、I、i、1等（不赞成使用，用css)。reverse降序排序，start起始值

ul定义无需列表，type符号的类型，取值：disc实心圆、square方块、circle空心圆（不赞成使用，用css)

li定义列表项，ul是ol的子标签

<ul type="square">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ul>
<ol start="4" reversed="reversed" type="I">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ol>

a超链接标签

href链接地址

target默认值是_self，是显示在当前页面。_blank是新打开一个标签页

<a href="www.baidu.com" target="_blank"></a>

form表单标签

action属性：请求路径，确定表单提交到服务器的地址（路径）

method属性：请求方式，常用GET，POST

GET方法提交的数据追加在请求路径上，不同浏览器请求参数的大小也不一样

POST提交的数据不追加在请求路径上，提交的数据大小不显示

input输入域标签

type属性

text：文本框，单行的输入字段，默认宽度为20个字符

password：密码框，字段用黑圆显示

radio：单选框，表示一组互斥选项按钮中的一个，同属于name=”xingbie”的组中的一个按钮被选中，之前选中的按钮变为非选中

submit：提交按钮，会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器

checkbox：复选框

file：文件上传组件

hidden：隐藏字段，数据会发送给服务器，但是浏览器不显示

reset：重置按钮，恢复表单到默认值

image：图形提交按钮，通过src给按钮设置图片

button：普通按钮，常用于与javascript结合使用

name 元素名，如果需要提交表单到服务器，必须提供name属性值，服务器通过属性名获取属性值

value 属性：设置input标签的默认值。submit和reset为按钮显示值

size 大小

checked 属性：单选框或复选框被选中

readonly：是否只读

disabled：是否可用

maxlength：允许输入的最大长度

select下拉列表标签

使用子标签option指定列表项

selected勾选当前列表选项

value发送给服务器的属性值。

name属性：发送给服务器的名称

multiple属性：不写默认单选，取值为”multiple”表示多选

size属性：多选时，可见选项的数目

textarea文本域标签（不常用）

cols属性：文本域的列数

rows属性：文本域的行数

button按钮标签（不常用）

button type=”button|reset|submit”按钮标签一般很少使用，提供“普通|重置|提交功能”，不同浏览器默认值不同

<form action="#" method="get">
用户名：<input type="text" /><br /><br />
密码: <input  type="password"/><br /><br />
确认密码：<input type="password" /><br/><br />
<!--name="sex"的两个radio在选择的时候就只能选择一个 所以可以用name分组-->
性别：<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女<br  />

爱好：<input type="checkbox" name="hobby"/>钓鱼
<input  type="checkbox" name="hobby"/>游戏
<input  type="checkbox" name="hobby"/>看书
<br/>

头像：<input  type="file"/><br/>

籍贯：<select>
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select><br />
自我介绍:<textarea></textarea><br />

提交按钮:<input type="submit" value="注册"/><br />
普通按钮：<input type="button" value="注册" /><br />
重置：<input type="reset" />
</form>

b标签

无强调或着重意味的粗体（bold），比如文章摘要中的关键词、评测文章中的产品名称、文章的导言

i标签

无强调或着重意味的斜体（italic），比如生物学名、术语、外来语（比如「de facto」这样的英语里常用的拉丁语短语）

strong标签

着重内容，显示像粗体

em斜体标签

强调内容，显示像斜体

p段落标签

frameset框架结构标签

frameset和body不能共存

rows和cols属性取值：值1、2、3……一个值表示一行（列），多值用逗号隔开，值可以是20px，20%等，最后一个值可以用*表示匹配剩余

frame子标签

src属性：确定页面路径

noresize属性：框架分割先不能移动

target属性：确定显示的页面要在何处显示

<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<!--这里用命名的方式代替right.xml 这样左侧菜单栏href="right.hmml" target="right"就会把网页显示在主页面右侧-->
<frame name="right" />
</frameset>
</frameset>

<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>

table标签

table是父标签，相当于整个表格的容器

border 表示边框的宽度，border=”1px”

width 表格的宽度，height表格的高度，width=”450px”

cellpadding 单元边沿与其内容之间的空白

cellspacing 单元格之间的空白

bgcolor 表格的背景颜色

align 整个表格在区域内居中显示

tr 标签用于定义行

td 标签用于定义表格的单元格

colspan 单元格可以横跨的列数

rowspan 单元格可以横跨的行数

align 单元格内容的水平对齐方式，取值：left左、right右、center居中

nowrap 单元格的内容是否折行

th标签用于定义表头，单元格内内容默认居中、加粗

<table border="1px" width="500px" height="200px" align="center" bgcolor="aqua" cellspacing="0px" cellpadding="0px">
<tr>
<td height="150px" bgcolor="blueviolet">11</td>
<td><font size="1">12</font></td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

上面表格设置height为200px，第一行单独设置height为150px，所以剩下两行加起来是50px，或者让文字能显示

<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<!--第一列和第二列跨列-->
<td colspan="2">11</td>
<!--<td>12</td>-->
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
</td>

<td>24</td>
</tr>
<tr>
<td>31</td>
<!--<td>32</td>
<td>33</td>-->
<td rowspan="2">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<!--<td>44</td>-->
<!--第三行跟第四行的跨行操作-->
</tr>
</table>

<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<!--第一列和第二列跨列-->
<td colspan="2">11</td>
<!--<td>12</td>-->
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="1px" width="100%" height="100%" cellspacing="0px" cellpadding="0px" align="center">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>

<td>24</td>
</tr>
<tr>
<td>31</td>
<!--<td>32</td>
<td>33</td>-->
<td rowspan="2">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<!--<td>44</td>-->
<!--第三行跟第四行的跨行操作-->
</tr>
</table>

用表格构建商城首页骨架

先划成几个大行。

大大行里按照比例划分宽度，填充满整个行

在大行的小模块里再嵌套表格，记住width=100%填充满

然后再设置小模块中每一部分需要的高，撑起页面

小模块中的图片一定要是width=”100%” height=”100%”。！！不然小模块会根据图片的宽度高度，再加长加宽

现在table的border都是占用块内的px像素，所以根据计算出来的模块宽度需要带上border的大小 cellpadding 和 cellspacing默认也有像素，设置为0

<body>
<!--1.创建一个8行1列的表格-->
<table border="1px" width="900px" align="center" cellspacing="0px" cellpadding="0px">
<!--2.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%" >
<tr height="50px">
<!--不设置宽度的话，会默认往右边挤-->
<td width="33.3%">
<img src="../../img/logo2.png" height="47px"/>
</td>
<td width="33.3%">
<img src="../../img/header.png" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--3.导航栏 设置高度后，一行自动上下居中的-->
<tr height="50px">
<td bgcolor="black">
<!--超链接嵌套在里面，离字体近，那么就会先显示超链接的蓝色-->
<a href="#"><font size="4" color="white">首页</font></a>    
<a href="#"><font  color="white">手机数码</font></a>    
<a href="#"><font  color="white">电脑办公</font></a>    
<a href="#"><font  color="white">鞋靴箱包</font></a>    
<a href="#"><font  color="white">家用电器</font></a>
</td>
</tr>
<!--4.轮播图-->
<tr>
<td>
<!--由于图片过大，即使我们设置了整个table的宽高，也会被撑大-->
<img src="../../img/1.jpg"  width="100%"/>
</td>
</tr>
<!--5.最新商品-->
<tr>
<td>
<!--嵌套一个3行7列的表格-->
<table border="1px" width="100%" cellpadding="0px" cellspacing="0px">
<tr height="50px">
<td colspan="7">
<font size="4">最新商品</font>
  
<img src="../../img/title2.jpg" />
</td>
<!--<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>-->
</tr>
<tr>
<td rowspan="2" width="150px" height="350px">
<img src="../../img/big01.jpg" width="100%" height="100%"/>
</td>
<!--这里先写了375px，在火狐浏览器中，剩下的三列并不会平分剩下的375px-->
<td colspan="3" width="375px" height="175px">

<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%"/></a>
</td>
<!--<td>23</td>
<td>24</td>-->
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%" /></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%" /></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
</tr>
<tr>
<!--<td>31</td>-->
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
</tr>

</table>
</td>
</tr>
<!--6.广告图片-->
<tr>
<td>
<img  src="../../img/ad.jpg" width="100%"/>
</td>
</tr>
<!--7.热门商品-->
<tr>
<td>
<table border="1px" width="100%" cellpadding="0px" cellspacing="0px">
<tr height="50px">
<td colspan="7">
<font size="4">热门商品</font>
  
<img src="../../img/title2.jpg" />
</td>
<!--<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>-->
</tr>
<tr>
<td rowspan="2" width="150px" height="350px">
<img src="../../img/big01.jpg" width="100%" height="100%"/>
</td>
<!--这里先写了375px，在火狐浏览器中，剩下的三列并不会平分剩下的375px-->
<td colspan="3" width="375px" height="175px">

<a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%"/></a>
</td>
<!--<td>23</td>
<td>24</td>-->
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%" /></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%" /></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
</tr>
<tr>
<!--<td>31</td>-->
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
<td width="125px" height="175px" align="center">
<a href="#"><img src="../../img/small03.jpg" width="70%"/></a>
<br />
<a href="#"><font color="gray">电炖锅</font></a>
<br />
<font color="red">￥300</font>
</td>
</tr>

</table>
</td>
</tr>
<!--8.广告图片-->
<tr>
<td>
<img  src="../../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<!--用p标签就不用br了-->
<p>
Copyright © 2005-2018 商城页面 版权所有
</p>
</td>
</tr>
</table>
</body>

markdown编辑器中带子列表的列表

第一行的内容

第二行的内容

第二行的子行

第二行的子行

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航