HTML实训课程笔记_02
1.
HTML超文本的结构
1.头部分 head
2.主体部分 body
2.
HTML元素结构
1.HTML元素 <根标签>
2.head元素 <提供网页的信息>
3.body元素 <提供网页的内容信息>
3.
常见的HTML标签
<title>标签 提供网页的标题 位于<head>标签中
<meta>标签 提供网页原始数据位于<head>标签中
<link>标签 引入文件(比如引入css的样式> 位于<head>标签中
<p>标签 段落
<strong>加粗
<b>加粗
<U>下划线
<i>斜体
<font>字体设置
<pre>预处理
<a>超链接
<img>引入图片的标签
<table>表格
<tr>行
<td>列
<th>列的标题
<h1>--<h6> 标题
4.
概念：
元素：从标签的开始到标签的结束
标签：<>和标签名
属性:<标签名 属性="属性值">
5.
常见的属性：
body-->bgcolor
font-->color size
table-->cellspacing cellpadding border
td--> rowspan colspan
a-->href
img-->src
6.
table标签的边框设置
frame属性(在border的属性值不为0的状态)
当属性值为：void 代表不要显示表格的边线
当属性值为：above 代表只显现出表格的上边线
当属性值为：below 代表只显现出表格的下边线
当属性值为：hsides 代表只显现出表格的上下边线
当属性值为：lhs 代表只显现表格的左边线
当属性值为：rhs 代表只显现表格的右边线
当属性值为：border/box 代表显现表格的所有边线
rules属性(在border的属性值不为0的状态)
当属性值为：rows 代表只显出横行的格框线
当属性值为：cols 代表只显出直行的格框线
当属性值为：all 代表显示全部格框线
当属性值为：groups代表 列组合水平部分
当属性值为：none 代表不显示任何格框线
7.
ul:无序列表
ol:有序列表
li:列表中的每一项
<ul type="disc"> type属性值有：disc 实心圆 square,实心方形 circle 空心圆
<li></li>
<li></li>
</ul>
<ol type="i"> type属性值有：1 i a start属性 从那个数字开始
<li></li>
<li></li>
</ol>
<dl>
<dt>一级列表项</dt>
<dd>二级列表项</dd>
</dl>
案例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<h3>星期中的每一天</h3>
<ul type="square"> <!--type circle空心圆 disc实心圆 square实心方形-->
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ul>
<hr noshade="noshade"/>
<h3>星期中的每一天</h3>
<ol type="i" start="3"> <!-- type 1数字 i 阿拉伯数字 a 英文数字-->
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
<li>星期日</li>
</ol>
<dl>
<dt>家用电器1</dt>
<dd>生活电器1</dd>
<dd>厨房电器1</dd>
<dd>大电器1</dd>
<dt>家用电器2</dt>
<dd>生活电器2</dd>
<dd>厨房电器2</dd>
<dd>大电器2</dd>
</dl>
</body>
</html>
8.
超链接
<a href=""></a> <!--超链接 href="链接的目标地址"-->
百度国内新闻(部分)案例
效果:
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
a{
text-decoration:none;
color:#000000;
}
a:hover{
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="5" frame="box" align="center">
<tr>
<td colspan="2" width="500"><b>港澳台</b></td>
<td width="320"><b>台湾民生</b></td>
</tr>
<tr>
<td>
<h5><a href="#">台湾></a></h5>
<ul>
<li><a href="#"><a href="#">台复兴航空增台中至宜昌包机 吸引更多大陆旅客</a>
<font size="2" color="#666666">18:18</font> </li>
<li><a href="#"><a href="#">台湾欲爆抠门企业名单 老板吓傻:还怎么做生意 </a>
<font size="2" color="#666666">18:14</font> </li>
<li><a href="#">台北公务员因上大陆节目批“反服贸”运动辞职</a>
<font size="2" color="#666666">05-12 17:08</font> </li>
<li><a href="#">身份及工作敏感 马英九美女摄影师成话题人物</a>
<font size="2" color="#666666"> 16:56 </font> </li>
<li><a href="#">民主和民粹：差之一字，谬之千里</a>
<font size="2" color="#666666"> 05-12 09:48</font> </li>
<li><a href="#">一纸抵千金！ 超值台湾游启动</a>
<font size="2" color="#666666">16:19 </font> </li>
</ul>
<h4> <a href="#">港澳 ></a></h4>
<ul>
<li><a href="#">香港律政司率团访山东 推广仲裁服务</a>
<font size="2" color="#666666">19:02 </font> </li>
<li><a href="#">香港南通同乡会访问团来如东考察</a>
<font size="2" color="#666666"> 19:28 </font> </li>
<li><a href="#">香港主流梦工场基金会一行到河南太平明德小学慰问</a>
<font size="2" color="#666666"> 16:34</font> </li>
<li><a href="#">香港舆论高度评价邓小平“一国两制”理论</a>
<font size="2" color="#666666">13:06 </font> </li>
<li><a href="#"> 到香港去 内地移民潮</a>
<font size="2" color="#666666">11:29 </font> </li>
<li><a href="#">东盟－香港自贸协定 将于近期展开谈判</a>
<font size="2" color="#666666">15:20</font> </li>
</ul>
</td>
<td>
<img src="images/news_01.jpg"><br/>
<font size="2">中新网</font>
<br/>
<img src="images/news_02.jpg"><br/>
<font size="2">我家网</font>
</td>
<td>
<h5>台立法机构协商停摆 在野党累计霸占主席台41次</h5>
<font size="2"> 中新网5月13日电据台湾“中央社”报道，
台当局立法机构院会今天(13日)排定处理“
两岸监督条例”复议案和“公职人员选举罢免法”...详细 >
</font>
<ul>
<li><a href="#"><font size="2">两岸积极参与“清新福建”标识征集 </font></a></li>
<li><a href="#"><font size="2">台复兴航空增台中至宜昌包机 吸引更多大陆旅客</font></a></li>
<li><a href="#"><font size="2">台湾欲爆抠门企业名单 老板吓傻:还怎么做生意</font></a> </li>
<li><a href="#"><font size="2">南丹移民区架起“便民桥”</font></a> </li>
<li><a href="#"><font size="2">河南荥阳市台办积极为台企排忧解难</font></a></li>
<li><a href="#"><font size="2">《中国进行式》行进到贺州</font></a> </li>
<li><a href="#"><font size="2">揭狂喷大陆的港台滚粗明星 田震骂杜汶泽"遭雷劈"</font></a></li>
<li><a href="#"><font size="2">海沧瑞青宫376米非遗“蜈蚣阁”穿街过</font></a> </li>
<li><a href="#"><font size="2">直播：2014山东（济南）台湾名品博览会最新筹备..</font></a></li>
<li><a href="#"><font size="2">和本堂携台湾鲜食便当高调进北京</font></a> </li>
</ul>
</td>
</tr>
</table>
</body>
</html>