HTML--1.学习使用简单的标签

来源：互联网发布：java电脑版安装包多大编辑：程序博客网时间：2024/05/22 00:22

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: datalistdt: 上层项目dd: 下层项目 -->  <h3>数据列表演示</h3><dl><dt>学院</dt><dd>信电院</dd><dd>土木院</dd><dd>美艺院</dd></dl><br/><h3>目录(dir)列表演示,<font color="red">已经废弃</font></h3><!-- 目录列表 :dir  menudt: 上层项目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>

阅读全文

1 0