Web前端开发 HTML常用标签

最新推荐文章于 2024-05-18 09:54:21 发布

Jxufe渣渣斯

最新推荐文章于 2024-05-18 09:54:21 发布

阅读量1k

点赞数 1

分类专栏：前端（微信小程序、Web开发等）

原文链接：https://www.cnblogs.com/dear_diary/p/6510393.html

版权

前端（微信小程序、Web开发等）专栏收录该内容

40 篇文章 21 订阅

订阅专栏

参考链接：
1）HTML常用标签及其属性
https://www.cnblogs.com/dear_diary/p/6510393.html
2）https://www.w3school.com.cn

#基本
<html>…</html>      定义 HTML 文档
<head>…</head>   文档的信息
<meta>                    HTML 文档的元信息
<title>…</title>        文档的标题
<link>                      文档与外部资源的关系
<style>…</style>    文档的样式信息
<body>…</body>   可见的页面内容
<!--…-->                 注释

#<meta>标记
<meta>的主要作用，是提供网页的元信息。比如：指定网页的搜索关键字。
<meta>标记有两个属性：http-equid和name。
1.http-equiv属性
功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。
http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。
(1)设置网页的字符集
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
(2)网页自动刷新
<meta http-equiv="refresh" content="2">   //每隔2秒钟，自动刷新网页一次
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com">   //2秒钟后，跳转到凤凰网
2.name属性
name属性主要用于设置网页的搜索关键字、版权信息、作者等。
(1)设置网页搜索关键字
<meta name="keywords" content="网站建设，企业网站建设，网站制作，网上商城，网站推广，域名注册，中企动力" />
(2)设置网页描述信息
<meta name="description" content="网站建设、网站制作专家中企动力，为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>

#HTML文本修饰标记
<b></b>：加粗bold。如：<b>HTML文件</b>
<i></i>：斜体italic。如：<i>HTML文本</i>
<u></u>：下划线underline。如：<u>HTML文本</u>
<s></s>：删除线strike。如：<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。
<font></font>字体标记
属性：Size：文本大小，取值1-7。1-小，7-大。Color：颜色值。Face：字体，楷体、黑体、宋体...

#HTML排版标记
1.<p></p>表示一个段落。
常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右)
举例：<p align="center">水平对齐方式居中对齐</p>
2.换行标记<br>
3.标题标记：<h1>……<h6>
功能：定义各种标题。
属性：align水平对齐方式，取值：left、center、right。
语法：<h1  align = “left | center | right”></h1>

#<div>和<span>标记
<div>是没有任何意义的标记，但是，又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。
<span>是没有任何意义的标记，但是，又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。
（1）块元素
块元素，一般是单独占一行，不管内容多少，总是占一行。
块元素有哪些？<div>、<p>、<h1>、<h2>、<pre>等
（2）行内元素
行内元素，不会单独占一行。
行内元素的宽度，主要是根据内容决定。
多个行内元素，会排在同一行。
行内元素有哪些？<font>、<b>、<i>、<u>、<sub>、<sup>等
结论：在标记嵌套时，一般是块元素中嵌套行内元素。

#HTML项目符号（无序列表）
<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>
<ul>或<li>的常用属性
type：项目符号的类型，取值：disc(小黑点)、circle(空心圆)、square(实心方块)
注意：在HTML标记中，内容应该放在最底层标记中。
注意：<ul>和<li>是块元素。

#HTML编号列表（有序列表）
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>
<ol>或<li>的常用属性
type：编号类型，取值：1、a、A、i、I
start：从第几个开始编号(数字)。

#图片标记：行内元素，单边标记
语法格式：<img  属性 = “值”>
常用属性：Width：图片宽度。Height：图片高度。Border：图片边框粗细。Src：图片的路径(相对路径)。Align：图片的水平对齐方式，取值：left、center、right。Hspace：图片与左右文字之间的距离(水平距离)。Vspace：图片与上下文字之间的距离(垂直距离)。
注意事项：如果图片想等比例缩放，只需要指定width或height其中一个。Align属性只能让文本居中，不能让图片单独居中。Align可以实现“图文混排”效果。align = “left | right”。要想让图片实现居中效果，可以给图片增加一个<div>元素

Jxufe渣渣斯

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发 HTML常用标签

参考链接：1）HTML常用标签及其属性https://www.cnblogs.com/dear_diary/p/6510393.html2）https://www.w3school.com.cn#基本<html>…</html> 定义 HTML 文档<head>…</head> 文档的信息<meta> ...
复制链接

扫一扫

专栏目录