码迷,mamicode.com
首页 > Web开发 > 详细

初试HTML和CSS

时间:2019-06-04 09:44:31      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:title   center   script   超级   简体   定义   元素选择器   元数据   规则组   

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代码。

 

初试HTML和CSS

标签:title   center   script   超级   简体   定义   元素选择器   元数据   规则组   

原文地址:https://www.cnblogs.com/zai1/p/10971509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!