HTML与CSS初体验 2019.1.15 14:41 - HTML/CSS

Home > List of blog posts > HTML与CSS初体验 2019.1.15 14:41

Blogger Information

Blog 1

fans 0

comment 0

visits 495

Special Recommendation

More>

Related recommendations

HTML与CSS初体验 2019.1.15 14:41

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hellow world</title>
	</head>
	<body>
		<div>
			<h1>不同大小h1~h6测试</h1>
			<!--标题标签-->
			<h1>h1 size</h1>
			<h2>h2 size</h2>
			<h3>h3 size</h3>
			<h4>h4 size</h4>
			<h5>h5 size</h5>
			<h6>h6 size</h6>
			<hr />
			<p>段落</p>
			<p>标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2. 文本修饰

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="background-color: dodgerblue">
			<p style="font-size: 1.5rem;color: lawngreen;">php.cn</p>
		</div>
		<hr />
		<p>大家一起<strong style="background-color: black;color: white;font-size: 1.5rem;">过新年</strong></p>
		<hr />
		<p>斜体标签<xmp><em></em></xmp></p>
		<p>加粗显示</p><xmp><strong></strong></xmp>
		<p>style样式</p><xmp>backgroud-color;文字背景色</xmp>
		<xmp>color;文字颜色</xmp>
		<xmp>font-size;文字大小</xmp>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3. 列表

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
	<!-- 4. 表格 -->
	
	        <!--表格是最重要的格式化数据的工具
	        其实上面的列表内容,非常适合用表格来展示
	        经过分析, 上面列表加上表头需要一个四行四列的表格进行展示
	
	        完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td
	        表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 
		表格中的各个标签支持一些属性设置,不过推荐用css去设置,这里咱们先了解一下这些原生属性-->
		
		<table border="1" cellspacing="0" cellpadding="5" width="500px" height="300px">
			<tr>
				<th>名称</th>
				<th>价格</th>
				<th>颜色</th>
			</tr>
			<tr>
				<td>暖手宝</td>
				<td>30元</td>
				<td style="background-color:blue;">蓝色</td>
			</tr>
			<tr>
				<td>暖水瓶</td>
				<td>20元</td>
				<td style="background-color: green;">绿色</td>
			</tr>
			
		</table>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 4. 表格

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
	</head>
	<body>
	<!-- 4. 表格 -->
	
	        <!--表格是最重要的格式化数据的工具
	        其实上面的列表内容,非常适合用表格来展示
	        经过分析, 上面列表加上表头需要一个四行四列的表格进行展示
	
	        完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td
	        表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 
		表格中的各个标签支持一些属性设置,不过推荐用css去设置,这里咱们先了解一下这些原生属性-->
		
		<table border="1" cellspacing="0" cellpadding="5">
			<tr>
				<th>名称</th>
				<th>价格</th>
				<th>颜色</th>
			</tr>
			<tr>
				<td>暖手宝</td>
				<td>30元</td>
				<td style="background-color:blue;">蓝色</td>
			</tr>
			<tr>
				<td>暖水瓶</td>
				<td>20元</td>
				<td style="background-color: green;">绿色</td>
			</tr>
			
		</table>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5. 表单

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get">
			<div>
				<label for="username">用户名：</label>
				<input type="text" id="username" name="username" value="admin" placeholder="请输入用户名"/>
			</div>
			<div>
				<label for="password">密码：<input type="password" name="password" id="password" value=""/><label for="password"></label></label>
			</div>
			<hr />
			<div>
				<label for="pw">pw<input type="pw" name="" id="pw" value="" placeholder="密码"/><label for=""></label></label>
				<label for="ppp"><input type="checkbox" name="ck" id="ck" value=""placeholder=""/><label for="ck"></label></label>
			</div>
			
			<hr />
			<div>
				<input type="radio" name="gender" id="male" value="male" checked="checked"/><label for="male">男</label>
				<input type="radio" name="gender" id="female" value="female"/><label for="female">女</label>
			</div>
			<hr />
			<div>
				<input type="checkbox" name="box[]" id="apple" value="apple" / checked><label for="apple">苹果</label>
				<input type="checkbox" name="box[]" id="banana" value="banana" /><label for="banana">香蕉</label>				
			</div>
			<hr />
			<div>
				<label for="ABC">aaabbbccc</label>
				<select name="ABC">
					<option value="a">aaa</option>
					<option value="b">bbb</option>
					<option value="c">ccc</option>
					<option value="d">ddd</option>
				</select>
			</div>
			<hr />
			<div>
				<label for="common">textarea</label>
				<textarea name="common" rows="10" cols="30" placeholder="请勿超过100字" maxlength="10" ></textarea>
			</div>
			<hr />
			<div>
				<input type="submit" name="" id="" value="提交" />
			<input type="reset" name="" id="" value="重置" />
			</div>
		</form>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

6. 图片与媒体

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="https://www.baidu.com/img/bd_logo1.png" alt="图片错误" height="100"/>
		<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" width="40%"></video>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

7. 布局标签

8. 其它...

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML与CSS初体验 2019.1.15 14:41

2019-01-20 22:59:21