HTML和CSS——中国大学mooc上web开发笔记

文章目录

HTML
- 1、基本语法结构及标签
- 2、HTML标签的属性
- - 2.1、属性概述
  - 2.2、标识属性
  - 2.3、input标签属性再说明
  - 2.4、table标签属性说明
CSS
- 1、CSS的引入、语法格式及规则
- - 1.1、引入方式
  - 1.2、语法格式、选择器类型及优先级规则
  - - 语法格式
    - 选择器类型
    - 选择器属性的优先级
- 2、常用属性
- - 2.1、颜色属性
  - 2.2、font属性和text属性
  - 2.3、背景设置
  - 2.4、超链接属性的设置
  - 2.5、List属性的设置
  - 2.6、表格的属性
- 3、CSS布局——盒模型布局
- - 3.1、盒模型的结构
  - - 盒模型属性的设置
  - 2.2、布局和定位
  - - 2.2.1、文档流定位
    - - 元素类型及其对应的特点
      - 元素的可见性
    - 2.2.2、浮动定位
    - - 浮动定位的特点
      - floating属性和clear属性
      - overflow属性
      - column属性
      - verticle-align属性
    - 2.2.3、层定位方式

HTML

1、基本语法结构及标签

类似于脚本的开始标签!DOCTYPE html，这条语句是为了兼容低版本的IE浏览器，而作的一个HTML5标识；整个文件结构在html标签内，html又分为head标签和body标签部分；
head标签内：
- title标签，网页显示时的标签；
- meta标签，设定元属性，主要charset=“UTF-8”；
- link标签文件外引入css文件，主要有ref、href和type三个属性要设置；
- script标签，引入JavaScript文件；
- type标签，可以在type标签之间引入css文件内容；
body标签，网页的主体部分：
- div标签：块标签，是现代网页结构实现的主要方式；通过div将网页分成不同的各个部分，div也可以嵌套；通过class和id属性来区分；
- 块标签：h1~6头标签、p标签、hr下划线；后面还会提到行内元素，块元素跟他们的不同主要表现在它可以设置宽度和高度；相对来讲可操作和要操作的内容要多一些，后面介绍到CSS再结合来说明；
- 行内元素：br换行；span有点类似与div主要是为了标识段内文字，从而可以设置其样式；em（倾斜）和strong（加粗）就是类似于span但是被命名了的段内标识；
- 行内元素（特殊）：a超链接，主要有href属性（链接的路径）；image图片标签（其实是行内块元素），主要有src属性（图片的路径）和alt属性；audio和video跟image类似，但是属性不同；
- 其他不常用的标签：pre和code标签，保持输入时的格式，方便格式设置；但正常情况下这种方式不太好，因为这样格式的改变不在标签属性的控制范围之内；可以在pre或code标签内插入span标签，设置className，从而对格式进行控制（主要是字体，颜色等）。
- 列表标签：类似于段落标签，它是为了表示类似于此片文章使用的格式；ul标签（无序标签）定义一个标签对象；而li标签包含其内，用来表示标签的各条目；ol标签（有序标签）跟ul标签是类似的，表示一个标签对象，而其中的条目还是使用li标签来表示；
- 列表标签（特殊）：dl、dh、dd标签用来表示一种比上面的标签多一级的标签形式；dl定义标签对象；dh定义每个标签的标题；dd标签表示每个条目的详细内容；
- 表格标签：table标签定义表格对象；dr标签表示表格的行；td标签表示列（我们要写的内容是写在td标签之内的）；另外还有th标签，其实是一种特殊的td标签，用于标题栏，主要有一个加粗的效果。captain标签用来表示表格的标题；
- 表单标签：form标签定义表单标签的区域，其中有一个action属性，用来定义处理表单的文件路径==（这是古老的处理表达的方式，action对应于一个处理该表单的程序，会被submit按钮触发；现在表单处理一般采用事件处理函数来处理，更方便）==；主要有input用来做用户名、密码、提交、重置、单选、复选等表单；select用来做下拉菜单和textarea标签用来输入详细信息；
- input标签：通过设置type属性不同的value值来得到不同的标签形式：
  - text，填写一行信息，一般作为用户名，输入信息会显示；`
  - passward，用来输入密码，显示为****；
  - submit用来定义提交按钮，一般要有value属性的设置，表示显示在按钮上的提示信息；
  - reset用来定义重置按钮，跟submit用法相同，只是type值不同；
  - radio用来作为单选表单；其中单选表单各项的name属性值是必须相同；可以通过checked属性来定义默认选择；
  - checkbox用来做多选表单；其个表单的name值必须是不同的；
- select标签：用来做下拉选择菜单；其中option标签用来写每个选项内容，option有checked属性，可以用来设置默认选项；
- textarea标签，用来定义一个书写区域；rows和cols属性分别定义书写区域的行数及每行的字数；

2、HTML标签的属性

2.1、属性概述

html中有各种属性标签，它们是用来描述各种标签，我们可以定义任何属性都不会产生报错；但只有预定义好行为或性质的属性才有意义；
属性是用来描述标签内容的一个方面；现在html中定义的属性很少了；主要有标识属性用来标识和区分不同的标签；与内容有关的属性，如src、href、type等简单的属性；与样式有关的属性，基本都在CSS选择器中定义；
跟各种标签样式有关的属性，==就对应于一个属性style，style的值是一个字符串，可以将各种样式属性按照样式表大括号内的样式写在一个字符串中。==目前主要定义在CSS选择器中；想要做好网页设计要对各种标签的样式属性很熟悉，比如p标签，内部是文字段落，那么就有段落有关的属性，行高、行间距、对齐方式等，字体有关的属性，字体大小、倾斜、加粗、字体样式等等。

2.2、标识属性

每个标签都可以定义，用来标识和区分各个标签，为CSS选择器和JavaScript中的API函数调用提供一个标识信息；

class属性：标识一类，不同标签的class名可以相同，代表同一类，相同class属性的标签具有相同的属性，定义在CSS选择器中或通过JavaScript处理，才有意义；而且，一个标签的class属性可以有几个不同的value值；
id属性：作为各个标签的唯一标识标签；各个标签的id属性不能有相同的value值；（CSS对相同ID的多个标签的处理是未定义的，样式可能会应用于该ID的所有标签，也可能都不应用，等等）。
name属性：另外一种标识属性，主要用于JavaScript的API函数调用，跟class属性一样，不同标签的name属性值可以相同；name标签实际上提供了一种快速访问的方式，如果name值不与原生标签重名，在JS中我们可以直接通过document.nameValue来访问元素。name属性只适合于a标签、form标签、img标签等，除了表单元素，现在已经不常用。

2.3、input标签属性再说明

type属性：定义表单的类型，这个input中必须定义的属性；
name属性：用来标识input标签；如单选表单的各选项的name值都是相同的，这就保证了这个表单可以通过name来提取，从而保证只提取一项；而多选表单的name就不同，我们可以通过不同的name值提取多个选项的内容；
value属性：定义按钮上显示的文字，只有type为submit和reset时才会有这个属性；其他情况下，它代表输入的值
checked属性：定义选择性表单的默认选择项；

2.4、table标签属性说明

align属性：定义表格中内容的对齐方式
border属性：定义表格边框的形式、宽度等属性
cellpadding属性：表格内部内容与边框之间的距离
cellspacing属性：表格之间的距离
bgcolor属性：表格的背景颜色
width：表格的宽度
colspan和rowspan跨列居中和跨行居中
这些属性都可以在CSS中设置

CSS

1、CSS的引入、语法格式及规则

1.1、引入方式

虽然有以下三种方式，但实际上只建议使用第三种方式；虽然《web前端开发》给出的效果优先级是：
行内引入>内嵌引入>文件链接引入，但实际上文件链接和内嵌引入的优先级是相同的，主要看先后顺序，后面引入的会覆盖前面引入的，然而实际使用中，我们建议只使用文件链接引入，所以，这个优先级顺序并不重要。

行内引入：直接在html标签内写入style=“property:value;”，property:value対，可以添加很多対；
内嵌引入：在html的head标签范围内，用一对style标签引入，在标签范围内用property:value；来表示。
文件链接引入：格式如下，然后在指定路径的文件内定义css选择器。
<link rel="stylesheet" href="css文件的路径" type="text/css">

1.2、语法格式、选择器类型及优先级规则

语法格式

选择器语法模板有两种，但选择器和多选择器；多选择器其实就是一种简化形式，方便修改多个属性相同的模块；注意多选择器中，选择器之间用","隔开

p{property:value;}
p, h1{property:value;}

选择器类型

选择器的基本类型有三种：元素选择器、类选择器和id选择器；选择器名字分别对应html中元素标签、class属性的值、id属性的值；具体格式如下：
嵌套的选择器：
- 子代选择器：两个选择器名称之间用空格间隔，而他们在html标签中属于包含关系，两者是上面三种选择器的任意一种；此时设置属性影响范围是这个子代标签范围内的所有元素；
- 子元素选择器：两个选择器名称之间用>间隔，而他们在html标签中属于包含关系，两者是上面三种选择器的任意一种；此时设置属性影响范围是这个子代标签范围内的第一级的元素，此标签范围内再深一级标签内的元素不受影响；

/* 元素选择器 1分*/
p {property: value;
}/* 类选择器 10分*/
.class {property: value;
}/* id选择器 100分*/
#id {property: value;
}/* 子代选择器 101分*/
div #id {property: value;
}/* 子元素选择器 2分*/
ul>li {propery: value;
}

选择器属性的优先级

当属性的设置有冲突时，应按照下面的规则，确定各选择器的得分，得分最高的，优先级最高；
上面例子中各选择器的得分已标识，请参考。

元素选择器得1分；
类选择器得10分；
id选择器得100分；
在嵌套选择器（子元素选择器或子代选择器）中，选择器的得分是嵌套各级选择器得分的和；
在多选择器中，各选择器的得分是单独计算的；
在得分相同的情况下，后面定义的属性值会覆盖前面的。

2、常用属性

2.1、颜色属性

color文字颜色和background-color背景颜色两个属性；
颜色有多种表示方法：
- 名称表示法：gray、black、white等，但只能表示常用的几种
- grba表示法：grb(0~ 255 , 0~ 255, 0~ 255, 0~1)；绿红蓝三色加透明的表示法，css3才支持透明的
- #16进制表示法：如color:#ff00ff

2.2、font属性和text属性

font属性：font: style(italic) weight(bold) size(14pt) family(“宋体”)；要注意顺序，也可以单独设置各属性。
text属性：
1. align：对齐方式left、right、center、justify
2. text-decoration：主要用于下划线，underline下划线、overline上划线、line-through贯穿、blink闪烁、none没有下划线；在选择了下划线时，还会有下划线线型、宽度、颜色等设置。
3. text-indent：缩进设置，设置value跟size相同
4. line-height：行高，value跟size的类型相同；可以通过设置行高跟div的高度相同，从而实现一行在div中居中；
5. word-spacing（单词间距）和letter-spacing（字符间距）跟上面size的设置一样。
6. word-transform：大小写转换；capitalize首字母大写、uppercase大写、lowercase小写
7. text-shadow：设置文本阴影效果，是CSS3的功能；text-shadow: 2px 2px 2px color;四个属性值分别是向右偏移、向下偏移、模糊宽度、颜色；
8. text-overflow：设置文本超出显示范围的操作；hidden，多余部分不显示；还有其他几种设置的value值；
9. word-wrap：设置长单词的折叠；其中break-word就是可以折叠单词的意思；
@font-face选择器来设置特殊字体；对于web中文本字体的显示，我们是依赖于用户系统中fonts文件夹中的字体，而在我们使用特殊字体时，很可能用户的fonts文件夹中没有，此时我们通过@font-face选择器来设置这种字体，从而使用户可以从网站文件夹中得到这种字体，设置方式有三步：

/* 1.在网站文件夹中设置fonts文件夹，并在其中放置我们需要的字体；
不同web浏览器支持的字体格式不同，为了兼容性，要放置多种格式 *//* 2.设置如下的选择器，主要内容就是字体名称及路径 */
@font-face {font-family: Specfont;src: url("路径/文件名1"), url("路径/文件名2");
}/* 3.在我们需要使用特殊字体的元素的选择器内，设置font-family:Specfont;

切实用好这一功能，还要对字体设置等有一些了解，还没有学习相关知识，就不展开了。

2.3、背景设置

背景属性有很多，我们可以使用一个background的属性，但value值要按照下面顺序来写，下面介绍常用的几种属性设置的含义及取值，例子如下：

background-repeat：背景图片的重复方式；repeat全平面重复、repeat-x在水平方向重复、repeat-y在竖直方向重复、no-repeat不重复；
background-attachment：背景图片是否随着滚轮移动；scroll随滚轮移动；fixed固定不移动；
background-position：背景图片的位置；既可以通过x、y坐标设置，也可通过left、right、top、center、bottom等位置说明来设置。

div {background: green url(../image/bg2.jpg) no-repeat fixed top;background-color: #161616;/* 背景颜色 */background-image: url(../image/bg2.jpg);/* 背景图片 */background-repeat: repeat-x;/*背景图片的重复方式，在x轴方向重复 */background-attachment: scroll;/* 背景图片随着滚轮移动 */background-position: 10pt 12pt;/* 背景图片的位置 */
}

2.4、超链接属性的设置

超链接作为一种行内块元素，其属性也没有什么特别的，也无非是font、text以及修饰块的属性，这也不是我们这里讨论的问题；我们这里讨论的是超链接的四种伪类选择器，代表超链接的四种不同状态：

a:link{普通的、未被点击的超链接}；
a:visited{已被访问的超链接}；
a:hover{鼠标指针位于超链接上方悬停}；
a:active{超链接被点击时}；
注意：这四个伪类选择器的定义顺序要按照上面的顺序

2.5、List属性的设置

设置list的属性，主要针对list开始处的标志及标志的位置；

list-style-type属性，主要有以下形式：
1. none：无标识；
2. disc、circle、square等各种形状；
3. decimal：阿拉伯数字；
4. upper-alpha、lower-roman等字母形式；
list-style-image属性：通过url(“相对路径/文件名”)设置作为列表标识的图片；此属性会覆盖type中设置的属性值；
list-style-position：有inside和outside两种取值；表示标志的显示是否在当前的区域块内；选用inside会有更明显的缩进。

2.6、表格的属性

表格主要有下面的属性，其中height、width、border是块元素的通用属性；而最后的tr:nth-child(odd)伪类选择器有点特色，是为了展示好看的表格样式，间隔显示。

table,
tr,
th,
td {/* border属性：宽度、线型、颜色、是否合并，这样就不会让表格边框内有空隙;设置了collapse属性，border的宽度自动变为1px或是没有宽度？*/border: 2px solid steelblue;border-collapse: collapse;
}
table {/*表格的大小*/height: 100px;width: 400px;
}
/* 奇偶选择器，用来做表格的交替显示的效果；选择器函数中参数可以用数字，表示指定的行的颜色；
也可以使用odd、even奇数和偶数这样让奇数行和偶数行的颜色不同；
数字的优先级高于上面odd和even；按下面设置，第三行是绿色而不是黄色*/
tr:nth-child(3) {background-color: green;
}
tr:nth-child(odd) {background-color: yellow;
}
tr:nth-child(even) {background-color: greenyellow;
}

3、CSS布局——盒模型布局

CSS布局主要指块元素的布局，盒模型是描述块元素的常用方法，任何块元素都可以按照盒模型的属性来定义；但html中常用的是div这个标签来做盒模型定义；这就是div+CSS布局的方式。

3.1、盒模型的结构

下图是一个盒模型的结构，一个盒模型的大小由这四部分总的大小来决定；搞清楚这个结构类型也是解决初学者经常遇到的做布局差几个px问题的根本；

content是内容部分，我们在盒模型中放置的内容不会超出它的边界；我们设置的height和width属性实际上是定义的它的大小；
padding是表框与内容之间的空隙；border是边框；margin是边框与其他盒模型之间的距离；这三个结构的形状是相似的，都是一个大矩形中间抠掉一个小矩形；定义他们的大小是通过定义四个边的厚度来实现的；它们三者的属性实际上是基本相同的。
特别注意：==上下相邻两个盒模型的margin的宽度，是它们两个中宽度大的那个margin的宽度，而不是两个margin宽度的和；左右相邻两个盒模型的margin的宽度，是两个margin宽度的和；==这一点有时也会造成模型布局对不齐的问题。

盒模型属性的设置

下面的div选择器定义了上面提到的关于盒模型结构各部分大小的属性；当然盒模型还可以定义其他作为块的属性（背景、背景图片、颜色等），也可以定义放在其中的其他元素的属性；下面我们主要讨论 border、margin、padding宽度设置的三种方式（以border为例，margin和padding与之相同）：

直接用border来设置：一个值，四个方向都是这个值；两个值，第一个代表上下，第二个代表左右；四个值，按上、右、下、左的顺序设置四个值；
用方位命名的属性来设置，如border-top；此时应该注意，没有设置的值为系统的默认值；如果我们只让它左边和下边有边框，应该先将边框设置为0；然后再设置这两个方向的border，见下面示例的设置：

div {/* content部分的高和宽 */height: 200px;width: 400px;/* padding宽度的设置：分别为top、right、bottom、left四个方向的宽度值 */padding: 6px 8px 10px 12px;/* border的设置，此处采用分别设置的方法(此时只设置了左边和下边的边框 */border: 0px;    /* 去掉top、right的默认宽度 */border-bottom: 2px;border-left: 2px;border: green;/* margin的设置，此处采用两个数值：第一个值为top和bottom；第二个值为right和left */margin: 2px 2px;
}

2.2、布局和定位

CSS中常用的定位方式有：文档流定位、浮动定位和层定位。

2.2.1、文档流定位

文档流定位是web浏览器中默认的定位方式，主要根据html元素的类型来进行定位；主要的元素类型分为：块元素、行内块元素和行内元素。

元素类型及其对应的特点

块元素：<div>\<p>\<h1>...<h6>\<ol>\<ul>\<table>\<form>等属于块元素；其特点如下：
1. 独占一行；
2. 可以设置盒模型的各种属性：height、width、padding、border、margin；
行内元素：<span>\<a>等属于块元素；其特点如下：
1. 不独占一行；行内布局时，元素之间有默认的间隙；
2. height、width不可设置；width就是它所含文字或图片的宽度；
行内块元素：<img>是常见的行内块元素；它同时具备行内元素和块元素的性质：
1. 不独占一行；行内布局时，元素之间有默认的间隙；
2. 可以设置盒模型的各种属性：height、width、padding、border、margin；

元素的可见性

display属性：可以通过display属性，显式地改变元素的类型。改变了此属性后，就可以按照对应样式的元素来修改了。

a{display: block;display: inline-block;display: inline;display: none;//此时元素不显示，元素也不占据位置
}

visibility属性：元素是否可见；visible元素可见；hidden元素不可见，但占据原有位置
opacity属性：元素透明度；0~1完全透明到不透明。

2.2.2、浮动定位

在上面的文档流定位方式中，通过将block改为inline-block可以解决将block元素放置在同一行内，但不是常用方式；而浮动定位主要就是为了解决这个问题的。floating定位，顾名思义是一种动态的定位方式，其定位取决于其在浮动过程中碰到的障碍物（其他floating元素和其外层块元素的边界）。

浮动定位的特点

浮动定位规则，以floating:left为例：我们将要放置的块从右下方往上浮动，直到碰到floating元素或其外层元素的边界停止；然后从右往左浮动，直到碰到floating元素或其外层元素的边界停止；此时的位置就是floating最后定位的位置；
为了更好的控制定位，又设置了clear属性；上例中如果设置clear:left，也就是左侧不能有元素；此时直接从左下方往上浮动，直到碰到floating元素或其外层元素的边界停止；此时位置就是floating最后定位的位置。

floating属性和clear属性

floating属性：可以设置left、right、none三个值；也就是向左侧、向右侧和不浮动；
clear属性：可以设置none、left、right和both四个值；也就是左侧不能有元素、右侧不能有元素和两侧都没有元素；
width属性：floating属性是解决列定位的问题，宽度必定要设置，一般块元素的默认宽度都是100%；不设置宽度就没有列布局的问题，也就不用进行floating设置了。

overflow属性

overflow属性是我们在其中布局的父元素要设置的属性，主要解决我们的元素超出其父元素高度的问题；
overflow属性有以下几个数值：此处未尝试，待补充

hidden：父元素要能够包含放置块的大小；
visible：默认值，会超出父元素块的范围；
scroll：出现滑动条；
auto：自动；

column属性

column属性主要为实现在同一个块元素中按列显示的问题；这是CSS3的属性，Firefox和Chrome都支持；主要有以下属性项：

        #columnProperty {/* 要分列对齐的块的宽度 */width: 1000px;/* 要分的列数 */column-count: 4;/* 每列间隔宽度，后面rule的宽度包含在这个gap中 */column-gap: 100px;/* 每列内容部分的宽度 */column-width: 100px;/* 列之间的间隔线，类似与border属性，但宽度包含在上面的gap中 */column-rule: 50px solid greenyellow;}

verticle-align属性

verticle-align属性定义行内元素在垂直方向上的对齐方式；主要用于行内元素和行内块元素；其主要设置值如下：

span {/*以行内最高的元素的上面对齐，还有bottom和center */vertical-align: top;/* 以父元素定义的基准线对齐 */vertical-align: baseline;/* 以上标或下标对齐super或sub */vertical-align: sub;/* 以文字的顶或者底对齐； text-top或text-bottom */vertical-align: text-bottom;}

2.2.3、层定位方式

层定位方式是方位控制性更好的一种定位方式，主要通过position属性和top、left、right、bottom等方位来定位。

position属性：
- static：默认的文档流等位方式；此时各种方位的值是不起作用的。
- fixed：固定定位方式（固定位置相对于浏览器窗口）。
- absolute：绝对定位方式，参照物：除static类型的以外，第一个父元素，不占据原位置，定位的基点是其直接父元素的content部分的四个顶点，顶点是由四个方位来决定的，如设置top和left，则为左上角；默认为左上角。
- relative：其在html文件中，参照物：html中上一个块元素（relative或absolute属性的），会占据原来的位置
top、left、right、bottom是离之前位置的距离，没什么特别的。从参照物元素的margin外边界算起；
z-index属性：确定层叠关系，数值越大，越在上面。