HTML基础标签

命运对每个人都是一样的,不一样的是各自的努力和付出不同,付出的越多,努力的越多,得到的回报也越多,在你累的时候请看一下身边比你成功却还比你更努力的人,这样,你就会更有动力。

导读:本篇文章讲解 HTML基础标签,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

网页是信息的一种载体
信息:文字、图片、视频、音频、动画

HTML文件结构

网页遵守W3C规范
文档版本docType HTML5

强调声明 DOCTYPE 文档类型 是html
告诉浏览器我是一个H5标准的文档

书写格式

1、编程当中所有符号都要使用英文半角符号
2、单双引号都可以,但要保持一致
3、缩进 2空格

标签

<html>
  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="美食,菜谱">
    <meta name="description" content="描述信息">
    <title>标题</title>
    <base target="_blank">
    <body>
      
    </body>
  </head>
</html>

文件编码和文档编码不统一会导致乱码
html的lang属性是指内容语言的,目的的让浏览器知晓这个页面的主要展示语言,英语–en,中文-zh-cn

打开浏览器自动翻译的属性

meta标签:设置网页信息,比如charset设置网页编码;keywords设置搜索关键词,用户可以在搜索引擎中搜索到;description设置网页的描述信息。
网页三要素:让搜索引擎能够收录网页

<meta name="keywords" content="美食,菜谱">
<meta name="description" content="描述信息">
<title>标题</title>
<body>标签:展示网页主体内容、
h1-h6标题标签:一个网页只能有一个h1标签
 h1:每个网页有且只有一个H1标签
 h2:网页的分块标题,2~5个
 h3:主页详细分块内容的标题,个数根据需求来
 h4:非主页下的列表内容标题 相对h3的权重更低一点

<hr>分隔线标签
<br> 换行标签,单标签,不建议使用
<p>段落标签

搜索引擎怎么让自己的网页排在前面?
1、花钱打广告
2、SEO,通过优化代码和内容,提升代码的语义性

1)网站三要素
2)网页内容是否符合W3C规范,内容的质量,一个网页有且只有一个h1标签
语义化标签:有专门的指代性的名词,比如

超链接标签

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="#target" target="_blank">id名称跳转</a>
<a href="index.html" target="_blank">同级页面跳转</a>
<a href="../test.html" target="_blank">上级</a>
<a href="../case/hello.html" target="_blank">上级文件夹路径</a>
<a href="D:\workspace\VSCode\index.html" target="_blank">上级</a>

href:跳转目标地址
target:打开网页的位置,当前页面(_self)或者新开页面(_blank)
base标签统一修改超链接的打开方式

<base target="_blank">

转义标签:让浏览器能够理解 非排版意图 的格式和行为 HTML容许使用特殊字符进行转义行为
在这里插入图片描述
文本格式化标签:在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
image.png
b i s u 只有表现形式,没有语义性
strong em del ins 的语义更强烈

图片标签img:

<img src='img/s.jpg' width='533' height='300' alt='夏天'>

图片四要素 src width height alt
alt除了作为图片无法展示的时候的文本替代,也作为爬虫辨识图片的关键字。
图片的width和height不要加单位

div标签:盒子
span标签:用来包裹文档,一般包裹小短语,单独设置样式

列表

无序列表
<ul>
  <li>西红柿</li>
  <li>黄瓜</li>
  <li>茄子</li>
</ul>
有序列表
<ol>
  <li>西红柿</li>
  <li>黄瓜</li>
  <li>茄子</li>
</ol>
自定义列表dl>dt+dd
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>

注释

<!--注释的内容 -->

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/143796.html

(0)

相关推荐

  • 02 Springboot整合redis

    导读:本篇文章讲解 02 Springboot整合redis,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    后端开发 2022年5月15日
    00
  • liunx集成jmeter进行压测实践

    生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

    导读:本篇文章讲解 liunx集成jmeter进行压测实践,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    后端开发 2023年4月23日
    00
  • 深入理解分布式事务

    导读:本篇文章讲解 深入理解分布式事务,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    后端开发 2022年5月19日
    00
  • 大数据建模分析–举哥

    生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

    导读:本篇文章讲解 大数据建模分析–举哥,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    后端开发 2023年4月23日
    00
  • SDUT 3334 数据结构实验之栈与队列七:出栈序列判定

    导读:本篇文章讲解 SDUT 3334 数据结构实验之栈与队列七:出栈序列判定,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    Python 2023年2月21日
    00
  • 记录常见的几种编码格式由来和java内存中操作的方式

    导读:本篇文章讲解 记录常见的几种编码格式由来和java内存中操作的方式,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    后端开发 2022年5月13日
    00
  • SpringBoot 整合 RabbitMQ 实现消息可靠传输

    导读:本篇文章讲解 SpringBoot 整合 RabbitMQ 实现消息可靠传输,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    2022年5月25日
    00
  • Ubuntu20.4安装及配置mysql详细教程

    在人生的道路上,不管是潇洒走一回,或者是千山独行,皆须是自己想走的路,虽然,有的人并不是很快就能找到自己的方向和道路,不过,只要坚持到底,我相信,就一定可以找到自己的路,只要找到路,就不必怕路途遥远了。

    导读:本篇文章讲解 Ubuntu20.4安装及配置mysql详细教程,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

    Python 2023年3月5日
    00
  • 3W字干货深入分析基于Micrometer和Prometheus实现度量和监控的方案

    前提 最近线上的项目使用了spring-actuator做度量统计收集,使用Prometheus进行数据收集,Grafana进行数据展示,用于监控生成环境机器的性能指标和业务数据指…

    2022年10月6日
    00
  • typora主题色配置

    导读:本篇文章讲解 typora主题色配置,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

    后端开发 2022年5月29日
    00

发表回复

登录后才能评论