HTML+CSS笔记整理
[TOC]
HTML+CSS笔记整理
html、CSS和JS之间的关系
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JS全称是JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
一个HTML网页的基本标签
一个标签一般都是有开始和结尾的
例如`html`标签 ``<html>` `是开始``</html>` `结束（加一个“/”）
通常所有网页**都是**从`!DOCTYPE>`和``<html>` `</html>` `开始的
<!DOCTYPE>的作用
1. `<!DOCTYPE>` 声明必须是 HTML 文档的第一行，位于` `<html>` ` 标签之前。
<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，
<!DOCTYPE>声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML标签基础知识
1. `html`中的标签是可以嵌套的,比如``<div>` `里面嵌套``<p>` ` 则 ``</p>` `必须在``</div>` ` 前面
<div><p>测试文字</p></div>
- 标签是不分大小写的 ,建议小写
<p></p> <P></P>
3. ``<html>` `和``</html>` `成为根标签,所有的网页标签都在``<html>` `和``</html>` `中
4. ``<head>` `标签用于定于文档的头部,他是所有头部元素的容器.头部的元素有``<title>` `,`script>`,``<style>` `,``<link>` `,`meta>`等标签.
5. 在``<body>` `和``</body>` `标签之间的内容时网页的主要内容,如``<h1>` `,``<p>` `,``<a>` `,``<img>` `,等网页内容标签,在这里的标签中的内容会在浏览器中显示出来.
HTML标签元素的整理
<!-- 这里填写HTML的释义-->
<p></p> <!-- 文字段落 -->
<!-- hx 标题 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!-- hx 标题 -->
<!-- 强调语气 -->
<em></em> <!--斜体 -->
<stron></stron> <!-- 加粗 -->
<!-- 强调语气 -->
<span></span> <!-- 没有作用,为了方便css设置方法 -->
<!-- 引用 -->
<q></q> <!-- 引用短文本(会自动添加双引号) -->
<blokquote></blokquote> <!-- 引用长文本(浏览器对其解析为缩进) -->
<!-- 引用 -->
<br /> <!-- 换行空标签 -->
<!-- 空格 -->
<hr /> <!-- 水平横线 -->
<address></address> <!-- 地址信息,可以包含电子邮件,签名或者文档的作者身份等 -->
<!-- 代码语言 -->
<code></code> <!-- 单行代码 -->
<pre></pre> <!-- 多行代码 -->
<!-- 代码语言 -->
<!-- 列表信息 -->
<!-- 无顺序列表-->
<ul>
<li>信息</li>
<li>信息</li>
</ul>
<!-- 无顺序列表-->
<!-- 有顺序列表-->
<ol>
<li>第一个</li>
<li>第二个</li>
</ol>
<!-- 有顺序列表-->
<!-- 列表信息 -->
<link href="css/indexStudy.css" rel="stylesheet" type="text/css"> <!-- 导入根目录下css目录下的indexStudy.css -->
<label></label> <!-- label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 -->
<input type="[输入框类型]" [可选参数]>
<!-- 输入框类型:
text 单行文本输入框
password 密码复选框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
hidden 隐藏域
file 文件域
可选参数:
placeholder 设置默认值(点击后会清除该文字)
value 设置默认值(点击后不清除该文字)
checked 定义type为radio和checkbox时, 可以默认选中该项
-->
CSS样式整理
/*这里填写CSS的释义*/
color:blue; /* 设置颜色为 : 蓝色 */
display:[ ] /* 设置元素的显示方式
nono /*不显示*/
block /* 按块显示 */
border: 10px solid #999; /* 边框大小10px 实线 颜色#999 */
(查资料）box-sizing: border-box; /* 设置边框线朝内 */
font-size:[]; /* 设置字体大小 */
width:[] /*设置宽*/
height:[] /*设置高度*/
text-align:[] /*设置元素对齐方式*/
margin:[][] /*设置上下外边距 设置左右外边距 如果设置为auto就是垂直居中和水平居中*/
background:[] /*设置背景*/
@mediz([条件]) {[动作]} /*根据条件更改css样式，比如可以设置自适应*/
list-style:[] /*设置列表样式 可以吧一些默认样式去掉(比如可以去掉li标签前边的点*/
box-shadow:[x偏移][y偏移][扩散量][颜色]; /*外边框阴影*/
box-sizing:border-box; /*设置边框朝内(设置后border,padding等会朝内，不会占用外部空间（不会影响整体大小））*/
transition:[time];/*过度动画速度.(如未设置则本身为0).*/
border-radius:8px;/*设置边框圆角*/
transform:rotate(30deg);/*旋转30°*/
z-index:[number]; /*设置元素的堆叠顺序，改属性高的元素总是在属性低的属性上边，可以使用负值 （要和position配合使用）*/
opacity:[number];/*设置透明度最大值为1，最小值为0*/
clear:both;/*清除由float引起的错位问题*/
cursor:pointer;/*设置指针为小手*/
background-size: length|percentage|cover|contain;/*设置背景大小*/
cover /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
/* vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 */
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
CSS部分属性详解
重要概念: 盒子模型
内容 < padding < border < margin
最内侧是内容, 被内边距包裹, 然后被边框包裹, 最外侧由外边距包裹, 既盒子模型
padding
调整内容在盒子中的显示位置, 既内容和边框之间的举例
padding: /*[可选参数]*/ /* 定义四边均为[可选参数] */;
padding: /*[可选参数1] [可选参数2]*/ /* 定义上下为[可选参数1], 定义左右为[可选参数2] */;
padding: /*[可选参数1] [可选参数2] [可选参数3] [可选参数4]*/ /* 根据上右下左的顺序使用[可选参数1-4] */;
/* 可选参数:
auto 自动
{数值}px 目标数值像素
*/
margin
盒子和盒子之间的举例, 允许为负值
padding: /*[可选参数]*/ /* 定义四边均为[可选参数] */;
padding: /*[可选参数1] [可选参数2]*/ /* 定义上下为[可选参数1], 定义左右为[可选参数2] */;
padding: /*[可选参数] auto*/ /* 定义上下为[可选参数], 定义左右为居中 */;
padding: /*[可选参数1] [可选参数2] [可选参数3] [可选参数4]*/ /* 根据上右下左的顺序使用[可选参数1-4] */;
/* 可选参数:
auto 自动
{数值}px 目标数值像素
*/
display
display是CSS中最重要的用于控制布局的属性.每个元素都有默认的一个display值,具体是什么值就和元素的类型有关.对于大多数元素他们的默认值通常是block或inline.一个block元素被叫做块级元素,一个inline元素通常被称作行内元素.
block
div
会重开一行并且会尽可能的盛满容器
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括p、form和HTML5中的新元素：header、footer、section等等。
inline
可以在段落中包裹一些文字而不会打乱段落的布局
span就是一个标准的行内元素.一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局.a元素就是最常用的行内元素,它可以被用作连接.
nono
可以隐藏或显示元素
另一个常用的display值是nono.一些特殊的默认display值是它,例如script.display:nono通常被JavaScript用来不删除元素的情况下隐藏或显示元素.
额外加分点
可以随时随地的重写它
就像我之前讨论过的，每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。
border
border-style: /*[可选参数]*/ /* 定义四边均为[可选参数] */;
border-style: /*[可选参数1] [可选参数2]*/ /* 定义上下为[可选参数1], 定义左右为[可选参数2] */;
border-style: /*[可选参数1] [可选参数2] [可选参数3] [可选参数4]*/ /* 根据上右下左的顺序使用[可选参数1-4] */;
/* 可选参数:
nono 无边框线
solid 实线
dashed 虚线
dotted 点线
double 双实线
*/
/*注意, 必须定义了border-style不为nono(默认), 否则该属性无线*/
boder-width: /*目标像素*/;
border-color: /*[颜色属性]*/;
/*颜色属性:
颜色值: red, green等
十六进制值: #fff
rgb: rgb(r,g,b)
*/
CSS选择器
选择器简介
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
简单属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例子
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
:before 选择器
定义和用法
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
CSS 子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素。
CSS 选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
CSS 后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：