zoukankan      html  css  js  c++  java
  • 初识HTML和CSS

    HTML和CSS

        概述:

        网页是由HTMLCSS通过搜索引擎呈现,其中HTML是超级文本标记语言,负责定义文档的内容结构;CSS是层叠样式表,负责定义文档的样式(外观)。

        根据W3C定义,HTML全称HyperText Markup Language用于定义文档内容结构;CSS全称cascading style Sheets用于定义HTML文档的样式(外观)。

        HTMLCSS组合起来通过搜索引擎渲染就是我们生活中常见网页的内容和外观。

        HTML术语:

        HTML分为HTML注释和HTML元素。

        HTML注释书写格式:<!--注释内容-->HTML注释主要用于描述代码功能,浏览器在解析HTML代码时会忽略注释内容

        HTML元素是由空元素和元素的层次结构组成。HTML元素是HTML文档的重要组成部分,一个HTML文档由大量元素组成HTML文档中所有内容结构,都是靠元素组织到页面中的。

        没有元素内容和结束标记的一类元素称之为空元素、自闭合元素。空元素书写方式:<标记名 属性><标记名 属性/>

        元素的层次结构是一个元素的内容中可以包含其他元素,形成嵌套的层次结构;但两个元素之间不能相互嵌套;元素嵌套会产生一个树状的层次结构

        

        文档声明:

        文档声明既不是元素也不是注释,他总是出现在HTML代码的第一行,书写代码为:<!DOCTYPE html>→使用HTML5版本用于通知浏览器,目前的文档正使用哪一个版本,若不写文档声明,浏览器渲染页面时会进入怪异模式

        html元素又叫做根标记、根元素,它是所有其他元素的祖先元素,文档中所有其他元素,都必须放置在它的元素内容中

        相关属性:lang

        该属性指定文档中的文字是用何种自然语言书写的,该属性可能会影响浏览器的语音阅读和翻译行为。

        <html lang="en"> </html>该文档中的文字使用英语书写

        <html lang="zh-cmn-Hans"> </html>该文档中的文字使用简体中文书写

        head元素又叫做文档头,它是html元素的第一个子元素,文档头中可以包含一些其他元素,用于描述页面的附加信息,head元素中的内容不会显示到页面上!

        head元素中通常包含以下元素:

        <title>标识文档标题,该标题会显示在浏览器的标题栏或者标签页上。

        <meta>标识页面的其他元数据(页面相关的附加信息),这是一个空元素;示例:<meta charset="UTF-8">指示浏览器,使用字符编码集UTF-8解析页面,为获得更好的地域兼容性、避免乱码,应将字符编码集设置为UTF-8,并且将该代码作为head的第一个子元素。

      还有<style><link><script>等后面课程知识和其他课程知识。

        body元素又叫做文档体,网页中所有的可见内容都放置在该元素内;body元素中可以包含大量的其他元素,定义文档的内容结构。

        CSS术语:

      CSS注释的书写风格:/*注释内容*/

      CSS注释主要用于描述代码功能,浏览器解析代码时会忽略注释内容。

      CSS代码由一个一个规则组成,每个规则指定了:对哪些元素应用什么样式。

      规则分为选择器和声明块:

      选择器决定了样式规则适用于哪些元素。

      元素选择器书写格式 :标记名{/*声明块*/},所有与该标记名匹配的元素,都将应用声明块中的规则。

      类选择器书写格式:.类名{/*声明块*/},所有class属性为指定类名的元素,都将应用声明块中的规则。

      ID选择器的书写格式:#id值{/*声明块*/},属性id为指定的元素,将应用声明块中的规则在同一个HTML文档中,元素的id值必须唯一。

      引用CSS

      使用外部样式表:CSS代码在一个独立的文件中,HTML通过link元素引入到页面。

      使用外部样式的特点:实现了内容结构和表现形式的代码分离,方便复用和维护;使HTML代码更加纯净,有利于程序员和搜索引擎的阅读;是开发页面的常见做法。

      使用内部样式:CSS代码写到HTML文档的style元素内容中,或者将CSS代码写到HTML文档的style标签中。

      使用内部样式的特点:没有了样式表文件,在某些时候可以提升效率;多个页面难以共享样式,不利于代码复用;HTMLCSS混杂,不利于程序员和搜索引擎的阅读;在某些对效率要求苛刻或测试的场景下使用。

      使用行内样式表:

      CSS写在元素的style属性中行内样式不写选择器。

      使用行内样式的特点:

      没有了样式表文件在某些时候可以提升效率;多个元素难以共享样式,不利于代码复用;HTMLCSS代码混杂,不利于程序员和搜索引擎阅读;javascript操作的是行内样式;在测试的环境下使用。

       

       组织项目结构:

       项目文件结构:在开发一个网站的页面时,会涉及到很多文件,为了便于管理,这些文件应该有组织的放置在项目文件夹中。

       CSS重置技术:浏览器会给HTML元素设置默认的样式,但不同浏览器设置默认样式可能有差异,为了让页面获得跨浏览器的兼容性,需要用一些CSS代码覆盖浏览器的默认样式,这样的行为叫做CSS Reset

       推荐使用Eric MeyerCSS Reset,访问:meyerweb.com/eric/tools/css/reset 复制CSS Reset代码。

  • 相关阅读:
    bind函数
    尾置返回类型
    lambda表达式
    C++谓词
    capacity和size
    容器操作可能会使迭代器失效
    特殊的forward_list操作
    向顺序容器添加元素
    swap与assign
    迭代器
  • 原文地址:https://www.cnblogs.com/zai1/p/10971509.html
Copyright © 2011-2022 走看看