后端程序员前端之路03--HTML语义化

目录

  • 什么是HTML语义化?
  • 为什么要语义化
  • 常用标签的语义

一、什么是HTML语义化?

简单来讲就是:每个标签做自己的事,使得能够被机器直接读懂。

二、为什么要语义化?

1、更容易被搜索引擎收录。

2、方便其他类型设备解析(如:屏幕阅读器等)

3、便于团队开发和维护。

三、常用标签的语义

标签 含义 备注
<title> 网页标题 用于告诉用户和搜索引擎,这个网页的主要内容是什么。搜索引擎可以通过网页标题,迅速判断出网页的主题。
<p> 文章的段落 默认样式中,段前段后都会有空白。
<h1>~<h6> 文章的标题 h1最重要,通常用在网站的名称上。这些标签都会使字体变粗变大,不能单纯的为了实现这个效果而乱用h标签。
<em> / <strong> 强调文章中某些文字 这两个标签都是用来表示强调,不过<strong>更强烈些。<em>会显示斜体效果,<strong>会显示加粗效果。
<span> 没有语义 它的作用是为了设置单独的样式。
<q> 引用别人的较短内容 如果需要在文章中引用他人的语句,用这个标签。浏览器默认会对q标签自动添加双引号。适用于较短的内容。
<blockquote> 引用别人的大段内容 也是引用别人的内容,和<q>标签不同的是,这个适用于引用大段内容的情况。
<br /> 换行 在html中,是忽略回车和换行的。
<hr /> 水平横线 用于分割不同的段落。
<address> 网站的联系地址信息 默认样式显示为斜体。
<code> 单行代码  
<pre> 预格式化的文本 pre标签中的内容会保留回车和换行。通常用来显示多行代码。
<ul><li> 列表 不含前后顺序的列表。
<ol><li> 有序列表 有序列表
<div> 容器 用来为网页划分独立的区域。可以搭配id、class属性,使html结构更清晰。
<table> 表格
用来在网页中展现一些数据。包含元素有:tbody、tr、th、td

<tbody>:  当表格内容很多时,表格会下载一点显示一点;如果加上tbody,只有等表格全部下载完后,才会显示。

<tr>:表格的一行

<th>: 表格的表头,默认为粗体,并且居中显示。

<td>:表格的一个单元格

<caption> 表格的摘要信息 摘要信息是不会显示在浏览器中的。它的作用是增加表格可读性,使搜索引擎更好的读懂表格内容。
<a> 超链接  
<img> 图片
几个主要的属性:src、alt、title

src:标识图像的位置

alt:当图片下载失败时,替代的文字

title:鼠标滑过图片时显示的文字

时间: 2024-10-14 20:43:37

后端程序员前端之路03--HTML语义化的相关文章

【系列】后端程序员前端之路(2016/3/24更新)

后端程序员前端之路01 后端程序员前端之路02--CSS选择器详解 后端程序员前端之路03--HTML语义化 后端程序员前端之路04--html元素分类 后端程序员前端之路05--盒子模型详解 后端程序员前端之路06--布局模型,颜色值,长度值 --不断更新中,如果有帮助到你,请点“推荐”.你的支持,是我坚持的动力O(∩_∩)O谢谢~

后端程序员前端之路04--html元素分类

目录 块级元素 内联元素 内联块级元素  总结 一.块级元素(block) 定义:默认情况下,独占一行的元素就是块级元素. 特点: 每个块级元素都从新的一行开始,并且其后的元素也另起一行.(真霸道,一个块级元素独占一行) 元素的高度.宽度.行高以及顶和底边距都可设置 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致). 常见的块级元素:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl&

后端程序员前端之路04--盒子模型详解

目录 图解 盒模型尺寸基准 使用浏览器的开发者工具,查看元素高(宽)度时,遇到的问题 一.图解 说明:由内而外依次是content.padding(内边距).border(边框).margin(外边距). 举个例子:一个快递车里放了许多快递包裹(盒子包装的),每个包裹里面又放了不同的东西. content:真正容纳其他东西的区域.比如快递车的content,就是那些包裹所处的那个空间: 而每个包裹的content,就是那些东西所处的空间.                     content里

黑马程序员前端培训:用好课程打造高薪学员

黑马程序员前端培训:用好课程打造高薪学员   前端开发无疑是互联网行业的新贵.目前,前端开发工程师的薪资在8000-25000之间.黑马程序员顺应市场需求,推出前端与移动开发课程,致力于培养既懂前端又懂后端,既能开发网页端,也能开发移动端的Web全栈开发工程师. 作为IT教育的老牌机构,黑马程序员深知好的课程体系是教学的根本.只有优质的课程,才能打造出拿高薪的学员! 黑马程序员前端课程由资深课程研发团队,历时三年精心打造打磨而成,课程体系贯穿全栈工程师所需具备的综合技术能力. 黑马程序员前端课程

后端程序员都做些什么?

后端程序员都做些什么? 2017-12-25 刘欣 程序猿 来自:码农翻身(微信号:coderising) 这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库,用JSP生成HTML,然后发送给浏览器. 即使后来Javascript在浏览器中添加了一些AJAX的效果,那也是锦上添花,绝对不敢造次.因为页面的HTML主要还是用所谓"套模板"的方

《菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师》

<菜鸟程序员成长之路:从技术小白到阿里巴巴Java工程师> 国庆节快乐!一年一度长度排第二的假期终于来了. 难得有十一长假,作者也想要休息几天啦. 不管你是选择出门玩,还是在公司加班,在学校复习,都希望你过好这个长假. 没有出去玩的也不用羡慕别人,利用这段时间充充电,不比去旅游看人头要好的多吗? 最近终于把我的原创文章整理成一本电子书了,趁着国庆开始之前发布出来,希望对你有所帮助. 这本电子书整理了我过去一年时间里在微信公众号[黄小斜]里创作的文章,包括Java学习.求职面试.成长心得.感悟思

我愿在程序员这条路越走越远

今天偶尔和朋友谈起,他对于我选择IT表示很是惊讶,因为IT和我以前学的专业完全不对口.他还说程序猿应该都是比较闷骚的人,本想反驳一句,但想想应该说的没差.因为我的第一感觉也是这样的. 大概是对于新鲜事物的求知欲,刚刚接触就被这神奇的一门语言所吸引.输入一些字符串就能产生各种指令,真是太新鲜了. 以前作为使用者,对这些方便人类.促使人类进步的科技,总是爱不释手,手机.电脑.游戏,我们能从中体会到快乐,这些都是靠那些开发者.每一样东西的创造都是不易的,看似简单的东西,也许就是别人一辈子的心血.程序猿

程序员修炼之路

0.前言:在路上,再上路 在前言<程序员修炼之路-(0)前言:在路上, 再上路>中已经对知识体系进行了梳理,主要分为问题定义.算法与数据结构.系统平台API.编程语言实现.代码设计.测试验证等等.目前集中精力编写算法与数据结构部分,这可能也是最艰难的一部分.其他部分之前零零散散有所涉及,之后再慢慢补充. 1.计算机数学 离散数学与具体数学. 2.算法分析设计 对于这一部分的内容编排,主要以<算法设计与分析基础>.<算法>以及LeetCode算法题中的问题分类为横向,以&

写给后端程序员的HTTP缓存原理介绍

通过Internet获取资源既缓慢,成本又高.为此,Http协议里包含了控制缓存的部分,以使Http客户端可以缓存和重用以前获取的资源,从而优化性能,提升体验.虽然Http中关于缓存控制的部分,随着协议演进,有一些变化.但我觉着,作为后端程序员,在开发Web服务时,只需要关注请求头If-None-Match.响应头ETag.响应头Cache-Control就足够了.因为这三个Http头就可以满足你的需求,并且,当今绝大多数的浏览器,都支持这三个Http头.我们所要做的就是,确保每个服务器响应都提