当前位置：首页 > news >正文

html复习

news 2025/7/22 12:33:31

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.具体编码

<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.常用表单控件
一. 文本输入框

<input type="text" >

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

二.密码输入框

<input type="password">

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

三.单选框

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

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

四.复选框

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

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

五.隐藏域

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

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

六.提交按钮

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

七.重置按钮

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

注意点：
1 button 不要指定 name 属性
2input 标签编写的按钮，使用 value 属性指定按钮文字

八.普通按钮

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

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

九.文本域

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

常用属性如下：

rows 属性：指定默认显示的行数，会影响文本域的高度。
cols 属性：指定默认显示的列数，会影响文本域的宽度。
不能编写 type 属性，其他属性，与普通文本输入框一致

十.下拉框

<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` 将其删除）双	双