HTML--1.学习使用简单的标签_html的draon标签-CSDN博客

本文链接：https://blog.csdn.net/Dragon_Dai_2017/article/details/77854272

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签	元素内容	结束标签
<p>	This is a paragraph	</p>

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

上面的例子包含三个 HTML 元素：<html>、<body>、<p>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素）。

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

<a href="http://www.w3school.com.cn">This is a link</a>

上面的href为<a>标签的一个属性.

下面练习使用一些HTML中的标签

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>这是一个html页面</title>
	</head>

	<body>
		<basefont size="10">
		
		<h1>主页内容</h1>
		
		<a href="http://blog.csdn.net/dragon_dai_2017">超链接:我的博客</a>
		<!-- 		
			<a> 是超链接文本   href属性表示需要去的地址
		 -->
		<p>
			<font color="red"><b>这是一个段落</b></font><br/>
			<!-- 
				这是注释,可以在MyEclipse中使用，ctrl+shift+C来给选择内容注释
				<br/>是换行
			 -->
		</p>
		<hr align="left" color="#ff0000" width="50%" />
		<!-- 		
			<hr/>水平分隔线
			属性:
			align 对齐方式   
			color="#ff0000"或者"red"或者rgb(255,0,0)
		 -->
		
		<p>
		这是一个段落，<br/>
		<small>序列流</small> <big>RandomAccessFile</big>  RandomAccessFile 的唯一父类是Object，
		与其他流父类不同。<br/>
		
		<font size="+3">加大了3号的字体</font>    <font size="7">字体为7的字</font>  <br/>
		X<sub>2</sub>       X<sup>2</sup>   
		<!-- 
			<sub> 下标   
			<sup> 上标
		 -->
		<b>粗体字</b>	  	<i>斜体字</i>  &reg;   <u>加下划线的字</u>    <strike>加删除线的字</strike> <br/>
		X < Y         Y > X    
		<!-- 		
			在html中特殊字符需要使用下面方式表示
			空格符:    “<”符号 :<    “>”符号: >
			“&”符号: &  “"”符号:"	 
			"®"符号: &reg;  “©”:&copy    “ ™ ”: ™
		-->
		</p>
		
		<hr align="left" width="70%" color="pink" size="+8" />
		<h2>下面是列表演示</h2>   <br/>
		<!-- 
			数据列表 dl: datalist
			dt: 上层项目
			dd: 下层项目
		 -->
		 
		 <h3>数据列表演示</h3>
		<dl>
			<dt>学院</dt>
			<dd>信电院</dd>
			<dd>土木院</dd>
			<dd>美艺院</dd>
		</dl>
		<br/>
		
		<h3>目录(dir)列表演示,<font color="red">已经废弃</font></h3>
		<!-- 
			目录列表 :dir  menu
			dt: 上层项目
			dd: 下层项目
		 -->
		<dir>
			<li>目录1:</li>
			<li>目录2:</li>
			<li>目录3:</li>
		</dir>
		<br/>
		
		<h3> 目录(menu)列表演示,<font color="red">已经废弃</font></h3>
		<menu style="color: red">
			<li>目录1:</li>
			<li>目录2:</li>
			<li>目录3:</li>
		</menu>
		<br/>
		
		<h3> 无序(ul)列表演示</h3>
		<ul type="square">  <!-- square:方形    disc:实心圆  circle:空心圆-->
			<li>列表1:</li>
			<li>列表2:</li>
			<li>列表3:</li>
		</ul>
		<br/>
		
		<h3> 有序(ol)列表演示</h3>
		<ol type="A" start="26" style="background: pink;">
			<li>列表1:
			<li>列表2:
			<li>列表3:
		</ol>
		
		<hr align="left" width="60%"/>
		<h3>列表嵌套</h3>
		<ol type="1" start="1">
			<li>湖南城市学院</li>
				<ol type="A">
					<li>信电院
					<li>土木院
					<li>美艺院
				</ol>
			<li>清华大学
				<ol type="A">
					<li>掏粪
					<li>收破烂
				</ol>
		</ol>
		<hr align="left" width="70%"/>
		<h3>表格演示</h3>
		<table border="1" width="15%" cellspacing="0" align="center" bgcolor="pink" bordercolor="green">
			<caption>表格标题</caption>
			<tr> <th>姓名</th> <th>年龄</th> </tr>
			<tr> <td>龙</td> <td>20</td> </tr>
			<tr> <td>xjj</td> <td>19</td> </tr>
		</table>
	</body>
</html>