理解语义HTML标签

时间：2023-04-02 17:07:38 HTML

是有语义的，这样您的网页可以更好地被搜索引擎理解。语义带来的好处：1、更容易被搜索引擎收录。2.让屏幕阅读器更容易读出网页内容。学习html标签主要关注两个方面的学习：标签的用途（即语义），以及标签在浏览器中的默认样式。标签名称标签用途是浏览器中的默认样式

段落前后会有一个竖排空格短文本引号浏览器会自动给标签加上双引号

长文本引号缩进样式表示强调以斜体显示更强的强调以粗体显示没有语义，设置单独的样式usesnostyleaddspacetodisplayspaceandlinebreaks相当于Word中的回车添加水平分隔符分隔行上下两段
添加email、address、signature信息以斜体显示添加单行代码减少英文字体添加一大段代码显示预格式化的文本，保留代码中的空格和换行符无序列表每行前有一个点有序列表每行前有一个序号li，默认从1开始节容器无样式默认显示不带表格行的表格给表格添加标题和摘要并显示在表格上方，显示宽度与tablewidth实现超链接默认蓝色，点击紫色添加图片到网页，等比例显示图片表单标签本身与用户交互文本输入多行文本input<select>下拉列表框<label>与表单控件关联需要注意：<a>labeltarget属性指定打开位置target="_blank"的链接页面将在新的浏览器窗口中打开。另外，mailto可以用来链接网页中的邮箱地址：<ahref="mailto:yy@qq.com?cc=xx&bcc=&subject="/>点击链接会打开邮箱应用，自动填写收件人等信息。<input>标签支持各种类型的文本输入，也支持单选按钮、复选框、提交、重置按钮：<inputtype="radio/checkbox"value="value"name="name"/><inputtype="submit/reset"value="submit/reset"/>CSS样式内联：写在HTML标签的style属性中。嵌入：写在<styletype="text/css"></style>标签之间，一般嵌入的css样式写在<head></head>之间。外部样式：写在单独的外部文件中，使用<link>标签导入。<link>标签的位置一般写在<head>标签内。3CSS样式优先级（同等权重下）：Inline>Embedded>External但是embedded>external有一个前提：embeddedcss的位置必须在external之后。CSS选择器权重（内联样式没有选择器，优先级高于所有选择器）：选择器权重labelselector1typeselector10IDselector100attributewith!important插入属性后优先级最高。选择器的常见区分：CSS中的后代选择器（.firstspan{}）作用于所有子元素，而子选择器（.first>span{}）只作用于下一级子元素。CSS属性继承：CSS的每个属性都可以指定一个“inherit”的值，取与父元素相应属性的计算值相同的值。常见继承的例子：color、font、line-height会被继承，border、margin、padding、position、display...不会被继承。CSS继承样式，继承的权重也很低。有文献表明只有0.1，可以理解为继承的权重最低。CSS格式化排版：font:font-family:"MicrosoftYahei";相当于font-family:"MicrosoftYahei"，如果用户本地没有安装你设置的字体，会显示浏览器的默认字体。斜体：font-style:italic;下划线删除线：文本装饰：下划线；缩进：文本缩进：2em；//将缩进文本行高的大小加倍：line-height:1.5em;//行间距是文字间距的1.5倍：word-spacing:50px;字间距：字母间距：50px；（块元素）内部对齐：text-align:center;CSS盒模型：必备知识：在css中，在html中HTML中的标签元素大致分为三种不同的类型：块元素、内联元素（也叫内联元素）、inline-block元素。常见的块元素有：<div>,<p>,<h1>...<h6>,<ul>,<ol>,<dl>,<table>,<address>,<blockquote>,<常见的form>的内联元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>常见的内联块元素有：<img>、<input>元素类型。浏览器中的默认样式。块级元素。可以设置宽高、行高、边距值等。内联元素和其他元素都在一行上，宽高和垂直边距不可设置。元素的宽度是它包含的文本或图像的宽度，不能更改。行内块元素和其他元素都在一行上。可以设置宽高、行高、边距值等。（同时具有内联元素和块元素的特点）CSS布局模型：css布局模型布局特点流模型（Flow）网页默认的布局模式。两个典型特征：1.块元素在包含元素内从上到下垂直分布2.内联元素在包含元素内从左到右水平分布。浮点型（Float）块元素这么霸道，独占一行，想并排显示两个块元素怎么办？别担心，将元素设置为浮动就可以实现这个愿望。图层模型（Layer）图层布局模型，就像PS中的图层编辑功能一样，可以精确定位每个图层进行操作。层模型有三种形式：1.绝对定位（position:absolute）2.相对定位（position:relative）3.固定定位（position:fixed）Relative和Absolute结合使用：父元素设置相对定位，而子元素使用绝对定位，让元素实现相对定位，同时脱离文档流，不占空间。CSSlengthunit：CSS长度单位总结一下，目前比较常用的有px（像素）、em、%。需要说明的是，这三个单位是相对单位。像素：像素是显示器上的小点（例如，CSS规范假定90像素=1英寸）。目前，大多数设计师倾向于使用像素作为单位。em：em代表元素本身的font-size属性的计算值。如果元素的font-size是14px，那么元素的width:2em就是28px。注意一种特殊情况。当设置font-size的单位为em时，计算标准以父元素的font-size为准。百分比：水平和垂直边相对于父元素的宽度和高度的百分比。注意一个特殊情况，line-height:130%，它将行高设置为字体的130%。用户浏览器的默认呈现文本大小为“16px”。也就是说，网页中“body”的默认渲染文字大小在用户浏览器中是“16px”。CSS样式设置水平居中：1、当水平居中元素为文本或图片等内联元素时，可以通过设置text-align:center来实现；对于父元素。2、当水平居中的元素为块元素时，有两种情况：（1）定宽块元素：通过设置左右边距值为auto来实现。(2)变宽块级元素：方法一：通过设置text-align:center，将块级元素的显示改为行内类型；对于父元素。方法二：在变宽块元素中添加一个wrappeddiv，设置wrappeddiv的样式float:left;位置：相对；左：50%；设置可变宽度块元素位置的样式：相对；左：-50%；（原理：包裹div浮动后向左偏移50%，左边框在容器中间，不定块的宽度等于包裹div的宽度，左偏移为自身宽度的50%-50%，相对于容器水平居中）CSS样式设置垂直居中：1.由父元素高度决定的单行文本垂直居中，通过设置来实现父元素的高度与行高相同。行高（line-height）：指文本中行与行之间的基线距离。line-height和font-size的计算值之差被分成两半分别加到一个文本行内容的顶部和底部。Baseline（基线）：不是汉字的底边，而是英文字母“x”的底边。2、高度由父元素决定的多行文本垂直居中常用的方式有两种：(1)将垂直居中的内容包裹在表格单元中。<table><tbody><tr><tdstyle="height:500px;"><div><p>文本垂直居中</p></div></td></tr></tbody></table>在css中有一个垂直居中的属性vertical-align。当父元素设置此样式时，它将对inline-block类型的子元素有用。td标签默认将vertical-align设置为middle。另外，当元素的position:absolute;或浮动：左/右；设置属性后，元素的显示属性将自动更改为显示：内联块；。(2)设置父元素的display:table-cell（设置为以table为单位显示），激活vertical-align属性。<divstyle="display:table-cell;"><div><p>一行文字</p><p>两行文字</p></div<</div>不兼容IE6和7。</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="美团一边冷，怒刷3000面试题逆袭字节，泪流满面分享面经" href="/webqianduan/230725.html">美团一边冷，怒刷3000面试题逆袭字节，泪流满面分享面经</a> </div> <div class="prev">下一篇：<a title="Web前端-CSS入门教程（超详细的CSS使用讲解，适合前端初学者）" href="/webqianduan/230727.html">Web前端-CSS入门教程（超详细的CSS使用讲解，适合前端初学者）</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>理解语义HTML标签相关文章</code></div> <ul> <li><a href="/jishutupo/318312.html" target="_blank" title="AI阅读理解系统 - 问题和进步">AI阅读理解系统 - 问题和进步</a></li> <li><a href="/jishuluodi/317308.html" target="_blank" title="谁能理解双11的各种所谓福利？这个怎么样？ ">谁能理解双11的各种所谓福利？这个怎么样？ </a></li> <li><a href="/jishuluodi/315293.html" target="_blank" title="什么是新零售？很好理解">什么是新零售？很好理解</a></li> <li><a href="/jishuluodi/314872.html" target="_blank" title="当你真诚地推荐某样东西时，如何才能让人们感到真实、值得信赖，">当你真诚地推荐某样东西时，如何才能让人们感到真实、值得信赖，</a></li> <li><a href="/kejidiedai/301893.html" target="_blank" title="什么是api（如何通俗地理解API -） ">什么是api（如何通俗地理解API -） </a></li> <li><a href="/shumafazhan/295017.html" target="_blank" title="华为河图地图曝光，支持AI强环境理解， P40系列有望上市">华为河图地图曝光，支持AI强环境理解， P40系列有望上市</a></li> <li><a href="/shumafazhan/294226.html" target="_blank" title="苹果正在研究如何改进 Siri，使其能够更好地理解口吃用户的">苹果正在研究如何改进 Siri，使其能够更好地理解口吃用户的</a></li> <li><a href="/shujuyingyong/288529.html" target="_blank" title="深入理解HBase的数据存储和访问机制">深入理解HBase的数据存储和访问机制</a></li> <li><a href="/shujuyingyong/288383.html" target="_blank" title="如何理解和使用HBase的架构和数据模型">如何理解和使用HBase的架构和数据模型</a></li> <li><a href="/shujuyingyong/286863.html" target="_blank" title="深入理解MongoDB复制集的工作机制和优势">深入理解MongoDB复制集的工作机制和优势</a></li> <li><a href="/shujuyingyong/286404.html" target="_blank" title="MongoDB存储原理解析：如何实现高性能和高可用性">MongoDB存储原理解析：如何实现高性能和高可用性</a></li> <li><a href="/shujuyingyong/286158.html" target="_blank" title="深入理解Redis的数据结构和内部实现">深入理解Redis的数据结构和内部实现</a></li> <li><a href="/shujuyingyong/286076.html" target="_blank" title="如何理解和使用Redis的读取流程">如何理解和使用Redis的读取流程</a></li> <li><a href="/shujuyingyong/286071.html" target="_blank" title="Redis的高性能原理解析">Redis的高性能原理解析</a></li> <li><a href="/shujuyingyong/285932.html" target="_blank" title="如何理解和使用Redis集群">如何理解和使用Redis集群</a></li> <li><a href="/shujuyingyong/284753.html" target="_blank" title="Redis存储方式的常见误区和正确理解">Redis存储方式的常见误区和正确理解</a></li> <li><a href="/shujuyingyong/284582.html" target="_blank" title="深入理解Redis Scan命令的工作机制和优化策略">深入理解Redis Scan命令的工作机制和优化策略</a></li> <li><a href="/shujuyingyong/284517.html" target="_blank" title="深入理解Redis哨兵机制的工作流程和配置方法">深入理解Redis哨兵机制的工作流程和配置方法</a></li> <li><a href="/shujuyingyong/283771.html" target="_blank" title="深入理解Redis哨兵机制的原理和配置">深入理解Redis哨兵机制的原理和配置</a></li> <li><a href="/shujuyingyong/283626.html" target="_blank" title="Redis底层原理解析：如何实现高性能的内存数据库">Redis底层原理解析：如何实现高性能的内存数据库</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/370344.html" title="让小米汗颜！这款AI芯片可以让家电在不连接互联网的情况下理解" target="_blank">让小米汗颜！这款AI芯片可以让家电在不连接互联网的情况下理解</a></li> <li><em>2</em><a href="/kejifunen/370272.html" title="可穿戴行业的成功方向！准确理解" target="_blank">可穿戴行业的成功方向！准确理解</a></li> <li><em>3</em><a href="/kejifunen/368978.html" title="智能冰箱就靠这五个关键词！你也可以理解冰帝" target="_blank">智能冰箱就靠这五个关键词！你也可以理解冰帝</a></li> <li><em>4</em><a href="/kejifunen/366451.html" title="智能语义助手“偷偷玩”，能真正“听懂”用户的话语" target="_blank">智能语义助手“偷偷玩”，能真正“听懂”用户的话语</a></li> <li><em>5</em><a href="/kejifunen/365123.html" title="亚马逊AWS推出新AI服务！翻译、理解、语音转录文字、实时肖" target="_blank">亚马逊AWS推出新AI服务！翻译、理解、语音转录文字、实时肖</a></li> <li><em>6</em><a href="/kejifunen/361354.html" title="小米被纳入“恒生指数”，但你的理解有误" target="_blank">小米被纳入“恒生指数”，但你的理解有误</a></li> <li><em>7</em><a href="/kejifunen/360927.html" title="换个角度理解，可穿戴行业站在最前沿，随时爆发" target="_blank">换个角度理解，可穿戴行业站在最前沿，随时爆发</a></li> <li><em>8</em><a href="/kejifunen/360613.html" title="展望未来 -机器如何理解世界？奥比中光陈志为你揭秘" target="_blank">展望未来 -机器如何理解世界？奥比中光陈志为你揭秘</a></li> <li><em>9</em><a href="/kejifunen/360553.html" title="百度云推出最懂中文的智能客服，能快速听到、理解并响应客户需求" target="_blank">百度云推出最懂中文的智能客服，能快速听到、理解并响应客户需求</a></li> <li><em>10</em><a href="/kejifunen/360393.html" title="NLPCC 2018，搜狗知音荣获语义理解比赛双料冠军" target="_blank">NLPCC 2018，搜狗知音荣获语义理解比赛双料冠军</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/359017.html" title="我们所理解的物联网到底是什么？ " target="_blank">我们所理解的物联网到底是什么？ </a></li> <li><em>2</em><a href="/kejifunen/358731.html" title="为了更好地理解人类，人工智能正在发展三大技术" target="_blank">为了更好地理解人类，人工智能正在发展三大技术</a></li> <li><em>3</em><a href="/kejifunen/352655.html" title="谷歌开源自然语言理解技术SyntaxNet人工智能将加速" target="_blank">谷歌开源自然语言理解技术SyntaxNet人工智能将加速</a></li> <li><em>4</em><a href="/kejifunen/348746.html" title="我们真的永远无法理解人工智能吗？ " target="_blank">我们真的永远无法理解人工智能吗？ </a></li> <li><em>5</em><a href="/kejifunen/347382.html" title="你把“智能家居”理解为智能家居吗？ " target="_blank">你把“智能家居”理解为智能家居吗？ </a></li> <li><em>6</em><a href="/kejifunen/346601.html" title="专栏 -你知道语义SLAM的重要性吗？ " target="_blank">专栏 -你知道语义SLAM的重要性吗？ </a></li> <li><em>7</em><a href="/kejifunen/345620.html" title="TI 针对可穿戴和物联网应用的最小、功耗最低的电池管理解决方" target="_blank">TI 针对可穿戴和物联网应用的最小、功耗最低的电池管理解决方</a></li> <li><em>8</em><a href="/kejifunen/345498.html" title="让人工智能像孩子一样理解世界，这是正确的未来吗？ " target="_blank">让人工智能像孩子一样理解世界，这是正确的未来吗？ </a></li> <li><em>9</em><a href="/kejifunen/343983.html" title="AI鉴黄师已能识别“黑词” 阿里安全AI语义分析技术再获突破" target="_blank">AI鉴黄师已能识别“黑词” 阿里安全AI语义分析技术再获突破</a></li> <li><em>10</em><a href="/kejifunen/339671.html" title="人类能够理解动物的语言吗？阿里、钉钉愚人节为助理发布智能工作" target="_blank">人类能够理解动物的语言吗？阿里、钉钉愚人节为助理发布智能工作</a></li> <li><em>11</em><a href="/kejifunen/337554.html" title="一个不太好理解的科技项目为何获得数千万美元Pre-A轮融资" target="_blank">一个不太好理解的科技项目为何获得数千万美元Pre-A轮融资</a></li> <li><em>12</em><a href="/kejifunen/335264.html" title="重大升级，限时免费，通义千要求视觉理解模型Qwen-VL达到" target="_blank">重大升级，限时免费，通义千要求视觉理解模型Qwen-VL达到</a></li> <li><em>13</em><a href="/jishuluodi/334250.html" title="新零售理念的本质是什么？如何理解新零售？ " target="_blank">新零售理念的本质是什么？如何理解新零售？ </a></li> <li><em>14</em><a href="/jishuluodi/333751.html" title="历史上有哪些“完全无法理解”的残酷案例？ " target="_blank">历史上有哪些“完全无法理解”的残酷案例？ </a></li> <li><em>15</em><a href="/jishuluodi/332780.html" title="二生，二生三，三生万物，我们应该如何理解呢？ " target="_blank">二生，二生三，三生万物，我们应该如何理解呢？ </a></li> <li><em>16</em><a href="/jishuluodi/332320.html" title="如何理解经济学家名家陈人通教授传授的物流配送商业模式？ " target="_blank">如何理解经济学家名家陈人通教授传授的物流配送商业模式？ </a></li> <li><em>17</em><a href="/jishuluodi/328599.html" title="如何理解自媒体行业和电商行业？ " target="_blank">如何理解自媒体行业和电商行业？ </a></li> <li><em>18</em><a href="/jishuluodi/328454.html" title="如何理解“凡事遵循真理”这句话的含义？ " target="_blank">如何理解“凡事遵循真理”这句话的含义？ </a></li> <li><em>19</em><a href="/jishuluodi/324041.html" title="如何理解生命的意义？ " target="_blank">如何理解生命的意义？ </a></li> <li><em>20</em><a href="/jishutupo/318450.html" title="GO的“反射”软件包：理解反思和类型断言" target="_blank">GO的“反射”软件包：理解反思和类型断言</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>