网页基本标签

港控/mmm° 2023-10-01 22:06 7阅读 0赞

说起前端，我猜大家在初学的时候肯定对标签的记忆表示非常头疼，今天给大家总结总结前端网页制作比较常用的标签说明。

1.  标题标签（header1~header5）
    
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
    
    ![7ab06a49dbdf4b2a8a8aa5c1e47f9bff.png][]

2.段落标签（paragraph）

<p></p>

没有加段落标签时：

跑的快  跑的快
    一只没有尾巴  一只没有眼睛 真奇怪 真奇怪

![465233249c8049a09b00deac1db49df3.png][]

有段落标签时：

<p>跑的快  跑的快</p>
    <p>一只没有尾巴  一只没有眼睛 真奇怪 真奇怪</p>

![6cc137b2eac34c4a9c7d86bb497a1b44.png][]

3.换行标签（break）

<br/>

具体的用法和段落标签的用法是一致的。

4.水平线标签（horizontal）

<hr/>

![41cc426f0c2648a8ba535ab0db76db31.png][]

5.加粗样式标签

*  加粗：strong
 *  斜体：em（emphasis）
    
        粗体： <strong>i love</strong>
        斜体：<em>i love</em>
    
    ![7146b74c2a634b80b22037afbbe943b7.png][]

6.注释和特殊符号

*  注释：Ctrl+/
 *  空格：&nbsp;(non breaking space)
 *  大于：>(greater than)
 *  小于：<(less than)
 *  版权：&copy;(copyright)

7.图像标签

src:图片路径

alt:图片不显示时显示的文字信息

> 关于.../和./
> 
> .../：上一级目录，父目录
> 
> ./：当前目录

8.超链接

herf:链接地址

target:链接窗口在哪打开

*  \-balck:在新窗口打开
 *  \-self:在当前窗口打开

<a href=""target="_blank">点击我跳转</a><br/>
    <a href="https://www.baidu.com"target="-_blank">点击我跳转百度</a>
    <a href="mailto:2352416490@qq.com">点击联系我</a>

9.锚点链接

使用a标签加name属性

name:设置锚点名字

*  使用链接跳转指定锚点

href:填写需要跳转到锚点名字，\#后跟锚点名字

*  使用链接跳转到指定页面的指定锚点

<a href="https://www.baidu.com"target="-_blank">点击我跳转百度</a>

10.功能性链接

邮件链接

在href属性中使用mailto后跟具体邮箱

<a href="mailto:2352416490@qq.com">点击联系我</a>

QQ推广

11.关于块元素和列元素

块元素：无论内容多少，独占一行

行内元素：由内容大小决定宽度多少，左右都是行内元素的可以排在一行

12.列表

*  有序列表
    
        <ol>
            <li>java</li>
            <li>前端</li>
            <li>后端</li>
        </ol>
    
    ![42c1fb10bc9f47caaaf477f2cd42183e.png][]
 *  无序列表

*  自定义列表

dl:标签

dt:列表名

dd:列表内容

![5117d282efa14fa5a85eeaec51903520.png][]

13.表格内容

table:标签

tr:行

td:列

*  colspan:跨列属性
 *  rowspan:跨行属性

![c292e904a3b94ff8bf032afc657ce798.png][]

14.媒体元素

`src` : 文件路径

`controls` : 控件

`autoplay` : 自动播放

`loop` : 循环播放

视频：

音频：

15.iframe内联框架  
内联框架就是在一个网页中嵌入另一个网页

src : 默认内联框架中显示的网页

frameborder : 框架是否显示边框(1 或 0)

width : 设置框架宽度

height : 设置框架高度

name : 设置框架的名字, 可用于设置a标签的target属性, 使a标签跳转的网页在内联框架中显示

16.表单  
action : 表单数据提交到什么地方

method : 提交数据的方式

*  get : 我们可以在提交的URL中看到我们提交的信息, 不安全, 但是高效
 *  post : 看不到我们提交的信息, 但是安全, 可以传输大文件

input : input标签

type : input标签根据标签属性type的值不同可以有不同的展现形式

*  text : 文本类型输入框
 *  password : 密码类型输入框
 *  submit : 提交类型输入框

`name` : 每个input标签的标识

<input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女

<h1>注册</h1>
    <form action="" method="get"></form> post较为安全
    <p>名字：<input type="text" name="username" value="邹老师" maxlength="8" size="30"></p>
    <p>密码：<input type="password" name="pwd"></p>

17.单选按钮

设置input标签的type属性为`radio`

`checked` : 默认选中

注意 : 单选按钮存在组的概念, 也就是多个type为radio的单选按钮他们的`name`属性值需要一样, 这样才能实现只能选一个, 不然可以选多个

<input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女

18.默认选中

`checked`: 默认选中

设置input标签的type属性为`checkbox`, 同为一个按钮组的多选按钮需要设置`name`属性值一样

19.其他按钮

当input标签的`type`属性值为以下内容时

*  `button`: 普通按钮
 *  `submit` : 提交按钮(提交表单数据)
 *  `reset` : 重置按钮(重置表单数据)
 *  `image` : 图片按钮(图片是一个按钮)

20.下拉框

`name`: 设置下拉框的名字

`value` : 设置下拉框的子元素值

`selected` : 默认选择

21.文本域

`name` : 文本域的名字

`id`: 文本域的id

`cols` : 文本域的宽度(列的数量)

`rows` : 文本域的高度(行的数量)

22.文件域

设置input标签的`type`属性值为`file`时, input标签将展现为文件上传按钮样式

`name` : 设置上传文件的名字(这个不是文件的真实名字, 是我们自己定义的)

23.input简单验证

[7ab06a49dbdf4b2a8a8aa5c1e47f9bff.png]: https://img-blog.csdnimg.cn/7ab06a49dbdf4b2a8a8aa5c1e47f9bff.png
[465233249c8049a09b00deac1db49df3.png]: https://img-blog.csdnimg.cn/465233249c8049a09b00deac1db49df3.png
[6cc137b2eac34c4a9c7d86bb497a1b44.png]: https://img-blog.csdnimg.cn/6cc137b2eac34c4a9c7d86bb497a1b44.png
[41cc426f0c2648a8ba535ab0db76db31.png]: https://img-blog.csdnimg.cn/41cc426f0c2648a8ba535ab0db76db31.png
[7146b74c2a634b80b22037afbbe943b7.png]: https://img-blog.csdnimg.cn/7146b74c2a634b80b22037afbbe943b7.png
[42c1fb10bc9f47caaaf477f2cd42183e.png]: https://img-blog.csdnimg.cn/42c1fb10bc9f47caaaf477f2cd42183e.png
[5117d282efa14fa5a85eeaec51903520.png]: https://img-blog.csdnimg.cn/5117d282efa14fa5a85eeaec51903520.png
[c292e904a3b94ff8bf032afc657ce798.png]: https://img-blog.csdnimg.cn/c292e904a3b94ff8bf032afc657ce798.png