HTML常见标签

最新推荐文章于 2023-05-06 14:51:06 发布

iringzh

最新推荐文章于 2023-05-06 14:51:06 发布

阅读量234

点赞数

分类专栏：杂项笔记

本文链接：https://blog.csdn.net/iczfy585/article/details/100729779

版权

杂项笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML常见标签及其用法

html作为一种超文本标记语言，是由一系列成对出现的元素标签嵌套组合而成的。这些标签以<元素名>的形式出现。浏览器通过标签解析文本内容输出到页面上，但是标签本身是不会显示的。

html5文档的基本结构

example

 <!DOCTYPE html>
 <html>
     <head>
         <title>网页标题</title>
     </head>
     <body>
         主体内容
    </body>
 </html>

首部标签<head>

网页标题标签<title>:
<title>标题</title>标题会显示在浏览器窗口的标题栏中
基础地址标签<base>
这个标签可以用简化引用的地址代码。例如一个网页要插入一些图片，图片均放在网站根目录的image文件夹中。我们可以在在head中写如下代码:
<base href="localhost/image/">
在后面的插入图片的代码中的*src属性*只用指定图片的文件名即可。
元数据标签<meta>
这个标签常用来指定浏览器来解析html文档所用的编码方式。常用的属性就是charset，另外也有name属性和content属性，是用来方便搜索引擎来搜索的。
<meta charset="utf-8 name="keywords" content="xxxxx"
链接标签<link>
用于链接外部资源，只会出现在首部标签<head>和</head>中，常用来连接外部样式表。
```
    <head>
	<link rel="stylesheet" href="1.css">
	</head>
```
脚本标签<script>
可以用来引用外部的脚本内容，比如说 javascript，也可以直接在<script></script>之间写js代码。
```
   <head>
   <script src="1.js"></script>
   </head>
```

基本标签

<p>段落内容<p> 是一个块级元素，意味着标签的其所标记的内容前后会自动换行。
<h>标题内容<h> 也是一个块级元素，其中h后面可以加上数字1~6,1表示最大,6为最小。
<hr> 这个标签成单出现，效果是形成一条水平分隔线。
<br>这个标签也是成单出现，起到换行的效果。

格式标签

<b>内容</b> 对内容进行加粗，类似的有<strong><strong> 这个标签也会对内容进行加粗，但还有强调之意。有利于检索。
<i>内容</i> 斜体效果。
<pre>内容</pre>这个标签会将内容按照原格式输出，就是说在写代码时，源文件中的所有格式都是会被体现的。这在例如 <p></p>标签中是不相同的，<p></p>标签中多个空格只会被解析为一个空格。
上标签<sup></sup>和下标签<sub></sub>可以用来表示2¹⁰和CO₂
删除线<del></del>和下划线<ins></ins>

列表

有序列表<ol></ol> 需要和列表向<li>配合使用。其中
ol标签有属性type,可以用来指定编号的样式。如下：

Type属性值	编号样式
a	英文字母小写(a,b,c)
A	英文字母大写(A,B,C)
i	罗马数字小写（i,ii,iii,iv）
I	罗马数字大写(I,II,III,IV)
1	阿拉伯数字

   <ol type="i">
   		  <li>第一项
   		  <li>第二项
   		  <li>第三项
    </ol>

无序使用列表<ul></ul>也需要和列表项<li>配合使用。标签ul的type属性如下：

Type属性值	标号样式
squre	方形
circle	圆心
disc	实心圆圈

超链接链接标签<a>

用法：
<a href="http://www.xxx.com" target=" ">...</a>
其中属性href的值是请求的url，可以是外部的url，也可以是内部的。比如说要在同一篇文章中实现跳转。可以这样写：
<a href="#x">点击我实现跳转</a> 
其中的target属性是用来描述打开目标内容的方式，有如下几种

Target的属性	说明
_blank	新窗口
_self	自身
_top	顶层框架
_parent	父框架

表格标签<table>
表格标签由<table><table>定义,每个标签是由若干行(由标签<tr><tr>组成,每一行又是由若干个单元格<td><td>组成)

<table border="1">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>	
</table>

上述代码定义了一个两行两列的表格。
补充：
<th>标签：常用于定义表格的头一行，默认字体为粗体，居中对齐。
<caption>标签:用于为表格添加标题，默认居中对齐，显示在表格的顶部。

框架标签<iframe>

用法：用于在网页的框架内定义子窗口，例如：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<p>框架标签的测试</p>
<iframe src="https://www.baidu.com"></iframe>
</body>
</html>

效果：
在这里插入图片描述

容器标签<div>和<span>

<div></div>标签是一个块级的标签，就是其中的元素会在前后自动会换行，常用于页面的布局，类似的块级标签还有:<p> ,<h>标签等。
<span&g;标签通常作为文本的容器，没有特定的含义和样式，常与CSS结合为指定文本设置样式属性。这个标签是一个内联标签，其中内联元素是不会在前后放置换行符的

HTML5新增的常用标签

1.文档结构标签
早期版本对于文档结构,常采用<div>标签+id的方式,对页眉，页脚，正文，侧栏，导航进行布局。html5直接增加了相应的标签，如下:

标签名称	含义
<header>	为页面添加页眉
<footer>	为页面添加页脚
<nav>	导航标签，用于定义导航菜单栏
<aside>	侧栏标签,用于定义网页正文两侧的侧栏内容
<article>	文章标签，用于定义正文的内容，每一个该标签都可以包含页眉和页脚
<section>	节标签，用于定义节段落

需要注意的时，这几个标签本质上和div相同的，只是更能“见名知意”，它们本身是不带任何格式的。因此需要和css结合来设计布局。

记号标签<mark>
用法:<mark>文字</mark>可以问文字添加黄色底色。
进度标签<progress>
用法:可以用于显示任务的进行状态，常和js结合使用。下面的一个例子就实现了一个动态变化的效果。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript">
		function test(){
			document.getElementById("pg").value = (new Date().getTime())%60;
		}
	</script>
</head>
<body>
	<h3>利用js测试progress标签</h3>
	<progress id="pg" max="60"></progress>
	
</body>
</html>

iringzh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常见标签

HTML常见标签及其用法html作为一种超文本标记语言，是由一系列成对出现的元素标签嵌套组合而成的。这些标签以<元素名>的形式出现。浏览器通过标签解析文本内容输出到页面上，但是标签本身是不会显示的。html5文档的基本结构example <!DOCTYPE html> <html> <head> <tit...
复制链接

扫一扫