html常用标签总结

最新推荐文章于 2024-08-04 14:23:51 发布
最新推荐文章于 2024-08-04 14:23:51 发布
阅读量1.6k 收藏 14
点赞数 7
分类专栏： html 文章标签： html 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssjjrr/article/details/122159880
版权

html常用标签总结

一、标题字体

标签名称：h1~h6，h1到h6字体越来越小，加粗效果越来越弱

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你好
    <h1>你好</h1>
    <h2>你好</h2>
    <h3>你好</h3>
    <h4>你好</h4>
    <h5>你好</h5>
    <h6>你好</h6>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

二、段落标签

标签名称：p，独占一行，默认有上下间距

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你好1 你好1
    <p>你好2</p>
    <p>你好2</p>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

三、加粗和倾斜标签

1、加粗标签：b,strong
2、倾斜标签：i,em

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你好
    <b>你好</b>
    <strong>你好</strong>
    <i>你好</i>
    <em>你好</em>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

四、下划线标签

标签名称：u，文本会有一个下划线

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    你好
    <u>你好</u>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

五、常见单标签

1、hr，横线
2、br，换行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- hr的使用 -->
    今天天气不错
    <hr />
    今天我们一起去爬山吧

    <!-- br的使用 -->
    <br />今天天气不错
    <br />
    今天我们一起去爬山吧
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

六、无序列表

两个双标签进行嵌套，ul嵌套li

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
    </ul>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

七、有序列表

两个双标签进行嵌套，lo嵌套li
其中，属性type表示列表序号类型， 属性start表示序号从几开始

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol type="1" start="4">
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
      <li>新闻5</li>
    </ol>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

八、自定义列表

标签dl嵌套dt和dd，dd默认有缩进

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <dl>
      <dt>今日新闻</dt>
      <dd>新闻内容</dd>
    </dl>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

九、超链接标签

1、标签名称：a
2、特点：有颜色，有下划线，点击会刷新
3、属性

    - href 超链接跳转的地址 
    - title 提示文本
    - target 控制窗口打开方式
        - 默认值 _self 打开的窗口会覆盖原窗口
        - _blank 打开新的标签页 不会覆盖原窗口

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.baidu.com/" title="点击跳转百度">跳转百度首页</a>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

十、图片标签

1、标签名称: img(单标签)
2、属性

    - src 引入图片的地址
    - alt 当图片加载失败时候的提示文本
    - title 提示文本 
    - width/height 宽度/高度(图片会变形)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img
      src="images/Curry.jpg"
      alt="图片加载失败"
      title="这是一张图片"
      width="200"
      height="200"
    />
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

十一、表格标签

1、标签名称

    - 最外层 table 表格
        - tr 表格中的行
            - td 表格中的列 单元格

2、属性

    - width/height 宽度和高度
    - border 边框
    - bordercolor/bgcolor 边框颜色/背景颜色
    - cellspacing/cellpadding 单元格与单元格之间的间距/单元格与单元格中内容的间距
        - cell 细胞、单元格
        - space 空间
        - padding 内边距

3、表格的水平和垂直方向的位置

    - 水平方向 align:left、right、center
        - table：控制整个表格在水平方向移动
        - tr：控制表格中的一行文本在水平方向移动
        - td：控制单个单元格内容在水平方向移动
    - 垂直方向 valign:top、bottom、middle
        - table：没有效果
        - tr：控制表格中的一行文本在垂直方向移动
        - td：控制单个单元格内容在垂直方向移动

4、行列合并

    - colspan 列合并
    - rowspan 行合并

十二、表单

1、表单框
标签名称: form
属性：

    - action 后台地址
    - name 表单框的名字
    - method 方法 表示前端和后台的一种交互方式 get/post

2、表单控件
标签名称: input
属性:

    - type表示类型 (很多，下面展开)
    - vaule 表示在input表单控件中的提示文本 
    - name 表示表单控件的名字
    - size 表示尺寸 在表单控件中可以表示表单控件的宽度(不建议用) 属性值是字符数
    - maxlength 最大长度:用户的登陆注册

3、type类型

    - text 文本输入框
    - password 密码
    - radio 单选按钮 有多个的时候会默认都会选择上 需要设置相同的name值就可以了
    - checkbox 多选(默认选择 checked；禁止选择 disabled)

功能按钮:一定要放在form表单中才有作用

    - submit 提交
    - reset 重置
    - button 空按钮 没有什么实际的作用 需要绑定js事件才可以
        - type类型为button
        - button标签

4、value属性

    - 在type类型为text的时候 value是提示用户输入信息的文本 占位置 用户填写信息的时候需要手动删除
    - 在type类型为password的时候 value不能使用了 可以使用html5中新增的属性placeholder

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="php.php">
      <h2>个人信息登记表</h2>
      姓名：<input type="text" placeholder="请输入您的姓名..." /> <br />
      密码：<input type="password" placeholder="请输入您的密码..." /> <br />
      性别：<input type="radio" name="gender" />男
      <input type="radio" name="gender" />女 <br />
      爱好：
      <input type="checkbox" />吃饭 <input type="checkbox" />睡觉
      <input type="checkbox" />唱跳rap篮球 <input type="checkbox" checked />喝酒
      <br />
      <input type="submit" value="点击提交表单" />
      <input type="reset" value="重置输入" />

      <input type="button" value="点击浏览器弹窗" onclick="alert('你好！')" />
      <button onclick="alert('hello!')">点击</button>
    </form>
  </body>
</html>

浏览器运行效果如下：
在这里插入图片描述

孙景荣
关注
专栏目录
HTML的常用标签
冷兮雪的博客
11-08 6404
这个标签可以在页面上画水平线。
HTML常用标签
weixin_48668600的博客
07-28 874
- 排版标签 - 文本格式化标签 - 图像标签 - 链接 - 相对路径，绝对路径的使用
HTML标签总结
最新发布
fox22106的博客
08-04 408
一、基本骨架1、head：网页头部，用来存放给浏览器看的信息，例如CSS2、title：网页标题3、body：网页主体，用来存放给用户看的信息，例如图片、文字二、标签1、标题标签：h1 ~ h6（双标签）文字加粗字号逐渐减小独占一行（换行2、段落标签：p（双标签）独占一行段落之间存在间隙3、换行与水平线标签换行：单标签水平线：单标签。
HTML标记大全
weixin_30555125的博客
08-01 307
<!---->批注<!>跑马灯<marquee></marquee>普通卷动<marqueebehavior=slide></marquee>滑动<marqueebehavior=scroll></marquee>预设卷动<marqueebehavior=...
html 常见标签
grey_mouse的博客
12-31 635
HTML 超文本标记语言 （Hyper Text Markup Language，简称HTML） 俗称网页，该语言所保存的文件名字后缀必须是 文件名.html 或者 文件名.htm。 页面格式 &lt;html&gt;         &lt;head&gt;               子标签         &lt;/head&gt;          &lt;body&gt;    ...
HTML常用标签总结
03-09
经过一段时间的学习，对于HTML也有了基础的认识。所以我就一点点的总结一下各类常用的标签的用法。
第1天--(下午)HTML常用标签总结、HTML表单详解.rar
12-27
在“第1天--(下午)HTML常用标签总结、HTML表单详解.rar”这个压缩包中，我们很显然会看到关于HTML常用标签的总结以及HTML表单的深入解析。下面将对这两个主题进行详细的阐述。 首先，HTML常用标签是构建网页的基本...
html中常用的标签总结(必看)
12-14
在本文中，我们将深入探讨一些HTML中常用的标签，帮助你更好地理解和使用它们。 1. **标题标签**：`<h1>`到`<h6>`用于定义不同级别的标题，`<h1>`为最高级别，`<h6>`为最低级别。这些标签有助于提高网页的可读性和...
HTML常用的标签总结
weixin_44950875的博客
11-12 1743
前端HTML基础常用标签的整理
Struts2常用标签总结
08-23
下面我们将深入探讨Struts2的常用标签及其使用。\n\n1. Struts2的作用\n\nStruts2的作用主要体现在以下几个方面：\n\n- **视图简化**：通过提供UI标签，Struts2简化了HTML元素的创建，使开发者无需手动编写繁琐的...
52个HTML的标签总结
u014395826的博客
01-17 1947
HTML的52个标签 标签名 含义 常用属性 类型
html中的常用标签
D1573的博客
08-09 1507
默认样式是加粗的，其中一级标题是最大最粗的，六级标题是最小的，标题与标题之间有较大的间距，还会独占一行，标题标签是块元素！语义：代表一个标题,而且一级标题语义是最重，六级标题语义是最轻，标题标签会帮助seo,sem推广，其重要性仅次于title标签，常用的是h1-h3标签，h1标签一般一个页面只有一个。与其同样表示强调的还有strong，表现样式为加粗，同样没有独占一行，em强调的是语调，strong强调的是内容。9.p标签（段落标签） yan，样式：行与行之间有间隔，独占一行，属于块元素。......
html常用标签
flirt_的博客
02-15 4375
<!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> </body&g
HTML常用标签总结及用法实例
<!...定义了网页的主要内容部分，俗称身体。 在HTML中，各种标签有各自的用途，下面将逐一总结常用...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值