Posted on by Mingyu Zhu

[内容] HTML 的常用结构和常用元素

内容一：HTML 常用结构元素

1.1 HTML 常用结构要素

1) <!DOCTYPE html>

文档是 HTML5 的声明

2) <html>......</html>

HTML 的根

3) <head>......</head>

包含 meta 和 title

4) <title>......</title>

声明文档的标题

5) <body>......</body>

声明文档的可见内容

6) <br/>

声明换行

7) <div>......</div>

声明一个空间

8) <h1>......</h1>

声明第一种标题

9) <h2>......</h2>

声明第二种标题

10) <h3>......</h3>

声明第三种标题

1.2 HTML 常用结构案例

<!DOCTYPE html>
<!- 作者:Mingyu Zhu -> 
<!- 名称:Mingyu Zhu website ->

<html>

 <head>
  <meta charste="utf-8">
  <title>朱明宇 - Zhu Mingyu</title>
 </head>

 <body>
  <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> 
   <img src="dimfigure.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;"> 
  </div>

  <div style="width:300px;height:50px;float:left"> 
   <form action="http://www.google.com/search" method="get"> 
    <input type="text" name="q" size="20" maxlength="255" value="" /> 
    <input type="submit" name="btnG" value="Google" /> 
   </form> 
  </div> 

  <div style="width:300px;height:50px;float:left"> 
   <form action="http://www.baidu.com/s"> 
    <input type="text" name="wd" id="kw"/> 
    <input type="submit" value="Baidu" /> 
   </form> 
  </div> 

  <div style="left: 600px; position: absolute; top: 300px;font-size:15px;">“When I don't need to do anything, please don't let me do anything. Let me immerse myself in my own thoughts. It's like merging with the profound peace in the vast mountains.”</div>

  <a href="http://eternalcenter.com" style="left: 8px; position: absolute; top: 185px;font-size:20px;color:black">Eternal Center（eternalcenter.com）</a>
 </body>

<html/>

内容二：HTML 常用内容元素

2.1 HTML 文本元素

2.1.1 HTML 文本元素的格式
<p>......</p>

声明一个段落

2.1.2 HTML 文本元素的替换格式
1) <b>......</b>

声明文字加粗

2) <i>......</i>

声明文字倾斜

3) <u>......</u>

声明文字有下划线

4) <s>......</s>

声明文字有删除线

5) <sup>......</sup>

声明文字有上标

6) <sub>......</sub>

声明文字有下标

7) <big>......</big>

声明文字放大

8) <small>......</small>

声明文字缩小

2.2 HTML 链接元素

2.2.1 HTML 链接元素的格式
<a href="<website>"><link description></a>
2.2.2 HTML 链接元素的案例
<a href="eternalcenter.com">Eternal Center</a，target="_blank">

（补充：这里以网址是 eternalcenter.com，介绍是 Eternal Center，新打开一个页面为例）

2.3 HTML 列表元素

2.3.1 HTML 有序列表元素
2.3.1.1 HTML 有序列表元素的格式
1) <ol>......</ol>

声明有序列表

2) <li>......</li>

声明有序列表里的行

3) <ol>......</ol>

里只能有

<li>......</li>
2.3.1.2 有序列表排列方式的属性声明
2.3.1.2.1 有序列表排列方式的属性值名
type
2.3.1.2.2 有序列表排列方式的可选属性值

1) 1 声明按数字排序 （1 也是有序列表的默认值）
2) A 声明按大写英文字母排序
3) a 声明按小谢英文字母排序
4) I 声明按大写罗马字母排序
5) i 声明按小写罗马字母排序

2.3.1.3 有序列表排列方式的使用案例
2.3.1.3.1 数字有序列表排列方式的使用案例
<h4>number list case</h4>
<ol>
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ol>
2.3.1.3.2 字母有序列表排列方式的使用案例
<h4>alphabet case</h4>
<ol type="A">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ol>
2.3.2 HTML 无序列表元素
2.3.2.1 HTML 无序列表元素的格式
1) <ol>......</ol>

声明无序列表

2) <li>......</li>

声明无序列表里的行

3) <ol>......</ol>

里只能有

<li>......</li>
2.3.2.2 无序列表排列方式的属性声明
2.3.2.2.1 无序列表排列方式的属性值名
type
2.3.2.2.2 无序列表排列方式的可选属性值
1) disc

声明实心原点（disc 也是无序列表的默认值）

2) circle

声明空心原点

3) square

声明实心方块

4) none

声明无标识

2.3.2.3 有序列表排列方式的使用案例
2.3.2.3.1 有序空心原点列表排列方式的使用案例
<h4>circle list case</h4>
<ul style="list-style-type:circle">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ul>
2.3.2.3.2 有序实心方块列表排列方式的使用案例
<h4>square list case</h4>
<ul style="list-style-type:square">
 <li>eternalcenter.com</li>
 <li>eternalcentre.com</li>
 <li>ec-x.com</li>
 <li>yhzx-x.com</li>
</ul>

2.4 HTML 在列表中再添加列表

2.4.1 HTML 在列表中再添加列表的格式
<li>......</li>

元素里再添加

<li>......</li>
2.4.2 HTML 在列表中再添加列表的案例
<ul>
 <li>eternalcenter.com</li>
  <li>abbreviation
    <ul>
     <li>ec-x.com</li>
     <li>yhzx-x.com</li>
    </ul>
   </li>
  <li>eternalcentre.com</li>
</ul>

2.5 HTML 表格元素

2.5.1 HTML 表格常用元素列表
1) <table>......</table>
2) <tr>......</tr>
3) <td>......</td>
2.5.2 HTML 表格常用元素
2.5.2.1 <table>……<table> 元素
2.5.2.1.1 <table>……<table> 元素的作用

用于声明表格

2.5.2.1.2 <table>……<table> 元素的格式
<table>......</table>
2.5.2.1.3 <table>……<table> 元素的常用属性
1) width

声明表格的宽度

2) height

声明表格的高度

3) align

声明表格的对齐方式，有三个参数：

left center right
4) border

声明表格边框的宽度

5) cellpadding

声明表格内容和边框之间的距离

6) bgcolor

声明表格的背景颜色

2.5.2.2 <tr>……<tr> 元素
2.5.2.2.1 <tr>……<tr> 元素的作用

用于声明行，每有一行就有一组

2.5.2.2.2 <tr>……<tr> 元素的格式
<tr>......</tr>
2.5.2.2.3 <tr>……<tr> 元素的常用属性
1) align

声明表格水平向的对齐方式，有三个参数

left center right

2) valign

声明垂直向的对其方式，有三个参数

top middle bottom
2.5.2.3 <td>……<td> 元素
2.5.2.3.1 <td>……<td> 元素的作用

用于声明列，每有一列就有一组

2.5.2.3.2 <td>……<td> 元素的格式
 <td>......</td>
2.5.2.3.3 <td>……<td> 元素的常用属性
1) align

声明表格水平向的对齐方式，有三个参数：

left center right
2) valign

声明垂直向的对齐方式，有三个参数：

top middle bottom
3) width

声明表格的宽度

4) height

声明表格的高度

5) colspan

声明单元格的横向快列

6) rowspan

声明单元格的众向跨行

2.5.3 HTML 表格元素的案例
2.5.3.1 HTML 表格元素案例一：标准表格
<table border="1">
 <tr>
  <td>first row, first column</td>
  <td>first row, second column</td>
 </tr>
 <tr>
  <td>second row, first column</td>
  <td>second row, second column</td>
 </tr>
</table>
2.5.3.2 HTML 表格元素案例二：横向合并的表格
<body>
 <h4>cell spanning two columns case</h4>
 <table border="1">
  <tr>
   <td>Website</td>
   <td colspan="2">url</td>
  </tr>
  <tr>
   <td>Eternal Center</td>
   <td>eternalcenter.com</td>
   <td>eternalcentre.com</td>
  </tr>
 </table>
2.5.3.3 HTML 表格元素案例三：纵向合并的表格
 <h4>cell crowding across two lines case</h4>
 <table border="1">
  <tr>
   <td>Website</td>
   <td>Eternal Center</td>
  </tr>
  <tr>
   <td rowspan="2">url</td>
   <td>eternalcenter.com</td>
  </tr>
  <tr>
   <td>eternalcentre.com</td>
  </tr>
 </table>
</body>

2.6 HTML 图片元素

2.6.1 HTML 有边框图片的链接案例
<a href="http://www.eternalcenter.com">
<img  border="10" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>

（补充：这里以网址是 www.eternalcenter.com，介绍是 HTML Eternal Center，图片是 eternalcenter.gif，宽度是 32，高度是 32 的链接为例）

2.6.2 HTML 无边框图片链接的案例
<a href="http://www.baidu.com">
<img border="0" src="eternalcenter.gif" alt="HTML Eternal Center" width="32" height="32">
</a>

（补充：这里以网址是 www.eternalcenter.com，介绍是 HTML Eternal Center，图片是 eternalcenter.gif，宽度是 32，高度是 32 的链接为例）

2.6.3 HTML 背景图片的案例
<img src="space.JPG" height="100%" width="100%" style="position:absolute;left:0; top:0;">

（补充：这里以设置 space.JPG 作为背景图片）

2.7 HTML 表单元素

2.7.1 HTML 表单元素的作用

1) 接收用户的数据
2) 提交给服务器

2.7.2 HTML 表单元素的结构
2.7.2.1 HTML 表单元素结构的分类
1) <form>......<form>

2) 表单控件

2.7.2.2 HTML 表单元素结构的分类说明
2.7.2.2.1 <form>……<form> 元素的常用属性
1) action

提交给服务器的处理程序的地址

2) method

数据的提交方式，有 get 和 post 两个参数

3) enctype

指定加密方式

4) name

表单的名称

2.7.2.2.2 表单控件的种类

1) 文本域
2) 密码域
3) 选择框（分为单选框和复选框）
4) 按钮
5) 隐藏域和文件选择框

2.7.3 HTML 表单元素的表单控件
2.7.3.1 HTML 表单元素的文本域
2.7.3.1.1 HTML 表单元素的文本域的作用

用于键入字母和数字

2.7.3.1.2 HTML 表单元素的文本域的格式
<input type="text">
2.7.3.1.3 HTML 表单元素的文本域的常用属性
1) name

名称

2) value

值

3) maxlength

最大输入长度

4) readonly

只读

5) placeholder

提示占位符

2.7.3.1.4 HTML 表单元素的文本域的案例
<form>
 First name: <input type="text" name="firstname"><br>
 Last name: <input type="text" name="lastname">
</form>
2.7.3.2 HTML 表单元素的密码域
2.7.3.2.1 HTML 表单元素的密码域的作用

用于输入密码

2.7.3.2.2 HTML 表单元素的密码域的格式
<input type="password">
2.7.3.2.3 HTML 表单元素的密码域的常用属性
1) name

名称

2) value

值

3) maxlength

最大输入长度

4) readonly

只读

5) placeholder

提示占位符

2.7.3.3 HTML 表单元素的选择框
2.7.3.3.1 HTML 表单元素的选择框的作用

用于选择

2.7.3.3.2 HTML 表单元素的选择框的常用属性
1) name

名称

2) value

值

3) checked

预选中的选项，无值

4) type

选择框的模式，有两个参数单选框和多选框两个参数：

radio checkbox
2.7.3.4 HTML 表单元素的选择框的案例
2.7.3.4.1 HTML 表单元素的选择框的案例一：单选框案例
<form>
 <input type="radio" name="vehicle" value="eternalcenter">I click eternalcenter<br>
 <input type="radio" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
2.7.3.4.2 HTML 表单元素的选择框的案例二：多选框案例
<form>
 <input type="checkbox" name="vehicle" value="eternalcenter">I click eternalcenter<br>
 <input type="checkbox" name="vehicle" value="eternalcentre">I click eternalcentre
</form>
2.7.3.5 HTML 表单元素的按钮
2.7.3.5.1 HTML 表单元素的按钮的案例一：普通的按钮
<form action="">
 <input type="button" value="Hello World!">
</form>

（补充：这里以设置一个值为 Hello World 的按钮为例）

2.7.3.5.2 HTML 表单元素的按钮的案例二：提交的按钮
<form name="input" action="html_form_action.php" method="get">
 Username: <input type="text" name="user">
 <input type="submit" value="Submit">
</form>

（补充：这里以设置一个输入用户名的框和提交按钮的页面为例）

2.7.3.5.3 HTML 表单元素的按钮的案例三：重置的按钮
<form name="input" action="html_form_action.php" method="get">
 Username: <input type="text" name="user">
 <input type="submit" value="Submit">
 <input type="reset" value="reset">
</form>

（补充：这里以设置一个输入用户名的框、提交按钮、重置按钮页面为例）

2.7.3.6 HTML 表单元素的隐藏域和文件选择框
2.7.3.6.1 HTML 表单元素的隐藏域
2.7.3.6.1.1 HTML 表单元素的隐藏域的作用

提交给服务器的数据无法被用户看到

2.7.3.6.1.2 HTML 表单元素的隐藏域的格式
<input type=”hidden”>
2.7.3.6.1.3 HTML 表单元素的隐藏域的常用属性

1) name

名称

2) value

值

2.7.3.6.2 HTML 表单元素的文件选择框
2.7.3.6.2.1 HTML 表单元素的文件选择框的作用

点击的同时提交文件

2.7.3.6.2.2 HTML 表单元素的文件选择框的格式
<input type=”file”>
2.7.3.6.2.3 HTML 表单元素的文件选择框的常用属性
name

名称