网页基本标签

最新推荐文章于 2024-07-24 23:00:08 发布

吃橘子的Crow

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.8k

点赞数 2

文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/dfdbb6b/article/details/125221461

版权

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

标题标签（header1~header5）

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>

2.段落标签（paragraph）

<p></p>

没有加段落标签时：

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

有段落标签时：

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

3.换行标签（break）

<br/>

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

4.水平线标签（horizontal）

<hr/>

5.加粗样式标签

加粗：strong

斜体：em（emphasis）

粗体： <strong>i love</strong>
斜体：<em>i love</em>

6.注释和特殊符号

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

7.图像标签

src:图片路径

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

<img 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:设置锚点名字

<a name="top">顶部</a>

使用链接跳转指定锚点

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

<a href="#top">回到顶部</a>

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

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

10.功能性链接

邮件链接

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

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

QQ推广

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我，点我领取小电影" title="加我，点我领取小电影"/></a>

11.关于块元素和列元素

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

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

12.列表

有序列表

<ol>
    <li>java</li>
    <li>前端</li>
    <li>后端</li>
</ol>

无序列表

<ul>
    <li>java</li>
    <li>前端</li>
    <li>后端</li>
</ul>

自定义列表

dl:标签

dt:列表名

dd:列表内容

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>c</dd>
    <dd>c++</dd>

    <dt>城市</dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>c++</dd>
</dl>

13.表格内容

table:标签

tr:行

td:列

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

<table border="1px">
    <tr>
        <td colspan="3">学生成绩</td>

    </tr>
    <tr><td rowspan="2">刘子文</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">刘飞</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>

        <td>数学</td>
        <td>90</td>
    </tr>
</table>

14.媒体元素

src : 文件路径

controls : 控件

autoplay : 自动播放

loop : 循环播放

视频：

<video src="../"controls autoplay></video>

音频：

<audio src="../"controls autoplay></audio>

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

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

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

width : 设置框架宽度

height : 设置框架高度

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

<iframe src="http://www.baidu.com" name="hello" farmeborder="0" width="1000px" height="800px"  ></iframe>

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属性值一样

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="code" name="hobby" checked>敲代码
    <input type="checkbox" value="girl" name="hobby">女孩
</p>

19.其他按钮

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

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

<P>按钮：
    <input type="button" name="btn1" value="点击边长">

</P>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>

20.下拉框

name : 设置下拉框的名字

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

selected : 默认选择

<p>国家：
    <select name="列表名称">
        <option value="zg">中国</option>
        <option value="us">美国</option>
        <option value="en">英国</option>
        <option value="jn">日本</option>
        <option value="cx">朝鲜</option>
    </select>
</p>

21.文本域

name : 文本域的名字

id : 文本域的id

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

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

<p>反馈：
    <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>

22.文件域

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

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

<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

23.input简单验证

<p>邮箱：
    <input type="email" name="email">
</p>
<p>URL:
    <input type="url" namr="url">
</p>
<p>数字验证：
    <input type="number" name="number" max="100" min="0" step="10">
</p>
<p>滑块标签：
    <input type="range" name="voice" min="0" max="100">
</p>
<p>搜索：
    <input type="search" name="search">

</p>