• HTML(XHTML)基础知识(一)——【head】


    URL 的基本组成部分

    ==========================================================================================

    标记代码的部件:标签、元素、属性

    验证链接:http://validator.w3.org/

    块级元素和行内元素

    块级元素:在父元素内独占一行

    行内元素:在块级元素内占据一定宽度

    标准属性:

        1、核心属性:class、id、style、title

        2、国际化属性:dir、lang、xml:lang

        3、焦点属性:accesskey、tabindex

    一个典型的XHTML 文档

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>My first web page</title>
      </head>
      <body>
        <p>XHTML is easy!</p>
      </body>
    <html>

    ========================================================================================

    CSS

    验证链接:http://jigsaw.w3.org/css-validator/

    学习网站:https://www.w3schools.com/css/

    选择符:

    ① 全体选择符(*);② 元素选择符(标签名);③ 类选择符(.类名);④ ID 选择符(#ID)⑤ 伪类选择符(:状态名,:link,:visited,:active,:hover,:focus);⑥ 后代选择符(①-⑤选择符用空格分割排列在一起,表示包含关系);⑦ 组合选择符(①-⑤选择符紧密链接在一起,表示从属关系);⑧ 分组选择符(①-⑦选择符用逗号分割排列在一起);⑨ 高级选择符(在 CSS 2.1、3 版本中定义,未被广泛使用,包含 属性选择符、伪元素选择符、子选择符、毗邻同胞选择符等)

    具体性(优先级)比较:

        内联的 style 属性中声明的 CSS 属性具有最高的优先级

        然后,ID 选择符 > 类或伪类选择符 > 元素选择符 > 全体选择符

    将样式表附加到文档

        内联样式:

    <h2 style="color: red;">Good eats for hungry geeks</h2>

        嵌入式样式:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>My first web page</title>
        <style type="text/css">
          h2 { color: red; }
          p { color: gray; }
        </style>
      </head>
      <body>
        <p>XHTML is easy!</p>
      </body>
    <html>

        外部样式表:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>My first web page</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
      </head>
      <body>
        <p>XHTML is easy!</p>
      </body>
    <html>

    样式表的层叠顺序

        浏览器样式表 < 用户样式表 < 外部作者样式表(按其被链接的顺序) < 嵌入式作者样式表(按其出现的顺序) < 内联作者样式

    !important 声明

        !important 声明的样式属性值具有最高的优先级。

    h1 { color: red !important; }

    CSS 注释

        /* 注释,可跨行 */

    =======================================================================================

    <head> 节

    <head>
      <base></base>
      <link></link>
      <meta></meta>
      <script></script>
      <style></style>
      <title></title>
    </head>

      <base> 

        元素用来为文档中的所有链接指定一个基础 URL:<base href="基础URL" />

      <link> 

        元素用于将外部资源(脚本、样式表)链接入当期文档:

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

        可选属性:charset、href、media(说明所链接的文档用于哪种媒体,all、braille、print、projection、screen、speech)、ref(所链接文档与当前文档之间的关系,alternate、appendix、bookmark、chapter、contents、copyright、glossary、help、home、index、next、prev、section、start、stylesheet、subsection)、rev(当前文档与所链接文档之间的关系)、type(text/css、text/javascript、image/gif 等)

        标准属性:class、dir、id、lang、style、title

      <meta>

    <meta name="description" content="t=This is an introduction to HTML/XHTML." />
    <meta http-equiv="refresh" content="15" />

        必需属性:content,与 name 或 http-equiv 关联,表现为 name="xxx" content="zzz" 或 http-equiv="xxx" content="zzz"

        可选属性:http-equiv,把 content 属性值与一个特定的  HTTP 响应头相关联。可以用来指示浏览器做某些操作,或用来引用关于文档的,来源于外部的信息;name,用于给文档添加额外的信息,如 author、keywords、description、summary 等;scheme,用于声明 content 属性值的格式。

        标准属性:dir、lang、xml:lang

        更多 meta 元素相关属性:http://vancouver-webpages.com/META/metatags.detail.html

      <script>

        必需属性:type,声明脚本的 MIME 类型,如 text/javascript。

        可选属性:charset,声明脚本使用的字符编码;defer,告知浏览器该脚本不产生文档内容;src,指定脚本文件的来源URL。

        标准属性:xml:space

      <style>

    <style type="text/css">
      @media screen
      {
        ptext { font-size:16px }
      }
      @media print
      {
        ptext { font-size:12px }
      }
      @media screen,print
      {
        ptext { font-size:normal }
      }
    </style>
    
    <style type="text/css">
      @import "http://www.mysite.com/css/style.css"
    </style>

        必需属性:type,定义样式类型,一般为 text/css。

        可选属性:media,说明样式影响的是哪种媒体,如 screen、print、tty、tv、projection、handheld、braille、aural、all。

        标准属性:dir、lang、title、xml:space

      <title>

        标准属性:class、dir、id、lang、style、xml:lang

  • 相关阅读:
    怎么认Destsoon标签条件
    PHP将图片转base64格式函数
    修改Discuz!X系列开启防CC攻击,不影响搜索引擎收录
    discuz x3.2简化的搜索框代码
    让Discuz! X3.2 SEO标题里的“-”支持空格
    javascript的常用操作(二)
    Spring MVC中注解的简介
    Spring MVC + Thymeleaf
    Maven建立spring-web项目
    Spring @Autowired使用介绍
  • 原文地址:https://www.cnblogs.com/shilxfly/p/9436922.html
Copyright © 2020-2023  润新知