zoukankan      html  css  js  c++  java
  • html常用标签与扩展(标签语义化、Doctype)

    html常用标签

    1、文档类性的声明

    <!DOCTYPE html>声明该文档是一个html5的文档

    xhtml是html以前版本的声明

    注意:一些老网站可能用的还是老版本的文档类型比如XHTML之类的,但是我们学的是
    HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5
    的文档类型就好了。

    2、字符集

    <metacharset="UTF-8"/>最常用 

    了解:

    BG2312简单中文包括6763个汉字
    BIG5繁体中文港澳台等用
    GBK包含全部中文字符是GB2312的扩展,加入对繁体字的支持,兼容GB2312
    UTF-8则包含全世界所有国家需要用到的字符

    3、常用的标签

       (1)、标题标签 :h1-h6  head

    特点:1、文本自动加粗加大 

                2、文本的字体大小与h后边的的数字成反比

                3、自动换行

    (2)、段落标签 paragraph    p paragraph

    特点:自动换行

    (3)、水平线标签   hr    horizon

          特点:显示一条横线  单标签

    (4)、换行标签  br

    特点:1、单标签 

                  2、可以在文本内容中随处换行

    (5)、盒子标签  div

    特点:用div来进行网页布局 

      (6)、组合行内元素标签 span

    特点:最典型的行内元素,2、不会换行 不设宽高,不独占一行,水平可以加内边距和外边距,可以和相邻的行内块元素,行内元素在同一行上,有默认宽高。

    4、文本语义化标签

    加粗 b  strong

    斜体:i  em

    下划线:u  ins

    删除线:s  del

    区别:strong/em/ ins/del跟具有语气话及强调

    5、图片标签

    图片标签     img

    src属性:图片的路径

    jpg/png/gif/psd 注意添加后缀名

    再浏览器展示图片的大小就是默认大小

    图片的宽

    height:图片的高度

    title:图片的标题 光标移动到图片上显示对应的属性值

    alt:图片不显示时,显示alt的属性值 

    相对路径:相对于当前位置

                        1、图片在当前文件夹下 ./ 或者不写

                        2、图片在当前文件的下一级目录

                        3、图片在当前文件的上一级目录../

    绝对路径:路径是文件的整个目录

    6、链接标签

    (1)、anchor单词的缩写  锚及是a标签

    href:跳转的路径 

    跳转方式

    跳转线上 

    跳转本地

             #暂时不知道往哪儿跳转 

    打开方式

              跳转链接后,默认在当前的窗口打开

             在新的窗口打开 target="_blank"

             在当前窗口打开 target="_self" 

    (2)、锚点链接

    给指定的内容添加id属性,其次在标题中添加链接标签,href的属性值用#与id名对应即可实现锚点定位

    (3)、Base

    base标签的target属性设置整个网页中所有a链接的跳转方式 

    7、列表标签

    (1)、分类:无序列表(ul li)、有序列表(ol li)、自定义列表 (dl dt dd)

    (2)、无序:特点:1、独占一行

                                         2、没有顺序

                                          3、每一行前有个小点

    (3)、有序: 特点:1、独占一行

                               有顺序

                               每一行前有顺序数字

    扩展:

    1、标签语义化的理解?

    a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

    b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

    c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

    d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

    2、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

    声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。

    严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。

    在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

    DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

    3、 各Doctype文档类型?

    标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

    HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

    XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

    Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,

    Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

  • 相关阅读:
    【Webpack】432- 关于webpack4的14个知识点
    【Nuxtjs】431- 简述Nuxt.js
    【JS】430- 前端异常处理方案汇总
    【Web技术】429- TCP为啥要3次握手和4次挥手?
    【Nodejs】428- 消息队列助你成为高薪 Node.js 工程师
    【Web技术】427- 图解浏览器的基本工作原理
    【Vuejs】426- vue动态定义图片路径
    linux命令英文缩写的含义(方便记忆)
    VM虚拟机安装centos详细图文教程
    Android 你应该知道的学习资源 进阶之路贵在坚持
  • 原文地址:https://www.cnblogs.com/wenaq/p/13509298.html
Copyright © 2011-2022 走看看