精华内容
下载资源
问答
  • 语义化

    2019-06-04 16:03:00
    语义化总结 语义化概述: 什么是语义化: HTML中不同的元素代表不同的含义; 使用具有含义的元素来书写HTML文档,即语义化; 写HTML文档最重要的,即为不同的内容选择合适的元素; 语义化属于HTML范畴,与...

    语义化总结

    语义化概述

     

    什么是语义化:

     

    HTML中不同的元素代表不同的含义;

    使用具有含义的元素来书写HTML文档,即语义化;

    HTML文档最重要的,即为不同的内容选择合适的元素;

    语义化属于HTML范畴,与样式无关;

    目前,HTML的最新版本是HTML5,引入了更多的语义化元素。

     

    语义化的作用:

     

    有利于浏览器理解HTML文档;

    <strong>

    重要的内容,浏览器在阅读模式下不应该忽略该内容;

    若浏览器有语音阅读功能,应该重读该元素中的内容;

    <i>

    若浏览器有语音阅读功能,应该用一种特别的语调来阅读该元素的内容;

    有利于搜索引擎理解HTML文档

    百度、谷歌、bing

    搜索引擎通过互联网访问页面,搜索引擎会阅读这些页面的HTML代码,更好的语义化会帮助搜索引擎理解页面中每一段内容的含义有助于提升站点的排名。

     

    HTML5元素表:

     

    HTML5元素表列出了各种元素,并进行了颜色分类,相同颜色归为一类。

     

    超链接:

     

    超链接<a>元素

    点击超链接后会跳转到另一个页面;

    <a>元素书写格式:

    <a href="目标"> 内容 </a>

    <a target="页面打开位置" href="目标"> 内容 </a>

    href属性:

    页面地址(路径)

    锚点、

    功能链接;

     

    target属性:

    _blank 新窗口中打开、

    _self 默认值,当前窗口中打开;

     

    绝对路径和相对路径:

     

    绝对路径:

     

    当网站部署到服务器后,网站中的所有资源都可以通过一个地址(路径)访问。

    该地址(路径)的书写格式为:协议://域名/目录

    示例:http://www.google.com/

    协议:http

    域名:www.google.com

    目录:根目录

    示例:http://meyerweb.com/eric/tools/css/reset/reset.css

    协议:http

    域名:meyerweb.com

    目录:根目录/eric/tools/css/reset/reset.css

    种格式书写的路径,叫做绝对路径。

    绝对路径的使用场景:

    访问站外资源时,只能使用绝对路径;

    访问站内资源时,若网站已部署到服务器,可以使用绝对路径,并可以省略协议和域名。

     

    相对路径:

     

    对路径是相对于当前资源的位置,只能用于访问站内资源;

    相对路径的书写格式为:

    ./路径

    表示当前资源所在的目录,必须作为相对路径的开始,可省略;

    ../

    表示返回上一级目录;

     

    综合示例:

     

    <link rel="stylesheet" href="/css/main.css">

    绝对路径(省略了协议和域名)

    <link rel="stylesheet" href="css/main.css">

    相对路径(省略了./

    <a href="http://www.google.com/">...</a>

    绝对路径

    <a href="../u/account/login.html">...</a>

    相对路径(省略了./

    <a href="/u/account/login.html">...</a>

    绝对路径(省略了协议和域名)

    <a href="u/account/login.html">...</a>

    相对路径(省略了./

    <a href="./u/account/login.html">...</a>

    相对路径

     

    站外资源:绝对路径

    站内资源:绝对路径(网站已部署,可省略协议和域名)、相对路径

     

     

    文本元素:

     

    h1h61级标题~6级标题

    p:段落

    blockquote:整段的引用

    cite:对参考文献的引用

    q:小段文本的引用

    abbr:对缩写词的引用

    strong:重要的文本

    em:强调的文本

    b:应突出显示的文本

    i:应区别对待的文本

     

    结构元素:

     

    div元素:

     

    它是一个非常常见的元素,它没有任何的语义,它仅仅表示一个容器,用于包含其他元素,在网站布局时,它通常用于表示页面的区域。

     

    实体字符:

     

    实体字符的书写格式为:&实体名称;&#实体编号;

    常见的实体字符:

    空格:实体名称 实体编号 

    小于符号(<):实体名称<实体编号<

    大于符号(>):实体名称>实体编号>

    并且符号(&):实体名称&实体编号&

    版权符号(@):实体名称©实体编号©

     

    转载于:https://www.cnblogs.com/zai1/p/10974091.html

    展开全文
  • 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。
  • Web 语义化

    2021-01-20 14:23:21
    Web 语义化 单词语义化表示了它的意义。 事物的语义化意味着事物。 Web 语义化 = Web的意义。 什么是 Web 语义化? 什么是语义化?其实简单说来就是让机器可以读懂内容。 甲壳虫乐队是一个来自利物浦受欢迎的...
  • 一、什么是语义化标签 语义化即让标签元素拥有其含义,当你使用其标签时知道这个标签代表着什么含义,适用于怎样的场景 二、语义化标签的优势 1.书写代码时有助于理清思路,使页面结构清晰,团队合作 2.维护者在...

    什么是语义化标签

    语义化即让标签元素拥有其含义,当你使用其标签时知道这个标签代表着什么含义,适用于怎样的场景

    二、语义化标签的优势

    1.书写代码时有助于理清思路,使页面结构清晰,团队合作

    2.维护者在网站维护时更加方便快捷

    3.有利于搜索引擎优化(SEO)

    三、常见的语义化标签

    书写代码时,尽量使用语义化标签

    1.适用于页面布局(划分区域)的语义化标签

    • <header>  用于表示页面或某个区域的头部
    • <nav>  用于表示导航栏 ,<header>是它的父元素
    • <article>  用于表示页面主题内容或文章内容
    • <section>  用于表示一个整体的一部分或文章的章节,<article>是他的父元素
    • <aside>  用于表示跟周围主题相关的附加信息,可用于广告
    • <footer>  用于表示页面或某个区域的脚注(页面的底部)
    • <figure>  图片语义化标签,它通常包含子元素<img>和<figcaption>
    • <figcaption>  用于对图片进行描述
    • <main>  页面主要内容,一个页面只能使用一次
    • <form>  表单,用于客户注册或填写信息
    • <table>  表格  适用场景:购物车,内容管理系统(员工,学员,物质)

    2.文本类语义化标签

    • <title>  用于标识文档标题,该标题会显示在浏览器的标题栏或标签页上。有利于搜索引擎优化,使网站排在前面
    • <hn>  h1--h6分级标题,h1重要性最大--h6重要性最小。有利于搜索引擎优化,使网站排在前面
    • <p>  代表段落,p元素不能包含h(1-6)标题元素也不能包含自己
    • <blockquote>  代表整段的引用 功能:会有相应的缩进 适用场景:古诗词(文字较多时)
    • <q>  代表小段的引用 功能:自带前后双引号 适用场景:名人名言
    • <abbr>  代表缩写词的引用  适用场景:专业术语,名词解释
    • <cite>  代表参考文献的引用 功能文本以斜体展示
    • <i>和<em>  强调文本内容,普通浏览器:文本以斜体展示,<i>和<em>没有区别。阅读浏览器:<em>会加重读音
    • <strong>和<b> 强调文本内容,普通浏览器:文本加粗展示,<strong>和<b>没有区别。阅读浏览器:<strong>会加重读音

    3.非文本类语义化标签

    • <img>  代表一张图片
    • <video>  代表一段视频
    • <audio>  代表一段音频

    4.分组类语义化标签

    • <ul>  无序列表 子元素<li> 默认状态:元素内容之前会有一个实心圆  适用场景:导航,目录,相关信息,排行榜,侧边栏
    • <ol>  有序列表 子元素<li> 默认状态:元素内容之前会有一个阿拉伯数字(从1递增) 适用场景:目录,相关信息,排行榜,侧边栏
    • <dl> 自定义列表 子元素<dt>和<dd> 功能:我们可以根据自己的需求进行内容添加  适用场景:名词解释,专业术语

    、无语义化元素

    • <div>  无语义,主要用于页面的划分区域
    • <span>  无语义,仅用于给一段文本添加样式 例如:雪碧图
    • <br>  无语义,空元素,用于在页面中换行 不建议使用改标签,使用会导致页面布局的改变和不利于网站维护
    • <hr> 无语义,空元素,用于在页面制造一个分割线 不建议使用该标签,使用会导致页面布局的改变和不利于网站维护
    • <pre>  无语义,预格式化元素,用于保留文字在源代码中的格式  适用场景:数理化方程式

     

    补充:在html代码中,输入一个或多个空格(回车),最终在页面都会以一个空格进行展示。即多个合并一个空格!

     

     

     

     

     

     

    展开全文
  • 语义化和非语义化

    2020-04-07 10:56:36
    语义化结构元素:<header>:用于表示页面或某个区域的头部 <nav>:用于表示导航栏 <aside>: 用于表示跟周围主题相关的附加信息 <article>:用于表示文章或其他可独立页面存在的内容 <...

    语义化结构元素:<header>:用于表示页面或某个区域的头部
                    <nav>:用于表示导航栏
                    <aside>: 用于表示跟周围主题相关的附加信息
                    <article>:用于表示文章或其他可独立页面存在的内容
                    <section>:用于表示一个整体的一部分主题
                    <footer>:用于表示页面或某个区域的脚注

    非语义化标签:div     


    语义化标签能够让页面在搜索引擎在不花钱的情况下排名更靠前,让更多人知道
     

    展开全文
  • 语义化 H1 标签

    2020-10-30 13:36:00
    语义化 H1 标签
  • HTML5 语义化结构化规范化2019年07月25日|萬仟网IT编程 |我要评论HTML结构更加清晰、规范,学习HTML5优化结构的思路。HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使...

    HTML5 语义化结构化规范化

    2019年07月25日

    | 萬仟网IT编程

     | a48e1d17a2b0511faa7da7240b1971f6.png我要评论

    HTML结构更加清晰、规范,学习HTML5优化结构的思路。

    HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。

    那... 08-10-17

    html结构更加清晰、规范,学习html5优化结构的思路。html5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。

    那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构更加清晰化,可以推广为规范,让团队协作更加顺畅。

    一些新增的结构标记

    ◎section:这可以是书中的一章或一节,实际上可以是在html4中有自己的标题的任何东西

    ◎header:页面上显示的页眉;与head元素不一样

    ◎footer:页脚;可以显示电子邮件中的签名

    ◎nav:指向其他页面的一组链接

    ◎article:blog、杂志、文章汇编等中的一篇文章

    一些例子

    html5的文档结构

    ...

    ...

    ...

    ...

    ...

    xhtml的文档结构

    header

    展开全文
  •   对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标签?我们为...
  • 我理解的HTML语义化 经过查看别人博文中的一些描述,我将HTML的语义化总结为: 用最恰当的标签来标记内容。 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗。能够实现这种效果的...
  • HTML5添加了一些新元素,用来标识常用的结构,是html更具语义化,可是我们无法直接使用,即使可能用到还要等他个十年八年的。那就像微格式一样,使用class代替,或者随意点,使用id和class名来代替,让自己的结构...
  • HTML语义化

    2021-05-13 10:39:15
    HTML语义化 关于语义 语义是对标记与符号之间的关系,以及它们的含义的研究。在前端web开发的上下文中...什么是语义化语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、
  • HTML语义化.doc

    2021-03-31 15:00:39
    针对html语义化的阐述
  • 一、为什么要进行HTML语义化现在的页面通篇都是div+css,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方W3C,也在HTML5给出了几个新的语义化的标签。二、什么是HTML语义化HTML语义化...
  • html语义化

    2019-03-26 21:57:27
    根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。 2.为什么要语义化 在没有CSS的时候能够清晰的看出网页的结构,增强...
  •  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好...
  • 语义化概论

    2019-09-21 15:57:40
    语义化概述 1什么是语义化 HTML中不同的元素代表不同的含义 使用具有含义的元素来书写HTML文档,即语义化 书写HTML文档最重要的,即为不同的内容选择合适的元素 语义化属于HTML范畴,与样式无关 目前,HTML的...
  • 什么是语义化标签 语义化的标签,意义让标签有自己的含义。 语义化标签的优势 代码结构清晰,方便阅读,有利于团队合作开发。 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,582
精华内容 7,032
关键字:

语义化