HTML常用标签和符号及案例

Posted 2021-07-24 栗栗本栗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML常用标签和符号及案例相关的知识，希望对你有一定的参考价值。

<html>

网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部

<head>头部（不可见）

网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面
子标签

<title>

用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名

<meta>

用来设置网页的元数据，比如网页使用的字符集

<meta charset="UTF-8”/>

设置网页的关键字

<meta name="keywords" content="关键字,关键字,关键字,关键字"/>

设置网页的描述

<meta name="description" content="网页的描述"/>

<body>主题（可见）

网页的主体
网页中所有的可见部分都需要在body中编写

<h1>~<h6>标题

标题

<p>段落

段落标签

<br>换行

换行标签

<hr>水平线

水平线

<div>块区域

用于在文档中设定一个块区域

<span>行内块区域

用于在行内设定一个块区域，行内标签，用来组合行内的多个元素

<img>图片

图片标签，使用图片标签可以向页面中引入一个外部图片

常用属性:

src:指向一个外部图片的路径，可以使用相对路径或URL
alt:指定一个在图片无法加载时对图片的描述。搜索引擎主要通过该属性来识别图片的内容width:用于设定图片的宽度
height:用于设定图片的高度border:图片边框厚度

图片的格式:

JPEG:颜色丰富的图片，如，照片
GIF:颜色单一，简单透明的图片，动态图
PNG:颜色丰富，复杂透明的图片
图片选择的原则:效果一致，用小的，效果不一致，用效果好的

<iframe>内联框架

内联框架标签，向一个页面中引入其他的外部页面

常用属性:

src:外部页面的地址，可以使用相对路径.
name
– 可以为内联框架指定一个名字
– 可以将该属性值设置为超链接的target属性的值
– 这样当点击超链接时，页面将会在相应的内联框架中打开

内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架.

<a>超链接

用于定义超连接，用于从一个页面链接到另一个页面。
常用属性:

href:链接跳转的目标地址
- 可以是一个相对路径或URL地址。
- 可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置。.
target:指定在哪个窗口中打开链接。
- _self: 默认值，在当前窗口打开链接
- _blank:在新窗口中打开链接
- 内联框架的name属性值:在指定的内联框架中打开链接

<ul>有序列表

<ol>无序列表

空格: 

大于号:<·

小于号:>

版权符号: ©

案例

一

<!DOCTYPE html>
<html lang="en">
<head>
    <title>网页标题</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="java,c#,编程,软件开发"/>
    <meta name="description" content="软件开发平台">
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<hr>
<p>段落标签</p>
<p align="left">段落标签</p>
<p align="center">段落标签</p>
<p align="right">段落标签</p>

<hr>
<div>布局标签</div>
<div align="left">布局标签</div>
<div align="center">布局标签</div>
<div align="right">布局标签</div>

<hr>
<div>
    <span>行内区块</span> <span>行内区块</span> <span>行内区块</span>
</div>
<hr>

<img src="img/1.png" alt="图片加载失败" height="200px" border="3">


</body>
</html>

二列表

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表标签</title>
    <meta charset="UTF-8">
</head>
<body>
<!--有序列表-->
<ol type="1" start="2">
    <li>Java</li>
    <li>Python</li>
    <li value="100">C#</li>
</ol>

<ol type="A">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ol>

<ol type="a">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ol>

<ol type="I">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ol>

<ol type="i">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ol>


<hr>
<!--无序列表-->
<ul type="disc">
    <li>
        <a href="">java</a>
    </li>
    <li>Python</li>
    <li>C#</li>
</ul>

<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

<ul type="circle">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

<ul type="circle">
    <li>Java</li>
    <li type="square">Python</li>
    <li>C#</li>
</ul>
</body>
</html>

三

<!DOCTYPE html>
<html lang="en">
<head>
    <title>框架标签</title>
    <meta charset="UTF-8">
</head>
<body>
<iframe src="https://www.baidu.com" width="100%" height="500px"></iframe>
</body>
</html>

以上是关于HTML常用标签和符号及案例的主要内容，如果未能解决你的问题，请参考以下文章

Java Web - HTML 常用标签和符号