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属性,则将两个标签之间的值发送给服务器。