初试HTML和CSS
Posted zai1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初试HTML和CSS相关的知识，希望对你有一定的参考价值。
html和CSS
概述：
网页是由HTML和CSS通过搜索引擎呈现，其中HTML是超级文本标记语言，负责定义文档的内容结构；CSS是层叠样式表，负责定义文档的样式（外观）。
根据W3C定义，HTML全称HyperText Markup Language用于定义文档内容结构；CSS全称cascading style Sheets用于定义HTML文档的样式（外观）。
HTML和CSS组合起来通过搜索引擎渲染就是我们生活中常见网页的内容和外观。
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标签中。
使用内部样式的特点：没有了样式表文件，在某些时候可以提升效率；多个页面难以共享样式，不利于代码复用；HTML和CSS混杂，不利于程序员和搜索引擎的阅读；在某些对效率要求苛刻或测试的场景下使用。
使用行内样式表：
CSS写在元素的style属性中行内样式不写选择器。
使用行内样式的特点：
没有了样式表文件在某些时候可以提升效率；多个元素难以共享样式，不利于代码复用；HTML和CSS代码混杂，不利于程序员和搜索引擎阅读；javascript操作的是行内样式；在测试的环境下使用。
组织项目结构：
项目文件结构：在开发一个网站的页面时，会涉及到很多文件，为了便于管理，这些文件应该有组织的放置在项目文件夹中。
CSS重置技术：浏览器会给HTML元素设置默认的样式，但不同浏览器设置默认样式可能有差异，为了让页面获得跨浏览器的兼容性，需要用一些CSS代码覆盖浏览器的默认样式，这样的行为叫做CSS Reset。
推荐使用Eric Meyer的CSS Reset，访问：meyerweb.com/eric/tools/css/reset 复制CSS Reset代码。
以上是关于初试HTML和CSS的主要内容，如果未能解决你的问题，请参考以下文章