집 > 기사 > 웹 프론트엔드 > HTML의 기본 구조를 간략하게 설명하는 방법(코드 포함)

HTML의 기본 구조를 간략하게 설명하는 방법(코드 포함)

不言원래의: 2018-07-21 17:49:107985검색

每一个HTML文件都是有自己固定的结构的，每一个文件的基本结构又都包含有三个标记：HTML文件标记；HEAD文件头部标记；BODY文件主体标记；接下来我们就来具体看一下HTML基本结构的代码。

基本结构代码：

1 100db36a723c770d327fc0aef2ce13b1
2     93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1
3     6c04bd5ca3fcae76e30b72ad730ca86d...36cc49f0c466276486e50c850b7e4956
4 73a6ac4ed44ffec12cee46588e518a5e

代码讲解：

1. 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e称为根标签，所有的网页标签都在100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e中。

2. 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签用于定义文档的头部，它是所有头部元素的容器。头部元素有b2386ffb911b14667cb8f0f91ea547a7、3f1c4e4b6b16bbbd69b2ee476dc4f83a、 c9ccee2e6ea535a969eb3f532ad9fe89、2cdf5bf648cf2f33323966d7f58a7f3f、 e8e496c15ba93d81f6ea4fe5f55a2244等标签，头部标签在下一小节中会有详细介绍。

3. 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956标签之间的内容是网页的主要内容，如4a249f0d628e2318394fd9b75b4636b1、e388a4556c0f65e1904146cc1a846bee、3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

4.e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3是文章的段落标签

5.4fc71829d7d7f105985af72054fc4928204c8ffa078c87c26d918bbcb1cc4f3c表示文章标题（x表示数字，为文章标题等级1-6）

6.907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338表示斜体

7.8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0表示加粗

8.c9ccee2e6ea535a969eb3f532ad9fe89

span{

在这里配置样式，比如文字大小，颜色等

}

531ac245ce3e4fe3d50054a55f265927

45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114设置单独样式

9.1244aa79a84dea840d8e55c52dc978699c3e8ae475e7f023c5ba43842c1b434e引用，会自动加上双引号

10.b8a712a75cab9a5aded02f74998372b41aee16100a65d522474e4de7ff568f4a缩进

11.df250b2156c434f3390392d09b1c9563换行

12. 输入空格

13.fa8fd94cc4b4d9671e4ee513ae2a31d1添加水平横线

14.208700f394e4cf40a7aa505373e0130bf6b6163991889e046b98f3ad8b2fe548输入地址信息（默认以斜体表示）

15.ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd代码标签

16.e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec大段代码标签

17.无序列表

ff6d136ddc5fdfeffaf53ff6ee95f185

25edfb22a4f469ecb59f1190150159c6内容bed06894275b65c1ab86501b08a632eb

929d1f5ca49e04fdcb27f9465b944689

18.有序列表(列表会自动加上序号)

c34106e0b4e09414b63b2ea253ff83d6

25edfb22a4f469ecb59f1190150159c6内容bed06894275b65c1ab86501b08a632eb

f6f112ef45f603be226bc581f9dd5e90

19.dc6dce4a544fdca2df29d5ac0ea9906b…16b28748ea4df4d9c2150843fecfba68：划分区域（独立逻辑）

20.84c22abd13c57af190dff33e5a150593…16b28748ea4df4d9c2150843fecfba68：划分板块并给板块命名

21.表格展示（没有框线）

<table>
     <tbody>
         <tr>
         <th>班级</th>
         <th>学生数</th>
         <th>平均成绩</th>
         </tr>
 
         <tr>
         <td>一班</td>
         <td>30</td>
         <td>89</td>
         </tr>
     </tbody>
</table>

22.346db93fcbbab906d286a4a0576f8408f16b1740fad44fb09bfe928bcc527e08为表格添加摘要

23.63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8为表格添加标题

24.78f6b765dbf54648761fb9c79f8f088a..5db79b134e9f6b82c0b36e0489ee08ed加入网页链接（在当前页面打开）

25.6447bb7719c59e058d69b8bcf75ca3eb..5db79b134e9f6b82c0b36e0489ee08ed加入网页链接（新建页面）

26.在网页中链接Email地址

如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

27.b72430f9bcf1b70669685e3a77291d70：为网页插入图片

28.表单标签：表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

84e97e13b6fc0a95c0945d7d5e5ed1bd

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php">
      <label for="username">用户名:</label>
      <input type="text"  name="username" id="username" value="" />
 
      <br/>
 
      <label for="pass">密 码:</label>
      <input type="password"  name="pass" id="pass"     value="" /> 
 
      <input type="submit"    value="确定"  name="submit" />
      <input type="reset"     value="重置"  name="reset" />
</form>
</body>
</html>

输出：

29.输入大段内容：（文本域）8b85f4f6ea25a77cbd6ebb7d8b3df388..40587128eee8df8f03d0b607fe983014

　　　　cols = "行数"

　　　　rows = "列数"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>个人简介：</label>
    <textarea cols = "50" rows = "10">在这里输入内容...</textarea>
    <input type="submit" value="确定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form>
</body>
</html>

输出：

30.单选/复选框

ac5c0a6d6b419fbbc141adfde8bd9b6c

1、type:

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

　　（同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>单选框、复选框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>
</body>
</html>

输出：

31.下拉框表221f08282418e2996498697df914ce4e..18bb6ffaf0152bbe49cd8a3620346341

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected = "selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

输出：

221f08282418e2996498697df914ce4e..18bb6ffaf0152bbe49cd8a3620346341下拉框列表

selected = "selected"：默认选中

32.下拉框表支持复选:multiple = "multiple"

d69a5d8cbc60af03c1412549ce6e352b..221f08282418e2996498697df914ce4e

输出：

（在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项）

33.提交按钮

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>提交按钮</title>
</head>
<body>
<form  method="post" action="save.php">
    <label for="myName">姓名：</label>
    <input type="text" value=" " name="myName " />
    <input type="submit" value="提交" name="submitBtn" />
</form>
</body>
</html>

输出：

34.重置按钮

在33中把type的值改为reset.

35.form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

cb584e9f74331368bb633bdad40c5b0e

　　注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
 
<body>
<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
 
  <br/><br/>
 
  你对什么运动感兴趣：<br />
  <label for="jog">慢跑</label>
  <input type="checkbox" name="jog" id="jog" /><br />
  <label for="climb">登山</label>
  <input type="checkbox" name="climb" id="climb" /><br />
  <label for="basketball">篮球</label>
  <input type="checkbox" name="basketball" id="basketball" />
 
</form>
 
</body>
</html>

输出：

HTML의 기본 구조를 간략하게 설명하는 방법(코드 포함)

관련 기사