html复习 - 技术栈

1.什么是HTML？

全称：HyperTextMarkupLanguage（超文本标记语言）。

2.排版标签

标签名	标签含义	标签类型
h1~h6	标题	双
p	段落	双
div	没有任何意义，用于整体布局	双

h1最好写一个，h2~h6可以适当多写
h2~h6不能嵌套

3.块级元素与行内元素

块级元素独占一行(排版标签都是块级元素)。
行内元素不独占一行
注意：块级元素中能写行内元素 和块级元素

6.表格

1.基本结构

有表格标题，表格头部，表格主体，表格脚注，四部分组成。
表格涉及的标签：
table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格注脚
tr：每一行
th td：每一个单元格（备注：表格头部中用th,表格主体、表格脚注中用：td）

3.具体编码

html 复制代码

<table border="1">
	<!-- 表格标题 -->
	<caption>学生信息</caption>
	<!-- 表格头部 -->
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>民族</th>
			<th>政治面貌</th>
		</tr>
</thead>
<!-- 表格主体 -->
<tbody>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>18</td>
		<td>汉族</td>
		<td>团员</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>女</td>
		<td>20</td>
		<td>满族</td>
		<td>群众</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>男</td>
		<td>20</td>
		<td>回族</td>
		<td>党员</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>女</td>
		<td>21</td>
		<td>壮族</td>
		<td>团员</td>
	</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td>共计：4人</td>
	</tr>
</tfoot>
</table>

7.表单

概念：一个包含交互的区域，用于收集用户提供的数据。

2.常用表单控件

一. 文本输入框

html 复制代码

<input type="text" >

常用属性：
name属性：数据的名称
value属性：输入框的默认输入值
maxlength属性：输入框最大可输入的长度

二.密码输入框

html 复制代码

<input type="password">

常用属性：
name属性：数据的名称
value属性：输入框的默认输入值(一般不用，无意义)
maxlength属性：输入框最大可输入的长度

三.单选框

html 复制代码

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。

四.复选框

html 复制代码

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下：：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。

五.隐藏域

html 复制代码

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。

六.提交按钮

html 复制代码

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

七.重置按钮

html 复制代码

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意点：

1 button 不要指定 name 属性

2input 标签编写的按钮，使用 value 属性指定按钮文字

八.普通按钮

html 复制代码

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意：普通按钮的type值为buttom，若不写type的值是submit会引起表单的提交。

九.文本域

html 复制代码

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

rows 属性：指定默认显示的行数，会影响文本域的高度。

cols 属性：指定默认显示的列数，会影响文本域的宽度。

不能编写 type 属性，其他属性，与普通文本输入框一致

十.下拉框

html 复制代码

<select name="from">
	<option value="黑">黑龙江</option>
	<option value="辽">辽宁</option>
	<option value="吉">吉林</option>
	<option value="粤" selected>广东</option>
</select>

常用属性及注意事项：

name 属性：指定数据的名称。

option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文
字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

option 标签设置了 selected 属性，表示默认选中。

HTML实体

字符实体 由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一

个分号 ;

二、新增语义化标签

1.新增布局标签

标签名	语义	单/双标签
`header`	整个页面，或部分区域的头部	双
`footer`	整个页面，或部分区域的底部	双
`nav`	导航	双
`article`	文章、帖子、杂志、新闻、博客、评论等。	双
`section`	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	双
`aside`	侧边栏	双
`main`	文档的主要内容 ( `WHATWG` 没有语义， IE 不支持)，几乎不用。	双
`hgroup`	包裹连续的标题，如文章主标题、副标题的组合（ `W3C` 将其删除）双	双

注意

artical 里面可以有多个 section 。

section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元
素。

article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
article 元素。