HTML常用标签

已于 2022-11-21 22:52:46 修改
阅读量779 收藏
点赞数 1
文章标签： html 前端 javascript
于 2022-11-21 22:52:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61972561/article/details/127938302
版权

HTML常用标签

一、标题标签: h1-h6(只到h6)

代码:

    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
    <h7>h7标签</h7>
    <h8>h8标签</h8>

运行结果：

h1标签

h2标签

h3标签

h4标签
h5标签
h6标签
h7标签 h8标签

二、段落标签：p

代码:

<body>
    <p>这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个
        是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
        是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
        是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签
        是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签;</p>
    <p>这个是段落标签</p>
    <p>这个是段落标签</p>
</body>

运行结果

这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签 是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签这个是段落标签;

这个是段落标签

这个是段落标签

三、文档的横线标签：hr

代码

<p>这个是段落标签</p>
    <hr>
<p>这个是段落标签</p>

运行结果

这个是段落标签

这个是段落标签

四、文本修饰

1标签

  1. 斜体：em
  2. 上标文本：sub
  3. 下标文本：sup

2、代码

 <p>
        文本内容
        <strong>文本内容</strong>
        <em>文本内容</em>
        文本内容
        <sub>文本内容</sub>
        文本内容
        sup>文本内容</sup>
        <del>文本内容</del>
        <ins>文本内容</ins>
    </p>

3、运行结果

文本内容 文本内容 文本内容 文本内容 文本内容 文本内容 sup>文本内容 文本内容 文本内容

4、文本+css

五、超链接标签：a

1、属性href:跳转到URL（web地址）界面/标签位置

(1)绝对路径：

一个点：./ 当前路径
两个点：…/ 上一级路径

(2)

相对路径：从盘符开始查找

在这里插入图片描述

2、target:目标窗口打开方式

  1. _self:(默认)：当前页显示
  2. _blank:新页面显示
  3. _top:
  4. _parent:
  5. List item

4、a+CSS

(1)a标签去除下划线：在css-style中加入：【text-decoration: none;】语句；

（2）状态

a:link超链接的默认样式（蓝色）
a:visited:已经访问过的样式（紫色）
a:hover鼠标悬停的样式
a:active:鼠标左键激活样式（红色）

5、案例 ：a标签应用

（1）点击标签跳转界面
（2）瞄点链接：跳到指定标签位置（回到顶部按钮）

六、图像标签：img

(1)绝对路径：

一个点：./ 当前路径
两个点：…/ 上一级路径

(2)

相对路径：从盘符开始查找

七、列表标签：(可以无限嵌套)

1、有序列表

  1. 容器:ul
  2. 具体项:li

2、无序列表

  1. 容器：ol
  2. 具体项:li

3、问题：如何去除列表装饰

在这里插入图片描述

4、案例

八、表格标签：

1、表格的容器 table

属性

  1. border:表格边框
  2. cellpadding:单元格内空间
  3. cellspacing:单元格与单元格空间

2、表格标题 caption

3、表头 th

4、行 tr

5、单元格 td

属性：

  1. rowspan:合并行
  2. colspan:合并列

6、案例

<table border="1" cellpadding="10px" cellspacing="20px">
        <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>出生日期</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12</td>
            <td rowspan="2">xxx</td>
        </tr>
        <tr>
            <td>张三</td>
            <td colspan="2">女</td>
        </tr>
    </table>

在这里插入图片描述

九、表单标签

1、表单容器 form

  1. name:表单名称
  2. method:提交方式【post/get】
  3. action:提交地址
  4. target:打开方式
    补充：
    post：把表单数据发送给服务器，主要 用于提交敏感数据，如用户名与密码等。
    get：【默认】表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。
    在这里插入图片描述

2、文本输入控件

(1)单行文本输入框input type=text
(2)密码文本输入框 input type=password
属性：
value:默认值
size:文本框长度
maxlength:最多输入字符数

在这里插入图片描述（3）多行文本框 textarea
属性：
rows:行数
cols:列数
value取值
在这里插入图片描述

3、 单选按钮 、复选框

（1）单选按钮：input type=radio
属性
name:组名(组名相同的才同一批)
value:值
checked:被选中
disabled：禁止使用

请添加图片描述

<form action="">
        <p>name:组名相同实现单选</p>
        <input type="radio" value="1" name="sex">男
        <input type="radio" value="2" name="sex">女
        <p>name:组名不相同实现单选</p>
        <input type="radio" value="1" name="sex1">男
        <input type="radio" value="2" name="sex2">女
        <p>checked默认选中</p>
        <input type="radio" value="1" name="sex3" checked>男
        <input type="radio" value="2" name="sex3">女
        <p>disabled禁止选中</p>
        <input type="radio" value="1" name="sex4" disabled>男
        <input type="radio" value="2" name="sex4" disabled>女
        
    </form>

（2）多选框：input type=checkbox
属性
naem:组名
value:值
checked:被选中
disabled：禁止使用

<form action="">
        爱好：
        <input type="checkbox" value="1">绘画
        <input type="checkbox" value="2">书法
        <input type="checkbox" value="3">运动
        <input type="checkbox" value="4">阅读
        <input type="checkbox" value="5" checked>阅读（默认选中）
        <input type="checkbox" value="6" disabled>阅读（禁止选中）

    </form>

4、下拉选择框和文件选择框

(1)下拉选择框
select标签的属性
multiple:设置可以多选
size:显示几个列表项
option标签属性
selected:是否被选中
value:选项值

<p>只能单选</p>
    <select name="" id="">
        <option value="1">内容1</option>
        <option value="2">内容2</option>
        <option value="3">内容3</option>
        <option value="4">内容4</option>
        <option value="5">内容5</option>
    </select>
    <p>select标签里添加multiple属性实现展示多个option内容</p>
    <select name="" id="" multiple>
        <option value="1">内容1</option>
        <option value="2">内容2</option>
        <option value="3">内容3</option>
        <option value="4">内容4</option>
        <option value="5">内容5</option>
    </select>
    <p>select标签里添加multiple属性实现展示多个option内容加size实现option展示个数</p>
    <select name="" id="" multiple size="2">
        <option value="1">内容1</option>
        <option value="2">内容2</option>
        <option value="3">内容3</option>
        <option value="4">内容4</option>
        <option value="5">内容5</option>
    </select>

    <p>option标签加selected则这一项默认被选中</p>
    <select name="" id="" multiple >
        <option value="1">内容1</option>
        <option value="2" selected>内容2</option>
        <option value="3">内容3</option>
        <option value="4" >内容4</option>
        <option value="5">内容5</option>
    </select>

请添加图片描述

(2)文件选择框(文件上传)
input type=file

 <form action="">
        上传文件：
        <input type="file">
   </form>

5、按钮

（1）普通按钮 input type=button value="指定按钮上的文字” （一般与JavaScript配合使用）
（2）提交按钮 input type=submit value="指定按钮上的文字”（把数据提交到服务器）
（3）重置按钮 input type=reset （清除用户在表单区域内的内容）

 <form action="">
    <input type="button" value="普通按钮">
    <br>
    <input type="submit" value="提交按钮">
    <br>
    <input type="text" value="">
    <br>
    <input type="reset">
   </form>

（4）button标签

<button>按钮</button>

6、数字框

input type="number"属性
（1）Max=“number”:允许最大数值
（2）Min=“numer”:允许最小数值
（3）Step=“numer”:数字间隔
（4）valur=“numer”:默认值

请添加图片描述

<form action="">
   <input type="number" max="10" min="1" step="2" value="0">
   </form>

7、日期选择器请添加图片描述

<form action="">
    <!-- 选取日、月、年 -->
   <input type="date">
   <br>
   <!-- 选取月、年 -->
   <input type="month">
   <br>
   <!-- 选取周、年 -->
   <input type="week">
   <br>
   <!-- 选取时间（小时、分钟） -->
   <input type="time">
   <br>
   <!-- 选取时间、日、月、年（UTC时间） -->
   <input type="datatime">
   <br>
   <!-- 选取时间、日、月、年本地时间 -->
   <input type="Datatime-local">
   </form>

10、电话号码框

<input type="tel" name="" id="">

11、拾色器

在这里插入图片描述 <input type="color" name="" id="">

9、补充（不常用）

（1）数据列表 --datalist元素

 <!-- datalist标签的id名要和绑定的input的list属性命名一致 input的type="url" -->
    请输入网址：<input type="url" list="url_list">
    <datalist id="url_list">
        <option value="https://www.iqiyi.com/?vfm=f_479_dbm&fv=82351df7556c4185">爱奇艺</option>
        <option value="https://ai.taobao.com/?pid=mm_119961239_82150369_109217850080">淘宝</option>
    </datalist>

（2）密钥生产器–keygen元素

<请选择加密强度</p>
    <keygen name="security" />

（3）输出结果–output元素：用于不同类型的输出
（4）输入Email:

十、div和span标签

热爱前端，学习前端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中标题标签h7,郁闷的h7标签（CSS试验一）
weixin_42468413的博客
06-19 1232
今天在使用a的样式标签使用，由于在外面使用了一个”h7″标签，导致我郁闷了一个下午。晚上回来，一步步的做了一个试验，才发现：原来IE内核的浏览器(我仅测试了IE8和Maxthon两款)不能能够支持h6以上的标题标签(不含h6)，然而FireFox则能够很好的支持这些！！具体的测试代码如下(HTML文件)：配套的样式表：[codes=css]body{font-family: Verdana;fon...
html代码标签有哪些,常用HTML标签代码
weixin_34634720的博客
06-17 750
◆１．文字设置代码：文字设置代码◆２．大号文字设置代码：文字设置代码◆３．文字的边外加光辉效果代码： 如画江山◆４．文字重叠效果代码： 社会主义好！ ◆５．文字竖排代码： 更喜岷山千里雪， 三军过后尽开颜。 ．．．．．◆６．一条横线代码： ◆７．贴图代码1：◆８．贴图代码2：◆９．羽化图片代码：◆１０．超连接代码：说明文字◆１１．从左向右移动的代码： 文字或图片从左向右移动 ◆１２．从右向左...
html - 常用标签简介
大自然的代码
11-27 286
一、标题：<h1> - <h6>示例代码：<h1>This is a heading h1</h1> <h2>This is a heading h2</h2> <h3>This is a heading h3</h3>示例效果：This is a heading h1This is a heading h2This is a heading h3标题很重要 - 请确保将 HTML heading
HTML语法标签大全
m0_63241290的博客
01-25 1948
html语法标签，包括标题，媒体，链接，列表，表格，表单标签等等
HTML常用标签总结 [建议收藏]
Robod的博客
11-25 9041
好好学习，天天向上 本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star 1. 标题标签 <h1> </h1> … <h6> </h6> 为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题 即<h1>-<h6> 2. 段落和换行标签 段落标签：<p> </p> 在HTML标签中,标签用.
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML常用标签属性.txt
04-29
HTML常用标签属性大全
HTML：常用标签归纳（用法 + 代码 + 显示效果）
Cosmoshhhyyy的博客
07-27 1385
本文详细介绍了html中的常用的20多种标签，给出其用法和显示效果，更加直观，方便查找。
HTML基础知识点1
weixin_45607495的博客
06-26 232
1、UTF-8显示主流的很多语言，因此在写HTML的文档的时候，一定要写这个字符集。 2、标题标签 一行只能放一个 段落标签：… 水平线标签： 习惯在单标签这里添加个空格，也可以不用这个反斜杠 换行标签： …:用来布局，上下来显示，一行只能放一个div标签 …：用来布局，一行可以放好多个span,所有的span都是在一行上显示 3、文本格式化标签 …和…标签都表示加粗标签，但是通常用stro...
HTML常用标签详解
淘小欣的博客
03-04 9430
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML介绍以及常用代码
热门推荐
Xiaohuang的博客
12-05 1万+
HTML
HTML的常用标签
冷兮雪的博客
11-08 6313
这个标签可以在页面上画水平线。
前端入门：重温div标签，解密br、hr、h1~h6和h7的作用
最新发布
m0_69414996的博客
12-11 594
前端入门：重温div标签，解密br、hr、h1~h6和h7的作用
HTML标记中存在h1到h7吗,利于SEO优化的H1标签使用规范
weixin_39822147的博客
07-15 1363
原标题：利于SEO优化的H1标签使用规范 H1标签是通过网站Html代码内容优化提示，来引起搜索引擎的注意，有着一定的使用意义和注意事项，那么如何操作才能利于SEO优化呢？一.H标签定义：网上的定义很多，也称为Heading标签，是网页中对特定文字进行着重强调的一种代码标签。分类：依次分为h1，h2，h3，h4，h5，h6，h7作为标题标签等。区别：从H1到H7依次按重要序、文字大小程递减排列。作...
【web基础】html常用标签+作品展示
qq_48584557的博客
04-28 3735
小亭子正在努力的学习编程，接下来将开启javaEE的学习~~分享的文章都是学习的笔记和感悟，如有不妥之处希望大佬们批评指正~~说明：此部分是java web基础知识，学的不深，仅为了后期独立实现项目时能够自己写前端页面。目录前言标签也有层次关系HTML 常见标签注释标签标题标签段落标签换行标签格式化标签图片标签：img代码示例超链接标签 a表格标签合并单元格列表标签表单标签input 标签1.文本框2.密码框3.单选框4.复选框5.普通按钮6.提交按钮7.清空按钮8.选择文件lable标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值