HTML&CSS基础-CSDN博客

本文链接：https://blog.csdn.net/chenzhiqin25/article/details/51248278

HTML&CSS基础

什么是Web？

Web就是在Http协议基础之上, 利用浏览器进行访问的网站.
所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务），又或收集想要的信息。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。
什么是网页
在你眼前，出现在显示器上的这个 “ 东西 ” ，就是一个网页。网页实际是一个文件，它存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

什么是HTML：

HTML 是一种标记语言（markup language）。它告诉浏览器如何显示内容。HTML把内容（文字，图片，语言，影片等等）和「presentation」（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。
HyperText Markup Language, commonly abbreviated as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages,[1] as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically and, before the advent of Cascading Style Sheets (CSS), included cues for the presentation or appearance of the document (web page), making it a markup language, rather than a programming language.

HTML简史：

蒂姆·伯纳斯-李，一名CERN（欧洲核子研究组织）的物理学家，在80年代后期设计了一种能在网路上分享文档的方式。在这之前，网路上沟通的方式仅限于纯文本传递，比如：电子邮件、FTP(文件传输协议)和Usenet讨论版。HTML是利用内容档案储存至中央服务器的方式，然后再将内容透过浏览器传递至本机工作站。它简化了内容存取的方式，也让更多丰富内容能够显示（诸如较复杂的文本格式与图片的显示）。HTML 源自于SGML——它是一种复杂的文档结构定义和内容描述（文本或图像）语法；从HTML5起，HTML不再坚守SGML的语法。

什么是CSS？：

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。
文档是信息的集合，它使用一门标记语言作为结构。
将一篇文档呈现给用户是指将文档转换成你的听众能够使用的一种形式。火狐、Chrome或IE等浏览器，用于将文档以可视的形式进行呈现，如在计算机屏幕、投影仪或打印机上。

CSS 如何工作

1.浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。这时DOM 就代表了电脑内存中的相应文档，因为它已经　融合了文档内容和相应的样式表。
2.最后浏览器把 DOM的内容展示出来。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML包含三个内容：

元素
- 如< img>表示图片,< p>表示段落，< a>表示超链接
标签

HTML 为由一对尖括号（<>）所括起来的内容以特定含义. 这样的标识称为一个标签（tag）. 例如:
< p>This is text within a paragraph.
属性
特性名

特性值（CSS中定义)

一个完整的的文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Note that it is "h" + "1", not "h" + the letter "one" -->
<p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

关于CSS：

选择器
- .xxxx(类）
- #xxxx（ID）
- xxxx（伪类）
- xx>xxx(子选择器）
- xx xxxx(包含后代选择器）
- *｛｝全局选择器
盒子模型
- padding
- width
- margin
- border
布局模型
- 流动模型：默认width：100%
- 浮动模型：设置并列
- 层模型
  - absolute（脱离文档流）
  - relative（在文档流）
  - fixed（脱离文档流）
CSS样式
- 背景
- 文本
- 字体
- 链接
- 列表
- 表格
- 轮廓

水平居中设置：
行内元素：如图片、文本可通过在父元素中设置text-align：center就能设置水平居中，包括标题元素也可以使用`text-align’设置水平居中

定宽块元素：使用margin: 0 auto设置块元素的水平居中
不定宽块元素：
1.为元素外面增加< table>标签，然后设置< table>标签margin: 0 auto即可
2.将块级元素设置为display:inline然后在父元素中设置text-align:center即可
3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

垂直居中：
1.父元素高度确定的单行文本：
将父元素的line-high设置为和父元素的height相同的大小即可
2.父元素高度确定的多行文本“
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。即输入：display：table-cell；vertical-align：middle；