HTML和长css入门知识分享

　　一，web前端技术

　　问题：你写网页能不能遵循web标准？你知不知道web前端技术都有什么？

　　Web前端技术是由w3c组织制定的一系列技术的集合，主要包括：

　　HTML – 结构标准：负责网页内容（布局）

　　CSS – 表现标准、样式标准：美化

　　JavaScript，简称js，行为标准：负责行为动作、表单验证、数据交互

　　二，html发展历史

　　html1.0 – 1993年起草了一个草案，纯文本格式

　　html2.0

　　html3.0

　　html4.0 – 意识：语法松散：Aa – xhtml1.0（x表示严格型的，相对严格：能兼容低版本） -- xhtml2.0（想法：绝对严格） -- 浏览器厂商反对：咱们自己研发html自己用 – html5.0

　　最终：html5.0仍然是w3c研发

　　工作：xhtml1.0 + html5.0

　　vscode:

　　标签语法： <标签的名字>内容</标签名字> -- 双标记

　　<标签名> -- 单标记

　　标题： h1-h6

　　段落 p

　　布局区块： div

　　特殊效果文字小图片： span

　　图片标签 – img

　　HTML概述及HTML文档基本结构

　　HTML概述

　　HTML是HyperText Mark-up Language的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。

　　HTML文档基本结构

　　一个html的基本结构如下：

　　或者：

　　第一行是文档声明，第二行是“<html>”标签和最后一行“</html>”定义html文档的整体，“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

　　一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。

　　HTML文档快速创建

　　新建一个html文档后，可以用快捷键的方式快速创建html文档。快捷键：！+ tab键，或者html:5+tab键

　　HTML标签入门

　　标签语法：

　　学习html语言就是学习标签的用法，html常用的标签有20多个，学会这些标签的使用，就基本上学会了HTML的使用。

　　标签的使用方法：

　　块元素标签（行元素）和内联元素标签（行内元素）

　　标签在页面上会显示成一个方块。除了显示成方块，它们一般分为下面两类：

　　块元素：在布局中默认会独占一行，宽度默认等于父级的宽度，块元素后的元素需换行排列。

　　内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

　　常用块元素标签

　　1、标题标签，表示文档的标题，除了具有块元素基本特性外，还含有默认的外边距和字体大小

　　2、段落标签，表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距

　　3、通用块容器标签，表示文档中一块内容，具有块元素基本特性，没有其他默认样式

　　常用内联元素标签

　　1、超链接标签，链接到另外一个网页，具有内联元素基本特性，默认文字蓝色，有下划线

　　2、通用内联容器标签，具有内联元素基本特性，没有其他默认样式

　　3、图片标签，在网页中插入图片，具有内联元素基本特性，但是它支持宽高设置。

　　其他常用功能标签

　　1、换行标签

　　2、html注释：

　　html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

　　常用html字符实体

　　代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体，代码如下：

　　在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：

　　网页布局原理

　　标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列，整体按照先整体，后局部，先大后小的顺序来书写结构。

　　布局示例

　　根据网页布局的原理以及上面的实例，写出网页的html结构代码。

　　标签语义化

　　在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名（也叫做SEO），其次是方便代码的阅读和维护。

　　带语义的标签

　　1、h1——h6：表示标题

　　2、p：表示段落

　　3、img：表示图片

　　4、a：表示链接

　　不带语义的标签

　　1、div：表示一块内容

　　2、span：表示行内的一块内容

　　所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

　　css概述

　　为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

　　css基本语法

　　css的定义方法是：

　　选择器 { 属性：值；属性：值；属性：值；}