HTML基础知识

最新推荐文章于 2022-08-14 20:38:20 发布

九处

最新推荐文章于 2022-08-14 20:38:20 发布

阅读量127

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/wjc78242663/article/details/102767231

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML语法【掌握】
<标签名属性名=”值”>内容</标签名>

HTML文档基本结构【掌握】

<html>
	<head></head>
	<body></body>
</html>

html: 标签告知浏览器其自身是一个 HTML 文档。
head: 标签用于定义文档的头部（文档的描述信息）。
body: 标签用于定义文档的主体（文档的主体内容）。

DIV和SPAN
标签的作用是将想要显示的内容标记并展示特殊的效果，但div span两个标签没有特殊的功能，只是作为一个内容容器，不过使用频率很高，主要与CSS配合使用来展示效果。
span是行内标签，只占据包裹的内容长度，而div是块级标签，会独占一行
代码如下：

<div style="background-color: red ">我是div</div>
<span style="background-color: blue">我是span</span>

在这里插入图片描述
为显示各自包裹的效果，此时可以使用CSS样式背景色来查看
表格标签【掌握】
语法
一般来说，定义表格之后需要指定宽高，使用border指定表格的边框

<!--table:代表是一个表格
	tr:代表是一行
	td/th:代表是一个单元格
	
	格式： table(tr(td/th))
	
	th:一般用于申明表头
	th = td+字体加重+居中
	
	border: 添加单元格的边框
	align="center"  居中
	cellspacing="0"  单元格与单元格之间的间隙
	width="70%"  table表格的宽度  -->
	<table border="1" aligen="center" cellspacing="0">
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
		<tr>
			<td>亚索</td>
			<td>22</td>
			<td>男</td>
		</tr>
		<tr>
			<td>劫</td>
			<td>22</td>
			<td>男</td>
		</tr>
		<tr>
			<td>提莫</td>
			<td>22</td>
			<td>男</td>
		</tr>
	</table>

<table>标签元素：定义一个表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
<tr>标签元素：定义表格中的行，表格行中包含一个或多个th或td元素
<th>标签元素：定义表格内的单元格
<td>标签元素：定义普通单元格

在这里插入图片描述
表单标签【掌握】
语法

<form 	action=”” method=””>
	表单元素
</form>

form标签：用于定义表单
action属性：定义表单中的数据提交的位置
method属性：定义表单数据的提交方式
get：通过url提交数据，有大小限制，不安全
post：无大小限制，安全
表单元素
【注意】：
1.表单元素中除开按钮之外，都应当具备name属性
2.个别标签name属性取值要保持一致：单选、多选
name属性：属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
按钮不需要定义name属性，因为按钮的值不需要提交
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

input标签：定义文本框、密码框、单选、多选、文件上传、隐藏域等

<input  type=””  name=””  value=”” />

	type属性：决定input标签的展现效果
	text：文本框
	password：密码框
	radio：单选框
	checkbox：多选框
	file：文件上传
	hidden：隐藏域
	submit：自动提交按钮
	button：普通提交按钮
	reset：重置按钮
	image：图片按钮

value属性：标签包含的数据
对于不同的type类型，value属性的用法也不一致：

1.	type=”button”、”reset”、”submit” — 定义按钮上的显示文本
2.	type="text", "password", "hidden" — 定义输入字段的初始值
3.	type="checkbox", "radio", "image" — 定义与输入相关联的值

注释：和中必须设置 value 属性
注释：value 属性无法与一同使用
textarea标签：定义多行文本域

<textarea  cols=””  rows=””  name=””>
</textarea>

rows 属性规定 textarea 的可见高度。以行数计算
cols 属性规定 textarea 的可见宽度。以平均字符数计算
多行文本域可以被拖动，如何解决？

style=”resize:none;”

select标签：定义下拉框

<select name=””>
	<option value=”提交的值”>显示的值</option>
</select>

option 元素定义下拉列表中的一个选项
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示
option 元素位于 select 元素内部

注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。
注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。
提示：如果列表选项很多，可以使用 <optgroup> 标签对相关选项进行组合。
value 属性：规定在表单被提交时被发送到服务器的值。
<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有定义value属性，则将两个标签之间的值发送给服务器。

九处

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

HTML文档基本结构【掌握】<html> <head></head> <body></body></html>html: 标签告知浏览器其自身是一个 HTML 文档。head: 标签用于定义文档的头部（文档的描述信息）。body: 标签用于定义文档的主体（文档的主体内容）。...
复制链接

扫一扫