HTML

列举一些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
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
	<!-- H5 = HTML5 -->
<!DOCTYPE html>
<!-- html根标签 -->
<html>
	<!-- 头标签 -->
	<head>
		<!-- 配置标签,属性配置,支持中文 -->
		<meta charset="utf-8">
		<!-- 头的文本内容 -->
		<title>hello html</title>
	</head>
	<!-- 主体标签 -->
	<body>
		<p id="top">顶部</p>
		文豪真帅
		<h1>一级</h1>
		<h2>二级</h2>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<!-- 照片 -->
		<!-- 相对路径 -->
		<img src="安全保障.png" />
		<!-- 网络路径 -->
		<img src="https://img0.baidu.com/it/u=2931113756,2273056902&fm=253&fmt=auto&app=138&f=JPEG?w=243&h=243" />
		<!-- 绝对路径,项目根路径 -->
		<!-- 服务器打开不支持,本地打开支持 -->

		<!-- 超链接标签 -->
		<!-- href跳转网址 -->
		<!-- 也可定位内部元素id/class -->
		<!-- target_blank在新窗口打开 -->
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<!-- 同一页面跳转 -->
		<a href="#top">跳转顶部</a>

		<!-- 列表 -->
		<!-- 无序列表:ul -->
		<!-- 有序列表:ol -->

		<!-- 表单标签 -->
		<!-- 实线 -->
		<!-- colspan合并列 -->
		<!-- rowspan合并行 -->
		<table border="1px solid">
			<tr>
				<th colspan=2"">1</th>
				<!-- 直接合并会多出一列,要删去被覆盖的 -->
				<th>1</th>
				<th>1</th>
			</tr>
			<tr>
				<th>2</th>
				<th>2</th>
				<th>2</th>
			</tr>
			<tr>
				<th>3</th>
				<th>3</th>
				<th>3</th>
			</tr>
		</table>
		<!-- 居中 -->
		<!-- 表单标签选项 -->
		<!-- 表单项放入form表单中,可配置提交的网址 #表示当前网页 method表示请求方式 -->
		<!-- 表单项有name有value -->
		<p style="text-align:center;"></p>
		<form action="#"></form>
		<table border="1px solid">
			<tr>
				<td colspan="2">注册</td>
			</tr>
			<tr>
				<td>用户名</td>
				<td>
					<!-- 普通文本输入框 -->
					<!-- 提示输入placeholder -->
					<!-- value值给空,是正常输入之后的值,也可以不写 -->
					<input name="username" value=" " type="text" placeholder="请输入用户名" />
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<!-- 密码输入框 -->
					<!-- 提示输入placeholder -->
					<input type="password" placeholder="请输入密码" />
				</td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td>
					<!-- 密码输入框 -->
					<!-- 提示输入placeholder -->
					<input type="password" placeholder="请再次输入密码" />
				</td>
			</tr>
			<!-- 单选框 -->
			<tr>
				<td>性别</td>
				<td>
					<!-- 单选框 -->
					<input type="radio" checked="" value="男" />男
					<input type="radio" checked="" value="女" />女
				</td>
			</tr>
			<!-- 复选框 -->
			<!-- 下拉选项框 -->
			<tr>
				<td>城市</td>
				<td>
					<select name="city" id="">
						<option value="0">济南</option>
						<option value="1">天津</option>
						<option value="2">无锡</option>
						<option value="3">滨州</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>个人简介</td>
				<td>
					<textarea name="个人简介" id="" cols="30" rows="10"></textarea>
				</td>
			</tr>
		</table>

<!-- 盒子模型 -->
<!-- div和span标签 -->
<!-- span标签和p标签作用相同,,内容多大他多大,不能自己占一行,不能设置宽高,只是用来存文本 -->

<!-- div标签自己占用一行,内容多高有多高,设置宽高,一般用来做盒子模型 -->
<div style="width: 5px;">123456</div>
	</body>
</html>

CSS

以下是一些常见的CSS样式

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
<!-- CSS样式 -->
		<!-- 字体颜色 color:red;#000000,rgb -->
		<!-- 字体大小 font-size:10px  -->
		<!-- 字体样式：font-family -->
		<!-- 字体粗细：font-weight:100-900 -->
		<!-- 边框圆角：border-radius 10px 10% -->
		<!-- 下划线：text-decoration:underline/overline(上划线)/line-through(删除线)-->
		<!-- 字体风格 font-style:italic;斜体- -->
		
		<!-- 修改元素模式 -->
		
		<!-- dispaly:block(显示)/none(不显示); inline inline-block none -->
		<!-- 鼠标悬停伪类 a:hover -->
		<!-- 内边距：padding -->
		<!-- 外边距margin margin:0 auto 上下为0 左右对齐 可用作居中-->
		<!-- 光标变小手：cursor:pointer -->
		<!-- 定位position:absoute;绝对定位 -->
		<!-- 鼠标点击时：a:active -->
		<!-- 文本居中:text-align 对有边框的元素才生效，对span不生效 -->
		<!-- 背景颜色：backgroud -->
		<!-- 透明度opacity：0-1 -->
		<!-- 空格nbsp -->
		<!-- 列表样式修改list-style:mome 没有样式 -->
		<!-- 优先级 id 》 class 》 标签 -->
		<!-- 清空浏览器默认样式{margin 0 padding 0 border 0} -->
		<!-- 背景图片 backgroud-image:url("img/a.png")-->
		<!-- 文本行高 line-height:高度等于盒子高度 -->
		<!-- 边框 border:1px（粗细）,solid(形状)/dashed(虚线)/dotted（点线）,red（颜色） -->
		<!-- 文本超出隐藏：overflow:hidden; auto下拉条展示 visiable 默认-->
		<!-- 宽度/高度:width/height -->
		<!-- 水平对齐 -->
		<!-- 设置文本阴影 text-shawon -->
		<!-- 超链接伪类：a-link -->
		<!-- 过渡CSS3动画，动画的切换效果 transition: -->