HTML 标签和属性

一些标签

单双标签

  1. 双标签。双标签指标签是成对出现的,也就是有一个开始标签和一个结束标签,开始标签用 <标签名> 表示,结束标签用 </标签名> 表示,只有一对标签一起使用才能表示一个具体的含义。例如 <html></html> 表示一个 HTML 文档。

  2. 单标签。单标签指标签不是成对出现的,也就是只用一个标签就能表示一个具体的含义,例如 <br> 表示换行、<hr> 表示创建一条水平线。为了符合 W3C 规范,单标签必须在标签后面加一个斜杠,即 <br/><hr/>,所以单标签通用格式为 <标签名/>

段落标签

<p>        </p>

换行标签

<br/> 

水平横线

<hr /> 

标题标签

<h1 align="center"></h1>

h1-h6

文本样式标签

<font 属性="属性值">        </font> 

属性:face字体 size大小 color颜色等

<font face="宋体">        </font> 

 文本格式化标签

粗体 <strong></strong> 或 <b></b>

文字下画线 <ins></ins> 或 <u></u>

文字斜体 <em></em> 或 <i></i>

文字删除线 <del></del> 或 <s></s>

图像标签

<img src="图像路径"/>

alt 图像不能显示时显示文本

title 鼠标悬停图片显示文本 

HTML注释

 <!-- 在此处写注释 -->

特殊符号

HTML 原代码显示结果描述
&lt;<小于号或显示标记
&gt;>大于号或显示标记
&amp;&可用于显示其它特殊字符
&quot;引号
&reg;®已注册
&copy;©版权
&trade;商标
&ensp;半个空白位
&emsp;一个空白位
&nbsp;不断行的空白

 HTML基本结构

<html>
    包含<head>、<body>等其他标签
</html>
<head>
  头部标签元素
</head>
<body>
  主体内容
</body>

常用的头部标签:

标 签描 述
<title>定义页面标题内容(唯一必须的头部标签)。
<base>当前文档的基准地址,其他相对地址都建立在此基准地址之上。
<meta>有关文档本身的元信息,例如文档的作者,用于查询的关键词,关于文档的描述等。
<style>定义 CSS 层叠样式表的内容。
<link>定义外部文件的链接,最常见的用途是链接外部样式表。
<script>定义页面中程序脚本的内容。

设定关键字、描述和字符集

Keywords 表示关键字定义,content 属性值表示关键字内容,关键字之间要用逗号分隔。

<meta name="Keywords" content="value" />

 Description 表示描述定义,content 属性值表示描述内容

<meta name="Description" content="value" />

 在中国大陆地区,常用的编码是 GB 码,表示简体中文,字符集应设置为 gb2312 ;中国台湾地区常用的编码是 BIG5 码,表示繁体中文;欧洲地区常用 ISO8859-1 表示英文……

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

 HTML5 字符集设置简化写法

<meta charset="UTF-8" />

 HTML 块级标签

大多数 HTML 元素被定义为块级元素或内联元素,“块级元素”译为 block level element,“内联元素”译为 inline element。两种元素都有各自的特点。其中块级标签的特点为:

总是以新行开始;

高度、行高、外边距和内边距都可以控制;

宽度缺省是它所在容器的 100%,除非设定一个宽度;

可以容纳行内元素和其他块元素。  

<div>其他标签或文档</div>
<p>段落内容</p>

对于段落标签,有一个可选的属性 align,用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值,每个可取值的含义如表所示:

描 述
left段落左对齐
right段落右对齐
center段落居中对齐
justify对行进行伸展,每行都可以有相等的长度
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>学习前端哪里好?</p>
    <p style="width: 200px; background-color: darkgray" align="center">
      蓝桥软件学院
    </p>
  </body>
</html>

 

 有序列表

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  …
</ol>

对于 <ol> 标签有两个可选的属性,下表列出了每个属性、可取值和简单描述。

属 性可 取 值描 述
typeA、a、I、i、1规定列表的类型,默认为数字
startstart_number规定列表中的起始点,默认为 1
<ol type="A" start="3">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ol>

 无序列表

在 HTML 文档中,所谓无序列表,是指以实心圆 ●(默认)、空心圆 ○、实心方块 ■ 开头的,没有顺序的列表项目。

在无序列表中,各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现,每个列表项也是由 <li> 标签定义的。

        无序列表与有序列表非常类似,不同点在于因为无序列表是无序的,所以不存在 start 这个规定列表起始点的属性。  

        无序列表的 type 属性可以设置为 disc、circle、square,其中 disc 代表实心圆 ●(默认),circle 代表空心圆 ○、square 代表实心方块 ■。 

<ul type="disc">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ul>

 定义列表

<dl>
  <dt>列表项</dt>
  <dd>列表描述</dd>
</dl>

HTML 行内标签

超链接

<a href="连接地址或文本">文本或者图片</a>

<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作:

值    描述
_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self浏览器在当前窗口载入目标文档。
_parent浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中,那么它与 _self 等效。
_top浏览器在最顶端的框架窗体载入目标文档。

文档书签

当一个页面内容特别多时,可以通过给页面建立书签的方式,对同一页面里的内容进行链接。这样用户在浏览网页时,可以通过书签进行页面内的内容跳转,提高浏览者的用户体验效果。

<a name="书签名称">文字</a>

定义了书签后,链接到该书签的超链接的基本语法为:

<a href="#书签名称">链接点</a>

下面通过一个案例,演示使用超链接跳转至本文档的另一个位置,即当用户单击“查看本文档第三部分”这个内部链接时,即可链接到本页面的第三部分位置

<body>
  <p><a href="#d3">查看本文档第三部分</a></p>
  <h2>第一部分</h2>
  <p>这是第一部分的内容!</p>
  <h2>第二部分</h2>
  <p>这是第二部分的内容!</p>
  <h2><a name="d3">第三部分</a></h2>
  <p>这是第三部分的内容</p>
  <h2>第四部分</h2>
  <p>这是第四部分的内容!</p>
  <h2>第五部分</h2>
  <p>这是第五部分的内容!</p>
  <h2>第六部分</h2>
  <p>这是第六部分的内容!</p>
  <h2>第七部分</h2>
  <p>这是第七部分的内容!</p>
  <h2>第八部分</h2>
  <p>这是第八部分的内容!</p>
  <h2>第九部分</h2>
  <p>这是第九部分的内容!</p>
  <h2>第十部分</h2>
  <p>这是第十部分的内容!</p>
</body>

<span> 标签

<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为:<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<span>选中的文本</span>

 短语标签

标签描述
<em>呈现为被强调的文本。
<strong>用来定义重要的文本。
<dfn>定义一个定义项目。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/4100.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于线程池你了解些什么?

前言学习线程池的思维导图线程池是什么?它有什么用?虽然线程比进程更轻量级,但是每个进程所占的资源空间是有限,如果我们频繁创建和销毁线程也会消耗很多CPU资源,那么我们该如何解决这个问题呢?官方解释:线程池是一种多线程处理形式,其处理过程可以将多个任务添加到阻塞队列…

电子招标采购系统:营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展

营造全面规范安全的电子招投标环境&#xff0c;促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标…

Google巨大漏洞让Win10、11翻车,小姐姐马赛克白打了

早年间电脑截图这项技能未被大多数人掌握时&#xff0c;许多人应该都使用过手机拍屏幕这个原始的方式。 但由于较低的画面质量极其影响其他用户的观感&#xff0c;常常受到大家的调侃。 但到了 Win10、11 &#xff0c;预装的截图工具让门槛大幅降低。 WinShiftS 就能快速打开…

专业护眼灯什么牌子好?分享最专业护眼灯品牌排行

在日常生活中&#xff0c;照明灯具为人们提供了很多便利&#xff0c;但是对于长时间在灯光下用眼的学生跟办公族来说&#xff0c;容易导致用眼疲劳&#xff0c;甚至头晕等现象&#xff0c;所以现在普遍许多家庭都必备有护眼灯&#xff0c;能对眼睛起到缓解疲劳的作用&#xff0…

Docker安装Mysql集群(主从复制)

Docker安装Mysql集群(主从复制) 配置阿里云镜像 sudo vim /etc/docker/daemon.json插入如下镜像 {"registry-mirrors": ["https://sdiz8d27.mirror.aliyuncs.com"] }重启docker sudo systemctl daemon-reloadsudo systemctl restart docker保证images有…

python

好处 相对其他编程语言 比较简洁丰富的第三方库【做爬虫、机器学习、深度学习】 numpypandasmatplotlit用处 数据分析web开发游戏开发AI【比较广泛】安装部署python环境 1.官网下载python安装包【原生部署】 官网&#xff1a;python.org2.安装anaconda 1.自带python环境2.有丰富…

Mybatis-Plus进阶使用

一、逻辑删除 曾经我们写的删除代码都是物理删除。 逻辑删除&#xff1a;删除转变为更新 update user set deleted1 where id 1 and deleted0 查找: 追加 where 条件过滤掉已删除数据,如果使用 wrapper.entity 生成的 where 条件也会自动追加该字段 查找: select id,name,dele…

JConsole使用教程

JConsole是一个Java虚拟机的监控和管理工具&#xff0c;可以监控Java应用程序的内存使用、线程和类信息等。 以下是JConsole的使用教程&#xff1a; 1.启动JConsole JConsole是一个Java自带的工具&#xff0c;可以在bin目录下找到jconsole.exe文件。双击运行该文件即可启动JC…

正则表达式-元字符

文章目录一、正则表达式-元字符总结一、正则表达式-元字符 正则表达式 - 元字符 下表包含了元字符的完整列表以及它们在正则表达式上下文中的行为&#xff1a; 字符描述\将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如&#xf…

强人工智能时代,区块链还有戏吗?

最近很多人都在问我&#xff0c;ChatGPT 把 AI 又带火了&#xff0c;区块链和 Web3 被抢了风头&#xff0c;以后还有戏吗&#xff1f;还有比较了解我的朋友问&#xff0c;当年你放弃 AI 而选择区块链&#xff0c;有没有后悔&#xff1f;这里有一个小背景。2017 年初我离开 IBM …

银行数字化转型导师坚鹏:如何制定银行数字化转型年度培训规划

如何制定银行数字化转型年度培训规划 ——以推动银行数字化转型战略落地为核心&#xff0c;实现知行果合一课程背景&#xff1a; 很多银行都在开展银行数字化转型培训工作&#xff0c;目前存在以下问题急需解决&#xff1a; 缺少针对性的银行数字化转型年度培训规划 不清楚如…

Spring --- 声明式事务

一、JdbcTemplate 1.1、简介 Spring 框架对 JDBC 进行封装&#xff0c;使用 JdbcTemplate 方便实现对数据库操作 1.2、准备工作 ① 加入依赖 <dependencies><!-- 基于Maven依赖传递性&#xff0c;导入spring-context依赖即可导入当前所需所有jar包 --><depen…

openAi ChatGPT调用性能优化的一些小妙招

参考的demo:GitHub - ddiu8081/chatgpt-demo: A demo repo based on OpenAI API. 扭曲调教&#xff1a; openai提供的chat接口&#xff08;https://api.openai.com/v1/chat/completions&#xff09;由于其模型很大&#xff08;什么1750亿个参数啥的&#xff09;&#xff0c;单…

Redis之底层数据结构

一 Redis数据结构 Redis底层数据结构有三层意思&#xff1a; 从Redis本身数据存储的结构层面来看&#xff0c;Redis数据结构是一个HashMap。从使用者角度来看&#xff0c;Redis的数据结构是String&#xff0c;List&#xff0c;Hash&#xff0c;Set&#xff0c;Sorted Set。从…

Docker 镜像使用

目录 1、列出镜像列表 2、获取一个新的镜像 3、查找镜像 4、拖取镜像 5、删除镜像 6、创建镜像 a.更新镜像 b.构建镜像 设置镜像标签 当运行容器时&#xff0c;使用的镜像如果在本地中不存在&#xff0c;docker 就会自动从 docker 镜像仓库中下载&#xff0c;默认是从 …

现在大专生转IT可行吗?

当然可行的。 大专也是人&#xff0c;为什么不可以选择喜欢的专业学习&#xff0c;现在大学生遍地都是&#xff0c;学历已经不是限制你发展的因素了。有的人就是不擅长理论学习&#xff0c;更喜欢技术。IT也只是一个普普通通的技术行业&#xff0c;跟其他技术行业一样&#xf…

wsl=

安装wsl wsl --install,用户名wu,密码 123456&#xff0c; https://learn.microsoft.com/en-us/windows/wsl/install 安装anaconda, 把anaconda移动到wu目录下&#xff0c;在wu用户以及用户目录下执行bash Anaconda-文件名&#xff0c;安装目录为/home/wu/anaconda3 配置cond…

C#方法详解

总目录 文章目录总目录前言一、方法概述1、方法签名2、调用/访问方法/方法形参与实参二、扩展方法1.实现扩展方法2、扩展方法调用3、优先级问题4、其他扩展方法示例1.获得枚举的Description2.其他常用扩展方法三、方法参数列表详解1、可选自变量&#xff08;可选参数&#xff0…

深入剖析 MVC 模式与三层架构

文章目录1. 前言2. MVC模式3. 三层架构4. MVC和三层架构5. 总结5.1 IDEA 小技巧1. 前言 前面我们探讨了 JSP 的使用&#xff0c;随着计算机技术的不断更新迭代&#xff0c;JSP 的技术由于存在很多的缺点&#xff0c;已经逐渐退出了历史的舞台&#xff0c;所以在学习时&#xf…

Google代码覆盖率最佳实践

软件质量保障: 所寫即所思&#xff5c;一个阿里质量人对测试的所感所悟。谷歌一直倡导的领域之一是使用代码覆盖率数据评估风险并识别测试中的真空。然而&#xff0c;代码覆盖率的价值一直是个争议的话题。每次聊到代码覆盖率时&#xff0c;似乎都会引发无尽的争论。由于大家固…
最新文章