首页 > 代码库 > 24-HTML基础
24-HTML基础
html
超文本标记语言(Hypertext Markup Language, HTML)
通过标签语言来标记要显示的网页中的各个部分.是一种浏览器认识的规则.
浏览器按照顺序渲染网页文件,然后根据标记符解释和显示内容,但需要注意,不同浏览器对同一个标签可能会有不同的解释.
扩展名: .html/.htm
语法结构:
<wiz_code_mirror>
1
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
内容体
9
</body>
10
</html>
<!DOCTYPE html>: 告诉浏览器使用什么样的html或者xhtml来解析html文档
<html>..</html>: 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
<head>..</head>: 元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
<title>..</title>: 定义网页标题，在浏览器标题栏显示。
<body>..</body>: 之间的文本是可见的网页主体内容
注释: <!--hello,world-->
1,标签尖括号关键词,如<html>
2,标签一般成对出现,如<div>..</div>
3,标签不区分大小写,推荐小写
4,一对标签内包含的是标签体,功能简单的标签可能仅有一个标签如<br/>,这叫做自闭和标签.
5,标签可嵌套
6,标签可定义属性,如<标签名 属性1=‘value1‘ 属性2=‘value2‘ ...>...</标签名>,多属性用空格分开
标签类型:
--块级标签:独占一行
--内联标签:仅内容长度大小
常用标签介绍:
<wiz_code_mirror>
1
<!DOCTYPE html> <!--声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范-->
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式.
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
<head>常用的标签</head>
<wiz_code_mirror>
1
<head>
2
<meta name=‘keywords‘ content=‘IT技术,HTML,BLOG,...‘> <!--指定被搜索到的关键字-->
3
<meta name="description" content="这是一个关于IT技术的网站."> <!--指定网站显示的描述-->
4
5
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> <!--2秒后,将当前页面跳转至指定URL-->
6
<meta http-equiv="content-Type" charset="UTF8"> <!--指定字符集格式
7
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> <!--兼容IE7-->
8
9
<title>hello,world.</title>
10
11
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--链接一个图标(icon)-->
12
<link rel="stylesheet" href="css.css"> <!--链接一个css文件-->
13
<script src="hello.js"></script> <!--链接一个js文件-->
14
15
</head>
<body>常用标签</body>
<wiz_code_mirror>
1
<body>
2
<h3>鹅鹅鹅,曲项向天歌.</h3> <!--x取值范围是1~6; 从大到小. 用来表示标题-->
3
<p>鹅鹅鹅,</p> <!--段落标签,内容会当做一行,且上下文有行间隔空白-->
4
<p>曲项向天歌.</p> <!--段落标签,内容会当做一行,且上下文有行间隔空白-->
5
<b>白毛浮绿水,</b> <!--加粗标签-->
6
<em>红掌拨青波.</em> <!--斜体-->
7
8
<div style="">
9
hello,world.
10
</div> <!--块级元素,独占整行,无实际意义,主要为了支持定义CSS样式-->
11
12
<span style="">
13
helloworld.
14
</span> <!--内联元素,文本长度,无实际意义,主要为了支持定义CSS样式-->
15
?
16
<img src="1.png" width="200px" height="150px" alt="美女" title="包小姐"> <!--插入图片,一般使用CSS插入图片-->
17
18
<a href="http://www.baidu.com">
19
hello,world.
20
</a> <!--超链接标签-->
21
?
22
<a href="http://www.baidu.com" target="_blank">
23
hello,world.
24
</a> <!--target="_blank":新窗口跳转,默认当前页面跳转-->
25
?
26
<a href="http://www.baidu.com" target="_blank">
27
<img src="1.png"> <!--嵌套图片为超链接-->
28
</a>
29
30
<ul>
31
<li>无序列表1</li>
32
<li>无序列表2</li>
33
</ul>
34
?
35
<ol>
36
<li>有序列表1</li>
37
<li>有序列表2</li>
38
</ol>
39
?
40
<dl>
41
<dt> 列表标题:河北省 </dt>
42
<dd> 列表项:石家庄 </dd>
43
<dd> 列表项:衡水 </dd>
44
</dl>
45
?
46
<table border="1" cellpadding="10px" cellspacing="30px">
47
<tr>
48
<th>ID</th>
49
<th>Name</th>
50
<th>Age</th>
51
<th>meale</th>
52
<th>work</th>
53
</tr> <!--定义行-->
54
?
55
<tr>
56
<td>1</td>
57
<td>xiaofei</td>
58
<td>18</td>
59
<td>男</td>
60
<td>IT</td>
61
</tr>
62
</table>
63
?
64
65
?
66
</body>
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素;
行内元素则不需另起一行;
块级可以嵌套内联,块级,内联只能嵌套内联;
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的
img标签属性:
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表格属性:
<tr>: table row
<th>: table head cell,表头样式
<td>: table data cell,表数据样式
属性:
border="n": 表格边框."n"指定边框厚度
cellpadding: 内边距,内容与边框之间的距离
cellspacing: 外边距.单元格与最外边框的距离
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
练习:
<wiz_code_mirror>
1
<!--第一张图-->
2
<!DOCTYPE html>
3
<html lang="en">
4
<head>
5
<meta charset="UTF-8">
6
<title>菜谱</title>
7
</head>
8
<body>
9
<table border="">
10
<tr>
11
<td colspan="3">星期一菜谱</td>
12
</tr>
13
<tr>
14
<td rowspan="2">素菜</td>
15
<td>青草茄子</td>
16
<td>花椒扁豆</td>
17
</tr>
18
<tr>
19
<td>小葱豆腐</td>
20
<td>炒白菜</td>
21
</tr>
22
<tr>
23
<td rowspan="2">荤菜</td>
24
<td>油焖大虾</td>
25
<td>海参鱼翅</td>
26
</tr>
27
<tr>
28
<td>红烧肉<img src="红烧肉.png"></td>
29
<td>烤全羊</td>
30
</tr>
31
</table>
32
</body>
33
</html>
34
?
35
<!--第二张图-->
36
<!DOCTYPE html>
37
<html lang="en">
38
<head>
39
<meta charset="UTF-8">
40
<title>课程表</title>
41
</head>
42
<body>
43
<table border="">
44
<tr>
45
<th>项目</th>
46
<th colspan="5">上课</th>
47
<th colspan="2">休息</th>
48
</tr>
49
<tr>
50
<th>星期</th>
51
<th>星期一</th>
52
<th>星期二</th>
53
<th>星期三</th>
54
<th>星期四</th>
55
<th>星期五</th>
56
<th>星期六</th>
57
<th>星期日</th>
58
</tr>
59
<tr>
60
<td rowspan="4">上午</td>
61
<td>语文</td>
62
<td>数学</td>
63
<td>英语</td>
64
<td>英语</td>
65
<td>物理</td>
66
<td>计算机</td>
67
<td rowspan="4">休息</td>
68
</tr>
69
<tr>
70
<td>数学</td>
71
<td>数学</td>
72
<td>地理</td>
73
<td>历史</td>
74
<td>化学</td>
75
<td>计算机</td>
76
</tr>
77
<tr>
78
<td>化学</td>
79
<td>语文</td>
80
<td>体育</td>
81
<td>计算机</td>
82
<td>英语</td>
83
<td>计算机</td>
84
</tr>
85
<tr>
86
<td>政治</td>
87
<td>英语</td>
88
<td>体育</td>
89
<td>历史</td>
90
<td>地理</td>
91
<td>计算机</td>
92
</tr>
93
<tr>
94
<td rowspan="2">下午</td>
95
<td>语文</td>
96
<td>数学</td>
97
<td>英语</td>
98
<td>英语</td>
99
<td>物理</td>
100
<td>计算机</td>
101
<td rowspan="2">休息</td>
102
</tr>
103
<tr>
104
<td>数学</td>
105
<td>数学</td>
106
<td>地理</td>
107
<td>历史</td>
108
<td>化学</td>
109
<td>计算机</td>
110
</tr>
111
</table>
112
</body>
113
</html>
表单标签form
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互.
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等.
表单还可以包含textarea、select、fieldset和 label标签.
表单属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get默认取值就是get
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容.
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息.
<input>系列标签
<1> 表单类型
type:
text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.)
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：
请求方式必须是post
enctype="multipart/form-data"
<2> 表单属性
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
<wiz_code_mirror>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
<h3>注册页面</h3>
9
10
<form action="" method="get">
11
<p>
12
姓名: <input type="text" name="username" value="你的名字">
13
</p>
14
<p>
15
密码: <input type="password" name="pwd" value="你的密码">
16
</p>
17
<p>
18
爱好:
19
<input type="checkbox" value="basketball">篮球
20
<input type="checkbox" value="football">足球
21
<input type="checkbox" value="ball">球
22
</p>
23
<p>
24
性别:
25
<input type="radio" name="sex" value="1">男
26
<input type="radio" name="sex" value="0">女
27
</p>
28
<p>
29
<input type="file">
30
</p>
31
<p>
32
<input type="reset">
33
</p>
34
<p>
35
<input type="button" value="按钮">
36
</p>
37
<p>
38
<input type="submit" value="快提交">
39
</p>
40
</form>
41
</body>
42
</html>
<select>标签
下拉选项标签属性
name:表单提交项的键.
size：选项显示个数
multiple：开启多选功能,multiple="multiple",属性名和属性值相同,默认可只写一个属性名
<optgroup>为每一项加上分组
<option> 下拉选中的每一项 属性：
value:表单提交项的值.
selected: 下拉选项默认被选中
<wiz_code_mirror>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<title>Title</title>
6
</head>
7
<body>
8
<h3>注册页面</h3>
9
10
<form action="" method="get">
11
<p>
12
姓名: <input type="text" name="username" value="你的名字">
13
</p>
14
<p>
15
密码: <input type="password" name="pwd" value="你的密码">
16
</p>
17
<p>
18
爱好:
19
<input type="checkbox" value="basketball">篮球
20
<input type="checkbox" value="football">足球
21
<input type="checkbox" value="ball">球
22
</p>
23
<p>
24
性别:
25
<input type="radio" name="sex" value="1" checked>男
26
<input type="radio" name="sex" value="0">女
27
</p>
28
<select name="province" id="" size="3" multiple>
29
<option value="hebei" selected>河北省</option>
30
<option value="henan">河南省</option>
31
<option value="shandong">山东省</option>
32
<option value="shanxi">山西省</option>
33
<option value="sichuan">四川省</option>
34
</select>
35
?
36
<p>
37
<input type="submit" value="快提交">
38
</p>
39
</form>
40
</body>
41
</html>
<textarea>多行文本框
<wiz_code_mirror>
1
<p>
2
<textarea cols="10" rows="10" name=“person”>
3
默认内容
4
</textarea>
5
</p>
<label>标签
定义：<label> 标签为 input 元素定义标注（标记）
说明：
1,label 元素不会向用户呈现任何特殊效果
2,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同,for会去查找标签的id
3,id是标签id,全局唯一,用于排错时可以方便查找
<wiz_code_mirror>
1
<p>
2
<label for="user">姓名: </label>
3
<input type="text" name="username" id="user">
4
</p>
5
<p>
6
<label for="pwd">密码: </label>
7
<input type="password" name="pwd" id="pwd">
8
</p>
<fieldset>标签(不常用,了解即可)
<wiz_code_mirror>
1
<p>
2
<fieldset>
3
<legend>登录吧</legend>
4
<input type="text">
5
</fieldset>
6
</p>
24-HTML基础
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。