Loading

HTML常用标签

目录

HTML常用标签

HTML基本结构标签

<html> 
    <head>
       <title></title>
    </head>
    <body>
        
    </body>
</html>

其他标签

  1. 文档声明标签
  2. 语言种类，en定义为英文，zh-CN定义语言为中文

  3. 字符集,规定HTML文档使用哪种字符编码

head标签

  1. title:标题标签，定义显示在网页左上角的标题。
  2. meta：一般定义一些当前网页的特殊属性。通过meta标签的属性定义页面的特征。
    1. charset属性
    2. name属性
  3. link
  4. script

标题标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>老北京</h1>
		<h2>詹姆斯</h2>
		<h3>戴维斯</h3>
		<h4>小皮皮</h4>
		<h5>哪里多</h5>
		<h6\>hello world！</h6>
	</body>
</html>

段落和换行标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<p>上面的例子在大多数<br />浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。</p>
		<p>我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。尝试一下</p>
	</body>
</html>

文本格式化标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--1.加粗标签-->
		<strong>小皮皮加粗</strong>
		<b>勒布朗哈哈哈</b>
		<!--2.倾斜标签-->
		<em>倾斜小皮皮</em>
		<i>勒布朗倾斜</i>
		<!--3.删除线标签-->
		<del>删除线老北京</del>
		<s>删除美滋滋啊</s>
		<!--4.下划线标签-->
		<ins>湖人总冠军</ins>
		<u>湖人总冠军</u>
		
		<!--注意：以上标签均推荐第一种-->
		
	</body>
</html>

特殊标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<!--<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的，布局-->
		<div>一个div标签单独占一行</div></div>
		<div>大盒子</div></div>
		<span>跨度</span></span>
		<span>小盒子</span></span>
	</body>
</html>

图像标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>图像标签：</h1>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" />
		<h2>alt 替换文本，图像显示不出来的时候用文字替换</h2>
		<img src="cc9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" />
		<h3>title 提示文本</h3>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" />
		<h4>width 给图像设定宽度，height 给图像设定高度</h4>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" width="500" height="300" />
		<h5>给图像设定边框</h5>
		<img src="c9d3deb2880411ebb6edd017c2d2eca2.jpg" alt="显示不出来哈哈哈哈!" title="我是小皮皮啊哈哈!" width="500" height="300" border="15" />
		
	</body>
</html>

超链接标签

<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>老北京来了</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h4>1.外部链接：</h1>
		<!--target:打开窗口的方式。默认是-self 当前窗口打开页面 _blank 新窗口打开页面-->
		<a href="https://www.bilibili.com/ " target="_blank"> Bilili</a>
		<h4>2.内部链接：</h4>
		<a href="gongshi.html">内部链接</a>
		<h4>3.空链接</h4>
		<a href="#">空连接</a>
		<h4>4.下载链接 文件</h4>
		<a href="images/c9d3deb2880411ebb6edd017c2d2eca2.rar">下载文件</a>
		<h4>5.网页元素的链接</h4>
		<a href="https://www.bilibili.com/"><img src="images/c9d3deb2880411ebb6edd017c2d2eca2.jpg " width="500" height="300"/></a>
	</body> 
</html>

HTML中的特殊字符

表格标签

  1. 表格的基本语法
    1.

    是用于定义表格的标签
    2.标签用于定义表格中的行，必须嵌套在
    标签中
    3.标签用于定义表格中的单元格，必须嵌套在标签中-

    <!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<title>湖人总冠军</title>
		<meta charset="utf-8">
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
	</body> 
</html>

<!--注释:
	1.<table></table>是用于定义表格的标签
	2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
	3.<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中-->

  2. 表头单元格标签

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>	   <table>	   	<tr>	   		<th> fdfsd</th>	   	</tr>	   	<tr>	   		<td>cdf</td>	   	</tr>	   </table>	</body> </html><!--<th></th>标签表示HTML表格的表头部分(table head)-->

  3. 表格属性

    表格标签这部分属性我们实际开发不常用，后面通过CSS来设置

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>	   <table align="center" border="1" cellpadding="12" cellspacing="12" width="12">	   	<tr><th> 湖人总冠军</th><th>我去</th></tr>	   	<tr><td>小皮皮哈哈哈</td><td>tql</td></tr>	   </table>	</body> </html>

  4. 表格结构标签

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>	   <table border="1" cellspacing="1" cellpadding="3">		<thead>			<tr>				<th></th>			</tr>		</thead>		<tbody>			<tr>				<td></td>			</tr>		</tbody>	   </table>	</body> </html>

  5. 合并单元格

    • 跨行合并：rowspan="合并单元格的个数"
    • 跨列合并：colspan="合并单元格的个数"

列表标签

  1. 无序列表

      标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用
    • 标签定义。

        中只能嵌套
      • ，直接在
          标签中输入嵌套标签或者文字是不允许的。

        • 相当于一个容器，可以容纳所有元素。

          基本语法格式：

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>		<ul>			<li>列表项1</li>			<li>列表项2</li>			<li>列表项3</li>		</ul>	</body> </html>

  2. 有序列表

    在HTML标签中，

      标签用于定义有序列表，列表排序以数字来显示，并使用
    1. 标签来定义列表项。

        中只能嵌套
      1. ，直接在
          标签中输入嵌套标签或者文字是不允许的。

        1. 相当于一个容器，可以容纳所有元素。

          基本语法格式：

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>		<h1>小皮皮哈哈哈</h1>		<ol>			<li>列表项1</li>			<li>列表项2</li>			<li>列表项3</li>		</ol>	</body> </html>

  3. 自定义列表

    在HTML标签中，

    标签用于定义自定义列表，该标签会与
    （定义项目/名字)和
    (描述每一个项目/名字)一起使用。

    只能包含
    和
    。

    和
    个数没有限制，经常是一个
    对应多个
    。

    基语法格式：

    <!DOCTYPE HTML><html lang="zh-CN">	<head>		<title>湖人总冠军</title>		<meta charset="utf-8">	</head>	<body>		<dl>			<dt>小皮皮</dt>			<dd>小屁屁</dd>			<dd>詹姆斯</dd>		</dl>	</body> </html>
posted @ 2021-05-22 10:37  ΘLLΘ  阅读(193)  评论(0)    收藏  举报