HTML -- 常用标签

  • 标签

表示HTML网页内容的一个最基本的组织单元,类似于语文中的标点符号,

标签的作用:告诉浏览器当前标签中的内容是什么,以什么格式在页面中进行呈现

  • 单标签

单标签(只有一个标签名的标签)的标签格式:

<标签名>
<标签名 />
<标签名 属性名="属性值" 属性名/>

网页中的常见单标签: 

标签名 描述
<meta> 元信息标签
<link> css外观样式的外链引入标签(类似于import)
<img> 图片标签
<input> 输入框标签
<br /> 换行标签,浏览器遇到br标签就会自动进行内容换行(类似于/r /n)
<hr /> 分格线标签,代表分隔内容的一条横线

  • 双标签

双标签(成对标签名出现,有开始标签和结束标签)的标签格式:

<标签名> 内容 </标签名>

网页中的常见双标签: 

标签名 描述
<h1></h1> 网页的一级标题
<h2></h2> 网页的二级标题
... ...
<h6></h6> 网页的六级标题
<p></p> 网页的段落
<a></a> 网页超链接
<div></div> 块级结构标签
<span></span> 行级结构标签
<form></form> 表单标签,表示网页的一个提供给用户输入数据的表单
<ul></ul> 无序列表结构标签,表示网页的一个内容列表
<li></li> 列表项目标签
<table></table> 表格标签,表示网页的一个表格
  • 常见标签的使用

注:HTML中的标签是由HTML语法提供的,所以每个标签名都是固定的

而XML中的标签是可以自定义的,但XML中的语法更为严谨

 标题和段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML常见标签的使用</title>
</head>
<body>
    <h1>h1标题:常用于网站的logo、标题</h1>
    <h2>h2标题:常用于网站的模块标题、栏目标题</h2>
    <h3>h3标题:常用于网站的模块标题、栏目标题</h3>
    <h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4>
    <h5>h5标题:更小级别的标题,基本用不到</h5>
    <h6>h6标题:更小级别的标题,基本用不到</h6>
    <p>p段落</p>

</body>
</html>

 换行、分隔、超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行br/分隔符hr/超链接a</title>
</head>
<body>
  <a href="https://baike.baidu.com/item/将进酒/5312" title="将进酒"><h1>将进酒</h1></a>
  <p>
    君不见黄河之水天上来,奔流到海不复回。<br>
    君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
    人生得意须尽欢,莫使金樽空对月。<br>
    天生我材必有用,千金散尽还复来。<br>
    烹羊宰牛且为乐,会须一饮三百杯。<br>
    岑夫子,丹丘生,将进酒,杯莫停。<br>
    与君歌一曲,请君为我倾耳听。<br>
  </p>
  <hr>
  <h2>译文</h2>
  <p>
    你可见黄河水从天上流下来,波涛滚滚直奔向大海不回还。<br>
    你可见高堂明镜中苍苍白发,早上满头青丝晚上就如白雪。<br>
    人生得意时要尽情享受欢乐,不要让金杯空对皎洁的明月。<br>
    天造就了我成材必定会有用,即使散尽黄金也还会再得到,<br>
    煮羊宰牛姑且尽情享受欢乐,一气喝他三百杯也不要嫌多。<br>
    岑夫子啊,丹丘生啊,快喝酒啊,不要停啊。<br>
    我为在坐各位朋友高歌一曲,请你们一定要侧耳细细倾听。<br>
  </p>
</body>
</html>

 

超链接的2中常用用法:页面跳转、下载文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--页面跳转:如果href的值是网络页面时,跳转到指定页面-->
    <a href="http://baidu.com">百度一下</a>
    <br>
    <!--页面跳转:如果href的值是本地地址时,跳转到本地的内部网页-->
    <a href="./1_3_4-超链接页面.html">跳转到本地页面</a>
    <br>
    <!--下载资源:当href的值是一个浏览器无法直接展示的内容格式时,浏览器会自动下载当前路径对应的内容-->
    <a href="./html">点击下载</a>
    <!--下载资源:当href的值是一个浏览器可以直接识别并展示的内容格式时,用户可鼠标右键,对当前href的值进行另存为下载-->
    <a href="./attribute.png">点击下载图片(使用“鼠标右键,另存为”的方式)</a>
</body>
</html>

 实际上,页面跳转也是下载文件的一种,因为用户能在浏览器里面看到的所有内容,实际上都是经过浏览器下载到本地,用户才能看到。可以通过F12(打开开发者工具)->network(网络)查看

  •  属性

标签的作用就是用于展示内容,但是内容有时候并非文本,且文本的展示需要附加一些额外的效果时,就需要使用标签的属性来声明。不管是单标签还是双标签,都有属性[Attribute]。

标签的属性有两种:

  •  普通属性:属性名与属性值使用"="关联,属性值使用单引号或双引号围住
  •  布尔属性:只有属性名,没有属性值,或是属性值只有True或False  (不是直接在后面写上True或False,而是当标签中写上这个属性名,则其值表示为True,反之为False)

 属性的使用

<!DOCTYPE html>
<html lang="en"> <!--lang就是HTML标签的属性,代表当前网页的默认语言language为english-->
<head>
    <meta charset="UTF-8"> <!-- charset是meta元信息标签的属性,表示当前网页的编码是utf-8-->
    <title>HTML常见标签的使用</title>
</head>
<body>
    <!-- 双标签的属性 -->
    <!--align:文本的对齐方式 ==> left左(默认)、right右、center居中
        title:表示当前标签的补充提示,当用户把鼠标放在当前标签上方,则会自动显示title属性的值-->
    <h1 align="left" title="提示文本">h1标题:常用于网站的logo、标题</h1>
    <h2 align="center">h2标题:常用于网站的模块标题、栏目标题</h2>
    <h3 align="right">h3标题:常用于网站的模块标题、栏目标题</h3>
    <h4>h4标题:常用于网站的附加板块标题或是文章的标题</h4>
    <h5>h5标题:更小级别的标题,基本用不到</h5>
    <h6>h6标题:更小级别的标题,基本用不到</h6>
    <p>p段落</p>
    <!-- 单标签的属性:单标签没有内容,需要依靠属性来展示对应的内容-->
    <img src="./attribute.png"> <!--src:需要展示图片的地址-->
    <input type="number"> <!--输入框标签[数值输入框],number表示只允许当前输入框中的内容为数值-->
    <input type="password"> <!--输入框标签[密码输入框],password表示输入的任何内容都是密码,所以输入的内容不会被展示出来 -->
    <input type="text"> <!--输入框标签[单行文本输入框],text表示只允许输入一行内容,不能回车-->
    <input type="datetime-local"> <!--时间输入框,只需要用户选择时间日期-->
</body>
</html>

<input type="datetime-local">  

相关推荐

  1. HTML标签

    2024-02-02 07:56:03       37 阅读
  2. HTML标签

    2024-02-02 07:56:03       17 阅读
  3. HTML标签--详解

    2024-02-02 07:56:03       25 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-02 07:56:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-02 07:56:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-02 07:56:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-02 07:56:03       20 阅读

热门阅读

  1. 算法价值3-贪心算法

    2024-02-02 07:56:03       28 阅读
  2. Python闭包

    2024-02-02 07:56:03       33 阅读
  3. 前端工程化之:webpack1-10(区分环境)

    2024-02-02 07:56:03       35 阅读
  4. windows10设置多个jar后台开机自启

    2024-02-02 07:56:03       40 阅读
  5. 【go】延迟执行和定时器实现

    2024-02-02 07:56:03       35 阅读
  6. R-YOLO

    R-YOLO

    2024-02-02 07:56:03      27 阅读
  7. SpringBoot使用poi将word转换为PDF并且展示

    2024-02-02 07:56:03       32 阅读
  8. 深度学习框架PyTorch的介绍和安装方法

    2024-02-02 07:56:03       36 阅读
  9. uniapp【组件封装】时间戳格式化为星期

    2024-02-02 07:56:03       37 阅读
  10. 算法价值2-空间复杂度

    2024-02-02 07:56:03       29 阅读