前端---标签

最新推荐文章于 2023-05-01 21:27:48 发布

刘心芝士小蛋糕

最新推荐文章于 2023-05-01 21:27:48 发布

阅读量401

点赞数 1

分类专栏：前端文章标签： html5 html 前端 java

本文链接：https://blog.csdn.net/love_to_share/article/details/103586584

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1.定义

HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
特点：

由尖括号包围的关键词
通常是成对出现的
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
也有单独呈现的标签
一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。
网页的内容需在html标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在head标签中，而网页需展示的内容需嵌套在body标签中。某些时候不按标准书写代码虽然可以正常显示，但是作为职业素养，还是应该养成正规编写习惯。

2.网站的基本标签

1.标题标签

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

2.段落标签

<!--p：段落标签-->
<p>
    我们会来到这个世界，是不得不来；我们最终会离开这个世界，是不得不离开
</p>
<p>人是为活着本身而活着，而不是为了活着之外的任何事物所活着</p>
<p>死亡不是失去了生命，只是走出了时间</p>
<p>人是为了活着本身而活着，而不是为了活着之外的任何事物而活着</p>
<p>
    世界上没有一条道路是重复的，也没有一个人生是能够替代的
</p>

3.换行标签

 

4.水平线标签

hr/

5.水平线标签

粗体
斜体

<!--字体样式-->
<strong>洋洋 </strong>
<p>
    <em>洋，女，汉族</em> <br>
    <em>18岁</em>  <br>
</p>

6.特殊符号标签

&nbsp 空格
> <大于小于
© 版权所有
&phone;

<!--空格 &-->
<p>1 Java</p>
<p>1              Java</p>
<p>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：1
<!--万能的公式  &  ;-->
&phone;

3.图像标签

常见的图片格式： .png .jpg .jpeg .bmp .gif…
png 会有浏览器兼容问题,一般使用 .jpg .gif多一点
图片是静态资源，一般单独放在一个文件夹下，statics\images
相对路径：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系
../../
绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，带域名的文件的完整路径
https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg

4.超链接

4.1基本用法

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

4.2锚链接
- 用于页面间指定位置跳转：快速定位目录
- 可以在同一页页面中跳转
- 也可以在不同页面中跳转：（需要掌握）

锚点：

<!--标记A-->
<a name="markerA">A</a>

跳转到锚点：

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>

4.3功能性链接
- 邮件
 <a href="mailto:**********@qq.com">联系我们</a>
- QQ

<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<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>

5.块元素、行内元素

块元素：无论内容多少，都是独占一行的（p，h1~h6）
行内元素：只根据内容的长度来扩展。（a，strong，em….）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

刘心芝士小蛋糕

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端---标签

1.定义HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。特点：由尖括号包围的关键词通常是成对出现的标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签也有单独呈现的标签一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。网页的内容需在html标签中...
复制链接

扫一扫