HTML常见元素介绍

来源：互联网发布：ubuntu默认root密码编辑：程序博客网时间：2024/05/21 02:49

HTML简介：

HTML英文名：Hypertext Markup Language 中文名：超文本链接标示语言（“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素）。而我们常说的HTML5就是HTML的第五次重大修改。

WWW简介：

我们上网输入网址，一般都都包含WWW，例如查询百度，要输入www.baidu.com.其实WWW，是World Wide Web缩写。万维网通常也简称Web,它是由无数的商业，教育、娱乐等资料组成的一个庞大的信息空间。我们浏览的网页就是Web页面。Web页面绝大多数都是由HTML所编写的。

HTML元素与标签：

网页文档的结构和格式的定义是由HTML元素来完成的。而单个或一对标签定义的包含范围就是一个HTML元素。开始标签不以斜扛(/)开头，结束标签以斜杠(/)开头。例如最简单的例子

<span style="font-size:18px;"><body>Hello World!</body></span>

<body>即为开始标签，</body>为结束标签。浏览器显示内容为Hello World!。

HTML元素的四种形式：

空元素

<span style="font-size:18px;"><br></span>

带有属性的空元素

<span style="font-size:18px;"><hr color="red"></span>

带有内容的元素

<span style="font-size:18px;"><title>http://www.baidu.com</tilte></span>

带有内容和属性的元素

<span style="font-size:18px;"><font color="red">http://www.baidu.com</font> </span>

例如我们编写一个

<span style="font-size:18px;"><html>    <head><title>    This is first page.</title>    </head>    <body>Hello World!    </body></html></span>

使用IE打开，显示页面为

其中代码：

与段落控制相关的标签

表示paragraph 作用：创建一个段。属性align表示段的对齐方式，#可以是left、center、right、 justify。

表示line break 作用：换行。

<hr color="clr">表示horizontal rule 作用：插入一条水平线，属性color用来指定线的颜色。

与文本显示相关的标签

<center>...</center>使文本居中显示

<hn align="#">...<hn>用于支出文档的标题，n是从1到6的整数，1是最大标题，6表示最小标题。align用于设置标题对齐方式，#可以是left、center、right

...用于设置字体，属性size表示字体的大小，n可以是从1到7的整数，数字越大，字体越大；属性color表示字体的颜色。

...使文本成为粗体

...使文本成为斜体

HTML注释

注释格式如下

<span style="font-size:18px;"><!--在这里输入注释--></span>

以一首静夜思为例：

<span style="font-size:18px;"><html>   <head><title>静夜思</title>   </head>   <body><!--这是一首诗--><center><h2><font color="red">静夜思</font></h2>　　　　<b>作者：李白</b><hr color="blue"><p>    <b><i><font color="green" size="3">窗前明月光，疑是地上霜。<br>    举头望明月，低头思故乡。</font></i></b>    </center>   </body></html></span>

显示页面

查看源代码之后：

列表-建立数字编号的列表

使用<ol>和<li>标签创建带数字编号的列表

在<ol>标签中使用start属性，设置起始的序号

在<li>标签中使用value属性，改变列表内的编号顺序。

例如

<span style="font-size:18px;"><ol start="10"><li>《VB》<li>《c++》<li>《C#》<li value="20">《JAVA》<li>《VC》</ol></span>

显示页面

JAVA从20开始。

表格—定义表格元素

举例如下：

<span style="font-size:18px;"><html>    <head><title>表格</title></head>    <body><table border="1" align="center" bgcolor="#ffddd">    <caption> 2015年度期末考试成绩单</caption>    <tr align="center" valign="middle"><th>姓名</th><th>数学</th><th>英语</th><th>语文</th>    </tr>    <tr align="center" valign="middle"><td>张三</td><td>78</td><td>88</td><td>89</td>            </tr>    <tr align="center" valign="middle"><td>李四</td><td>78</td><td>88</td><td>89</td>            </tr>    <tr align="center" valign="middle"><td>王五</td><td>78</td><td>88</td><td>89</td>            </tr></table>    </body></html></span>

显示效果如图

input元素

以上是input属性

例如：

<span style="font-size:18px;"><html>    <head><title>表单的例子</title></head>    <body><form method="get" action="reg.jsp">    <table><tr>    <td>用户名：</td>    <td><input type="text" name="user" value="游客" size="30"></td></tr><tr>    <td>密码：</td>        <td><input type="password" name="pwd"></td></tr>    </table>    性别：<input type="radio" name="sex" value="1" checked>男  <input type="radio" name="sex" value="0">女<br>    兴趣爱好：    <input type="checkbox" name="interest" value="football">足球    <input type="checkbox" name="interest" value="basketbal">篮球    <input type="checkbox" name="interest" value="volleyball">排球    <input type="checkbox" name="interest" value="swim">游泳<br>     最高学历：    <select size="1" name="education"><option value=".." selected>..</option><option value="高中">高中</option><option value="大学">大学</option><option value="硕士">硕士</option><option value="博士">博士</option>    </select> <br>    个人简介：<textarea name="personal" rows="5" cols="30">个人简介</textarea><br>    <input type="hidden" name="id" value="001">    <input type="reset" vallue="重写">    <input type="submit" vallue="注册"></form>    </body></html></span>

运行效果如图：

超链接元素

建立一个超链接的语法如下：

<a href="URL">...</a>属性href用于指定链接的目标目标地址由URL定位。在<a></a>之间输入的文本作为浏览器中显示的链接文本。

例如：

<span style="font-size:18px;"><html><head><title>链接的例子</title></head><body><a href="form.html">表单的例子</a><br><a href="http://www.baidu.com">百度</a><br></a></body></html></span>

第一个即为表单的链接，第二个即为百度链接。

1 0