2020-11-18

最新推荐文章于 2022-03-03 16:13:17 发布

lzh_3115304038

最新推荐文章于 2022-03-03 16:13:17 发布

阅读量140

点赞数

分类专栏：兴唐杯课堂总结

本文链接：https://blog.csdn.net/sumulzh/article/details/109786808

版权

兴唐杯课堂总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

兴唐教育第二堂课总结：

(内容都在代码里解释)

用以下代码了解了行内元素和块级元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--输入a之后按tap键会自动出现<a href=""></a>；输入b之后按tap键会直接出现<b></b>,i,del,span,p,div,h1,ol,ul同理-->
		<!--行内元素：高度和宽度包裹内容，不会单独成行-->
		<a href="https://www.baidu.com" target="_blank">百度</a>
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下 你就知道" width="300px"/>
		<b>郑州1</b>  <!--加粗字体-->
		<i>郑州2</i>  <!--字体倾斜-->
		<del>郑州3</del>  <!--字体加删除线-->
		<span>郑州4</span>  <!--span是输入内容用的，但是不用span直接输入网页上也能显示。-->
		<!--块级元素：高度包裹内容，但是宽度等于父标记，单独成行。-->
		<p style="text-align: center ;">工业大学</p>  <!--style="text-align: center;"的作用是把文字居中-->
		<div style="text-align: center;">郑州大学</div>
		<div>天空之城</div>
		<!--hn n 1~6-->
		<h1 style="text-align: center;">郑州5</h1>
		<h3>zhengzhou</h3>
		<h6>郑州6</h6>
		<!--orderd list ol 有序列表-->
		<ol start="1" type="I"><!--start是第一个以什么开始；type是标号的类型(不用type自动显示阿拉伯数字)-->
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
		<!--unordered list ol 无序列表-->
		<ul type="disc">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
		
		
	</body>
</html>

table:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border:1px solid black;
				border-spacing :0px ;
				border-collapse: collapse;
			}
			td,th{
				border:1px solid black;
			}
			
		</style>
	</head>
	<body>
		<table>
			<tr><!--tr就是一个表格的行-->
				<th>序号</th><th>姓名</th><th>手机号</th><th>家庭地址</th><!--th的意思是table head表格头部-->
			</tr>
			<tr>
				<td>1</td><td>jim</td><td>110</td><td>郑州市高新派出所</td><!--td的意思是table data 表格数据-->
			</tr>
			<tr>
				<td>2</td><td>sam</td><td>120</td><td>郑州市高新医院</td>
			</tr>
			<tr>
				<td>3</td><td>kitty</td><td>119</td><td>郑州市高新消防中队</td>
			</tr>
		</table>
	</body>
</html>

form :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--form form表单，用于向服务器提交数据-->
		<form action=""><!--form是块级元素，而inpu是行内元素-->
			<!--隐藏框-->
			<input type="hidden" /><!--隐藏框在页面上看不到-->
			<!--文本框-->
			<input type="text" placeholder="请输入用户名" /><!--placeholder的意思是-->
			<!--密码框-->
			<input type="password" placeholder="请输入密码" />
			<!--文件框-->
			<input type="file"/>
			<!--下拉列表-->
			<select>
				<option >--请选择--</option>
				<option >河南省</option>
				<option >河北省</option>
			</select>
			<!--文本框-->
			<textarea></textarea>
			<!--单选项-->
			<input type="radio" name="sex" id="male"/><label for="male">男</label><!--label是为了让用户点击男这个字的时候也能选上这个选项，如果不加的话，只有点男前面的那个圆圈才能选上这个选项-->
			<input type="radio" name="sex" id="female"/><label for="female">女</label><!--只有name一样的单选项才会被认为是一个单选项里，如果不加name或者name不一样，会被认为是两个不同的单选项，无法正常实现单选的效果。-->
		</form>
	</body>
</html>