HTML基础标签详解
本文介绍了HTML中的基础标签及其使用方法，包括结构标签如div、p，样式标签如b、i，以及标题标签h1-h6等，并讲解了如何使用锚点进行页面内部跳转和表单的设计。
html标签(早上)
<div>主要是用来划分结构的</div><!--打div之后按tab键可以显示全部-->
<p>p是段落标签，也可以用来划分结构</p><!--div，p，h1到h6是块级标签-->
<b>b标签有加粗效果</b><!--b标签到font标签都是行级标签都是不换行的-->
<i>i标签有斜体的效果，可以倾斜文本</i>
<s>s标签有删除效果，淘宝原价格用得比较多</s>
<u>u标签有字体可以给文本带来下划线效果</u>
<span><font face="微软雅黑" size="20" color="red">span</font>标签对局部特别之处做改变</span>
<!--font标记，格式：<font size="大小" color="颜色" face="字体名称">-->
<font>font标签，用得比较少，在css样式中用得比较多</font><!--网页上默认的字体大小是16号字体-->
<h1><font size="18" color="aqua" face="微软雅黑">一级</font>标题</h1
<h2 align="center">二级标签</h2><!--align设置水平位置 -->
<h3 style="text-align: center;">三级标题</h3><!--align="center"和style="text-align: center;实现的效果是一样的-->
<h4>四级标签</h4>
<h5>五级标题</h5>
<h6>六级 标签</h6><!-- 代表空格符号-->
<hr /><!--后面用得比较少-->
<div>
<p> 附近宫颈癌鞥及国家安监嘎哈咯咯IE看附近宫颈癌鞥及国家安监嘎哈咯咯IE看附近宫颈癌鞥及国家安监嘎哈咯咯IE看</p>
</div>
浏览器效果图：
锚点（包括内锚点和外锚点）
内锚点
<a href="#one">点击就查看我的基本信息</a>
<a href="#two">点击就查看我的工作经验</a>
<h2><a id="one"></a></h2>
<p>基本信息基本信息基本信息基本信息</p>
<h2><a id="two"></a></h2>
<p>工作经验工作经验工作经验工作经验</p>
外锚点
<a href="http://www.baidu.com" target="_blank" title="可以打开百度页面">饿了么</a><!--在另一个新页面打开，title表示的我是链接提示的内容-->
<!--页面内锚点-->
<a href="#one">点击就查看我的工作经验</a><!--a*2然后tab键就可以啦-->
<a href="af02.html#two">点击就查看我的个人简历</a><!--跨界面锚点-->
表格
<table width="500" height="300" bgcolor="red" border="3" bordercolor="purple" cellpadding="50" cellspacing="5">
<!--cellspacing可以控制盒子之间的边距，cellpadding的值会把盒子里面的空间撑大-->
<tr><!--代表行-->
<td bgcolor="antiquewhite" align="center">Data</td><!--代表列，列由每行中的单元格的数目决定-->
<td bgcolor="aqua" align="right">Data</td>
。。。。。。。
<!--rowspan合并列，减掉的格子是合并数目减一，不可以在同行里伤害-->
<!--colspan合并行，减掉的格子是合并数目减一，不可以在同行里伤害-->
表格的代码和浏览器效果图如下
练习题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bg{
background-color:bisque;
width: 100%;
height: 300px;
}
*{
margin: auto;
}
</style>
</head>
<body>
<div id="bg">
<h2 align="center">养老金入不敷出</h2>
<p>来源：广州热播 时间:2016-8-15</p><br>
<hr><br>
<p>近日南方报道：加大积极认购那卡国家和嘎哈理工国家了国家安监刚刚回家啊咖喱鸡高鬼魂不久后就和他</p><br>
<p>近日南方报道：加大积极认购那卡国家和嘎哈理工国家了国家安监刚刚回家啊咖喱鸡高鬼魂不久后就和他</p><br>
<p>近日南方报道：加大积极认购那卡国家和嘎哈理工国家了国家安监刚刚回家啊咖喱鸡高鬼魂不久后就和他</p><br>
<h5><b>两项养老保险和嘎哈空格和科技改变付款计划</b></h5><br>
<p>近日南方报道：加大积极认购那卡国家和嘎哈理工国家了国家安监刚刚回家啊咖喱鸡高鬼魂不久后就和他</p><br>
<p>近日南方报道：加大积极认购那卡国家和嘎哈理工国家了国家安监刚刚回家啊咖喱鸡高鬼魂不久后就和他</p><br>
</div>
</body>
</html>
总结：
1.学习了div,p,b,i,s,u,span,font,h1,h2,h3,h4,h5,h6,hr等标签和 空格符号
2.学习了内外锚点要用到的<a href="#one"></a>和h2><a id="one"></a></h2>；<a href="af02.html#two"></a><!--跨界面锚点-->
3.表单中的table表格，tr行，td列。cellspacing可以控制盒子之间的边距，cellpadding的值会把盒子里面的空间撑大；rowspan合并列，减掉的格子是合并数目减一，不可以在同行里伤害，colspan合并行，减掉的格子是合并数目减一，不可以在同行里伤害。
4.图片：图片是行内块级元素，属于第三种，有宽高但不会换行<a href="http://www.taobao.com" target="_blank"><img src="img/mobile_normal.jpg" alt="第一张图片" /></a>
5.快捷键：Ctrl+/可注释掉和取消注释；打div之后按tab键可以显示全部；a>img然后按tab键a标签里面链接到图片；a*2然后tab键可以实现两个a标签；p>a#jingyan然后按tab实现p标签包含a标签和id位jingyan
扫一扫
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
