HTML学习笔记

HTML学习笔记

一、html的基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>						<!--声明文档的解析类型避免浏览器的怪异模式-->
<html>								<!--根标签（开始）-->
<head>								<!--头标签（开始）-->
<title>html的基本结构</title>		<!--标题标签-->
</head>								<!--头标签（结束）-->
<body>								<!--主体标签-->
主体内容								<!--浏览器显示的主体内容区域-->
</body>								<!--主体标签（结束）-->
</html>								<!--跟标签（结束）-->


<!--以上标签均为双标签-->

二、常用标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<hr />						<!--水平线标签（单标签）--><br />

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>			<!--主体内容的标题标签（双标签）--><br />

<p>我是一个段落</p>
<p>我是另一个段落</p>		<!--段落标签（双标签）-->

<br />						<!--换行标签（单标签）-->

&nbsp						<!--空格（特殊符号）-->

<ul>
<li>相貌特点</li>
<li>性格特点</li>
<li>能力特点</li>
</ul>						<!--无序列表（双标签）--><br />

<ol>
<li>相貌特点</li>
<li>性格特点</li>
<li>能力特点</li>
</ol>						<!--有序列表（双标签）--><br />

<!--注释内容-->				<!--注释标签-->

三、常用标签——超链接及表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<title>常用标签</title>
</head>
<body>

<!--一、定义列表-->
<dl>
	<dt>
	苹果
	</dt>
	<dd>
	苹果是重低热能的食物，每千克只产生60千卡的热量；
	苹果中营养成分可溶性大，易被人体吸收，故有“活水”
	之称，有利于溶解硫元素，使皮肤润滑柔嫩。
	</dd>				
</dl>
<br />

<!--二、插入图片-->													
<img src="" alt="" width="" heigt="" />	
<!--
属性src里填写图片路径
属性alt里填写图片的说明信息
属性width里填写图片的长度度，可用百分比表示
属性height里填写图片的高度，可用百分比表示
-->
<br />

<!--三、超链接-->
<a href="" title="" target="_blank" / >
<!--
属性href里填写要链接的地址
属性title里填写的内容在鼠标悬停时会显示
属性target设置成"_blank"时可在新窗口打开链接
-->
<br />

<!--四、给图片的指定区域加超链接-->
<img src="" alt="" width="" heigt="" usemap="#id' />	
<map id="" name="">
	<area shape="" coords="" href="" alt="" target= "_blank" />
</map>
<!--
map标签的使用方法：
	1.属性id和属性name的值要相同且唯一，不得与其他值重复
	2.为要map标签要作用的图片加上usemap属性，值为#id
	3.map标签里嵌套area标签
	4.area标签里的一些属性：
		属性shape：链接区域的形状，常用值rect、circle
		属性coords:填写坐标以确定链接的精确位置
		属性href:要链接的地址
		属性alt:链接的一些说明信息	
-->
<br />

<!--五、表格-->
<table border cellpadding="10" cellspacing="10">
	<tr>
	<th>姓名</th>
	<th>语文</th>
	<th>数学</th>
	</tr>
	<tr>
	<td>小王</td>
	<td>90</td
	<td>60</td>
	</tr>
	<tr>
	<td>小里</td>
	<td>60</td>
	<td>80</td>
	</tr>
</table>
<!--
table的几个属性：
	1.border属性：规定表格的边框的宽度
	2.cellpadding属性：规定表格中数据与边框的距离
	3.cellspacing属性：规定表格中单元格与单元格之间的距离
th标签创建表头单元格的列
td标签创建普通单元格的列
tr标签创建单元格的行
-->
</body>
</html>

四、常用标签——表单

表单是由form标签（双标签）及嵌套在其中的input标签（单标签）和一些其他的标签组成。

以注册账号为例，基本结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE HTML>
<html>
<head>
<title>常用标签——表单</title>
</head>
<body> 
<h1>账号注册</h1>
<form>										<!--form标签-->
	账号：<input type="text"/>				<!--普通文本框-->
	<br /><br />
	密码：<input type="password" />			<!--密码框-->
	<br /><br />
	选择头像：<input type="file">			<!--文件上传-->
	<br /><br />
	<input type="hidden" /> 				<!--隐藏的input（我暂时还没发现它有什么用）-->
	<input type="button" value="点击进入" />	<!--普通按钮-->
	<br /><br />
	性别：<input type="radio" name="six" id="boy" /><label for="boy">男</label>	
		  <input type="radio" name="six" id="gid" /><label for="gid">女</label>
		  									<!--单选-->
		  <br /><br />
	爱好：<input type="checkbox" checked="checked">打羽毛球
	<input type="checkbox">打篮球
	<input type="checkbox">打乒乓球			<!--多选-->
	<br /><br />
	性格特点：
	<textarea ></textarea>					<!--多行输入框-->
	<br /><br />
	所在地：
	<select>
		<optgroup label="广东">
			<option>广州</option>
			<option>东莞</option>
			<option>佛山</option>
		</optgroup>
		<optgroup label="江苏">
			<option>苏州</option>
			<option>湖州</option>
		</optgroup>
	</select>								<!--select标签配合option标签来实现下拉菜单-->
	<br /> <br />
	<input type="submit" value="确认提交"><br />	<!--提交-->
	<input type="reset" />					<!--重置-->
</form>
</body>
</html>

form标签的几个属性：
1.action：向何处发送表单数据
2.name：单表的命名
3.target：_blank，在新窗口打开链接
4.method：提交方式，值为post或get
input标签的几个属性：
1.checked=|”checked”，实现默认选择
2.disabled=”disable”，不可输入
3.name：输入界面的命名
4.readonly=”readonly”，使输入界面为只读状态
5.size：设置输入框的长度
6.value：设置默认值
optgroup标签的几个属性：
1.label：给选项组命名
2.disabled：经用该选项组

其实这里面有的标签还有一些属性，但因为它们不常用，所以就没写。

本文标题:HTML学习笔记

文章作者:obsem

发布时间:2019-03-25, 00:00:00

最后更新:2021-02-08, 15:45:24

原始链接:http://yoursite.com/2019/03/25/HTML学习笔记/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. HTML学习笔记
    1. 1.0.0.1. 一、html的基本结构
    2. 1.0.0.2. 二、常用标签
    3. 1.0.0.3. 三、常用标签——超链接及表格
    4. 1.0.0.4. 四、常用标签——表单
|