04前端成长日记-常用的HTML标签

340 阅读5分钟

<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

这个标签经常是在主文中引用的图片,插图,表格,代码段等等