<div>
<div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对其它元素进行分组,一般用于样式化相关的需求(使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang),它应该在没有任何其它语义元素可用时才使用
示例
<div>
<span>Hello World</span>
</div>
<span>
<span>元素是短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者Id属性),或者这些元素有着共同的属性,比如lang。应该在没有其他合适的语义元素时才使用它。<span>与<div>元素很相似,但<div>是一个 块元素 而 则是 行内元素 .
示例
<div>
<span>Hello World</span>
</div>
<img>
<img>元素代表文档中的一个图像
示例
<img>src="图片地址" alt="图片未显示时替换文本"</img>
<a>
<a>元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接
示例
链接到外部地址
<a herf="https://www.baidu.com/">百度</a>
链接到本页的某个部分
<a herf="#xxx">百度</a>
建立伪协议
<a href="javascript: alert(1);">
<a href="javascript:;">
连接打开方式 target
<!--新建窗口打开_blank-->
<a herf="https://www.baidu.com/" "_blank>百度</a>
<!--当前窗口打开_self-->
<a herf="https://www.baidu.com/" "_self">百度</a>
<!--父级窗口打开_parent-->
<a herf="https://www.baidu.com/" "_parent>百度</a>
<!--顶级窗口打开_top-->
<a herf="https://www.baidu.com/" "_top>百度</a>
<input>
<input>元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件
定义input:
样式:
<!--如果未定义input的type类型默认为text-->
<input type="">
按钮 button:
样式:
<!--使用value定义button内文案 -->
<input type="button" value="button">
复选框 checkbox
样式:
<!--复选框,必须定义value值否则无法提交 -->
<input type="checkbox" value="woman">
<!--使用checked可定义控件是否默认被选择-->
<input type="checkbox" value="woman" checked>
日期控件 date
样式:
<input type="date">
用于输入日期时间控件,不包含时区 datetime-local
样式:
<input type="datetime-local">
选择文件 file
样式:
<input type="file">
<!--accept定义选择文件类型-->
<input type="file" accept="image/png">
输入年月的控件,不带时区 month
样式:
<input type="month">
数字输入框 number
样式:
<input type="number">
输入密码 password
样式:
<input type="password">
单选按钮 radio
样式:
<!--必须定义value值否则无法提交 -->
<input type="radio" value="woman">
提交按钮 submit
样式:
<!--用于提交表单的按钮 -->
<input type="submit" value="提交">
输入电话号码 tel
样式:
<!--pattern定义输入文本类型,maxlength定义输入文本最大长度 -->
<input type="tel" pattern="number" maxlength="11">
输入不含时区的时间控件 time
样式:
<input type="time">
输入一个由星期-年组成的日期 week
样式:
<input type="week">
滑块 range
样式:
<input type="range">
<form>
<form>元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息
示例
<!--使用action定义处理请求的URL,使用method定义发起请求的类型-->
<form action="" method="POST">
<input type="text" name="userName">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<label>
<label>元素(标签)表示用户界面中某个元素的说明,<label>标签可关联文案和表单
示例
<form action="" method="POST">
<label>用户名:<input type="text" name="userName"><label>
<label>密码:<input type="password" name="password"><label>
<input type="submit" value="提交">
</form>
<button>
<button>元素表示一个可点击的按钮
示例
定义一个按钮 button
<button type="button">提交</button>
可定义一个提交按钮 submit
<button type="submit">提交</button>
<table>
<table>元素表示表格
示例
定义一个按钮 button
<table>
<!--表头-->
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<!--表内容-->
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tfoot>
</table>
header
header标签用来表示文档的头部
main
main标签表示文档内的主题内容
footer
footer标签用来表示文档的页脚
aside
aside标签用来表示侧边栏和标注框
section
section标签表示独立文档的部分,通常都会包含一个标题
article
article 标签表示独立于网站或文档的部分,通常会用来表示一些可复用的元素,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件
figure
这个标签经常是在主文中引用的图片,插图,表格,代码段等等