HTML、CSS基础知识篇
一、HTML
1.1 HTML基础
基本的HTML标签
- HTML标题：HTML 标题（Heading）是通过 h1 - h6 等标签进行定义的。
- HTML段落： HTML 段落是通过 p标签进行定义的。
- HTML链接：HTML 链接是通过 a标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>
- HTML图像：HTML 图像是通过 img标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
HTML元素
- < body >元素 ： 定义了 HTML 文档的主体。
- < html > 元素：定义了整个 HTML 文档。
- 空标签：没有内容的 HTML 元素被称为空元素。常见的空标签有br
HTML属性（常见）
常用的全局属性
| 属性名称 | 属性含义 |
|---|---|
| class | 规定元素的一个或多个类名（引用样式表中的类） |
| id | 规定元素的唯一 id |
| lang | 规定元素内容的语言 |
| style | 规定元素的行内 CSS 样式 |
常见的事件属性
window事件属性
| 属性名称 | 描述 |
|---|---|
| onload | 页面结束加载之后触发 |
Form事件属性
| 属性名称 | 描述 |
|---|---|
| onblur | 元素失去焦点时运行的脚本 |
| onfocus | 当元素获得焦点时运行的脚本 |
| oninput | 当元素获得用户输入时运行的脚本 |
| onreset | 表单中的重置按钮被点击时触发 HTML5 中不支持 |
| onselect | 在元素中文本被选中后触发 |
| onsubmit | 在提交表单时触发 |
Keyboard事件
| 属性名称 | 描述 |
|---|---|
| onkeydown | 在用户按下按键时触发 |
| onkeypress | 在用户敲击按钮时触发 |
| 在用户敲击按钮时触发 | 当用户释放按键时触发 |
Mouse事件
| 属性名称 | 描述 |
|---|---|
| onclick | 元素上发生鼠标点击时触发 |
| ondblclick | 元素上发生鼠标双击时触发 |
| ondrag | 元素被拖动时运行的脚本 |
| onmousedown | 当元素上按下鼠标按钮时触发 |
| onmousemove | 当鼠标指针移动到元素上时触发 |
| onmouseout | 当鼠标指针移出元素时触发 |
| onmouseover | 当鼠标指针移动到元素上时触发 |
| onmouseup | 当在元素上释放鼠标按钮时触发 |
| onscroll | 当元素滚动条被滚动时运行的脚本 |
常见的表单属性
| 属性名称 | 描述 |
|---|---|
| form | 定义供用户输入的 HTML 表单 |
| input | 定义输入控件 |
| button | 定义按钮 |
| select | 定义选择列表（下拉列表） |
| option | 定义选择列表中的选项 |
| label | 定义 input 元素的标注 |
| datalist | 定义下拉列表 |
常见的列表属性
| 属性名称 | 描述 |
|---|---|
| ul | 定义无序列表 |
| ol | 定义有序列表 |
| li | 定义列表的项目 |
| dl | 定义定义列表 |
| dt | 定义定义列表中的项目 |
常见的表格属性
| 属性名称 | 描述 |
|---|---|
| table | 定义表格 |
| th | 定义表格中的表头单元格 |
| tr | 定义表格中的行 |
| td | 定义表格中的单元 |
| thead | 定义表格中的表头内容 |
| tbody | 定义表格中的主体内容 |
| col | 定义表格中一个或多个列的属性值 |
其他常见属性
| 标签 | 描述 |
|---|---|
| audio | 定义声音内容 |
| br | 定义简单的折行 |
| canvas | 定义图形 |
| div | 定义文档中的节 |
| diglog | 定义对话框或窗口 |
| em | 定义强调文本 |
| hr | 定义水平线 |
| i | 定义斜体字 |
| img | 定义图像 |
| map | 定义图像映射 |
| meta | 定义关于 HTML 文档的元信息 |
| nar | 定义导航链接 |
| param | 定义对象的参数 |
HTML引用
- 用于短的引用的HTML标签：q
<q>构建人与自然和谐共存的世界。</q>
- 用于长引用的 HTML 标签：blockquote
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
HTML图像
- 图像标签（img）和源属性（Src）：img 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
<img src="url" />
- 替换文本属性（Alt）:alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
HTML头部元素
- head 元素是所有头部元素的容器：head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：title、base、link、meta、script 以及 style
- title标签定义文档的标题：title 元素在所有 HTML/XHTML 文档中都是必需的。
- base元素：base标签为页面上的所有链接规定默认地址或默认目标（target）
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
- link元素：link标签定义文档与外部资源之间的关系，最常用于连接样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
- style元素:style标签用于为 HTML 文档定义样式信息。
- meta元素：元数据（metadata）是关于数据的信息。meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。meta标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
1.2 HTML 统一资源定位器URL
- URL 也被称为网址。
- 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
- 网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
- 以下是其中一些最流行的 scheme:
1.3 HTML表单
表单的基础知识
- HTML 表单用于搜集不同类型的用户输入。
- HTML 表单包含表单元素：表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
HTML输入类型：
input元素有很多形态，根据不同的 type 属性。
- 输入类型：text
- 定义供文本输入的单行输入字段
<input type="text" name="firstname">
- 输入类型：password
- 定义密码字段,password 字段中的字符会被做掩码处理
- 输入类型：submit
- 定义提交表单数据至表单处理程序的按钮。
- 表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
- 输入类型：radio
- 定义单选按钮。
- 输入类型：checkbox
- 定义复选框。
- 复选框允许用户在有限数量的选项中选择零个或多个选项。
- 输入类型：button
- 定义按钮。
- 输入类型：number
- 用于应该包含数字值的输入字段。
- 您能够对数字做出限制，输入限制如下
- HTML5新增的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
HTML Input 属性
- value 属性：value 属性规定输入字段的初始。
- readonly 属性：readonly 属性规定输入字段为只读（不能修改）。
- disabled 属性：disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。
- size 属性：size 属性规定输入字段的尺寸（以字符计）。
- maxlength 属性：maxlength 属性规定输入字段允许的最大长度。
- HTML5新增属性：autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height 和 width、list、min 和 max、multiple、pattern (regexp)、placeholder、required、step
二、XHTML
2.1 XHTML的基础知识
- XHTML 是 HTML 与 XML（扩展标记语言）的结合物。
- XHTML 是更严格更纯净的 HTML 代码。
- XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。（只有一个）
2.2 XHTML语法
- 属性名称必须小写
- 属性值必须加引号
- 属性不能简写
- 用 Id 属性代替 name 属性
- XHTML DTD 定义了强制使用的 HTML 元素
三、CSS
3.1 CSS的基础知识
CSS的概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
CSS基础语法
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素；每条声明由一个属性和一个值组成；属性（property）是您希望设置的样式属性（style attribute）；每个属性有一个值。属性和值被冒号分开。
selector {declaration1; declaration2; ... declarationN }
CSS高级语法
- 选择器分组：你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
h1,h2,h3,h4,h5,h6 { color: green; }
- 继承及其问题：通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
3.2 CSS选择器
CSS派生选择器
- 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
- 实例：比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器。这样只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
CSS id选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- id 选择器以 “#” 来定义。
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
- id 属性只能在每个 HTML 文档中出现一次。
- 在现代布局中，id 选择器常常用于建立派生选择器。即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
CSS类选择器
- 在 CSS 中，类选择器以一个点号显示，类名的第一个字符不能使用数字。
.center {text-align: center}
- 和 id 一样，class 也可被用作派生选择器。
CSS属性选择器
- 对带有指定属性的 HTML 元素设置样式。
[title]
{color:red;}
- 属性和值选择器
[title=W3School]
{border:5px solid blue;}
CSS后代选择器
- 后代选择器（descendant selector）又称为包含选择器。
- 后代选择器可以选择作为某元素后代的元素。
div.sidebar {background:blue;}
CSS子元素选择器
- 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
h1 > strong {color:red;}
- 结合后代选择器的子元素选择器：选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。
table.company td > p
CSS相邻兄弟选择器
https://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
CSS伪类和伪元素
3.3 CSS样式
CSS背景
- 设置背景色：可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
- 设置背景图像：要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。
- 背景重复：如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
- 背景定位：可以利用 background-position 属性改变图像在背景中的位置。为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
- 关键字
- 百分数值：换句话说，百分数值同时应用于元素和图像。
body{
<!--图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。-->
background-position:50% 50%;
}
- 长度值：长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
body
{
<!--图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上-->
background-position:50px 100px;
}
- 背景关联：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
CSS文本
- text-indent 属性：缩进文本
- 通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
- 一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。
- text-indent 可以使用所有长度单位，包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
- text-indent 属性可以继承。
- text-align：水平对齐
- text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
- 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中，默认值是 left。
- 最后一个水平对齐属性是 justify：在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。
- word-spacing属性：字间隔
- 其默认值 normal 与设置值为 0 是一样的。
- word-spacing 属性接受一个正长度值或负长度值：如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
- letter-spacing属性：字母间隔
- 与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
- text-transform属性：字符转换
- 这个属性有 4 个值：none、uppercase、lowercase、capitalize。
- 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
- text-decoration属性：文本装饰
- text-decoration 有 5 个值：none、underline、overline、line-through、blink
- underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
- whiter-space属性：处理空白符
- white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
- 通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。
- css文本属性汇总
CSS字体
- 在 CSS 中，有两种不同类型的字体系列名称：通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）和特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）。使用 font-family 属性定义文本的字体系列。
- 字体大小：font-size 属性设置文本的大小。font-size 值可以是绝对或相对值。
- 绝对值：将文本设置为指定的大小、不允许用户在所有浏览器中改变文本大小（不利于可用性）、绝对大小在确定了输出的物理尺寸时很有用
- 相对大小：相对于周围的元素来设置大小、允许用户在浏览器改变文本大小
- 使用em设置字体大小：W3C 推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。（ em：pixels/16=em ）
- 在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值。
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
- CSS字体属性汇总表
CSS链接
- 链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
- 当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
CSS列表
CSS表格
- 表格边框：border ，如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
- 折叠边框：border-collapse ，设置是否将表格边框折叠为单一边框。
border-collapse:collapse;
- 表格文本对齐：
- text-align：设置水平对齐方式，比如左对齐、右对齐或者居中
- vertical-align：设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
- 表格内边距：为 td 和 th 元素设置 padding 属性
- 其他表格属性汇总
CSS轮廓
3.4 CSS框模型
框模型的概述
- 内边距、边框和外边距都是可选的，默认值是零。
- 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
CSS内边距padding
- CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
- 您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
- 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-top、padding-right、padding-bottom、padding-left。
- 元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
CSS边框border
- 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
- border-style的属性值
- 边框属性
CSS外边距margin
- 设置外边距的最简单的方法就是使用 margin 属性：margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em，margin 可以设置为 auto。
- 更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
h1 {margin : 0.25in;}
- 与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：margin: top right bottom left
- 值复制规则：CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
- 外边距合并
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
3.5 CSS定位
定位的基本概念
- CSS 定位 (Positioning) 属性允许你对元素进行定位。
- 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
- CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
- 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。position 属性值的含义：
- static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 - relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 - absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 - fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
- CSS定位属性
CSS相对定位relative
- 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
- 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
- 注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
CSS绝对定位absolute
- 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- 绝对定位使元素的位置与文档流无关，因此不占据空间。
- 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
CSS浮动float
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- CSS不同情况下的浮动效果图：https://www.w3school.com.cn/css/css_positioning_floating.asp
- float的属性值
- 行框和清理：浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
- 要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
3.6 CSS高级
CSS水平对齐
- 对齐块元素：块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。
- 使用 margin 属性来水平对齐：可通过将左和右外边距设置为 “auto”，来对齐块元素。
margin-left:auto;
margin-right:auto;
- 使用 position 属性进行左和右对齐
position:absolute;
right:0px;
width:300px;
- 使用 float 属性来进行左和右对齐
float:right;
width:300px;
CSS尺寸
CSS分类
- CSS 分类属性允许你规定如何以及在何处显示元素。
- CSS分类属性
CSS图片透明
https://www.w3school.com.cn/css/css_image_transparency.asp
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
