笨鸟晚飞
笨鸟晚飞

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、基本语法结构及标签

  1. 类似于脚本的开始标签!DOCTYPE html，这条语句是为了兼容低版本的IE浏览器，而作的一个HTML5标识；整个文件结构在html标签内，html又分为head标签和body标签部分；
  2. head标签内：
    • title标签，网页显示时的标签；
    • meta标签，设定元属性，主要charset=“UTF-8”；
    • link标签文件外引入css文件，主要有ref、href和type三个属性要设置；
    • script标签，引入JavaScript文件；
    • type标签，可以在type标签之间引入css文件内容；
  3. 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、属性概述

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

2.2、 标识属性

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

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

2.3、input标签属性再说明

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

2.4、table标签属性说明

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

CSS

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

1.1、引入方式

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

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

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

语法格式
  • 选择器语法模板有两种，但选择器和多选择器；多选择器其实就是一种简化形式，方便修改多个属性相同的模块；注意多选择器中，选择器之间用","隔开
p{
     property:value;}
p, h1{
     property:value;}
选择器类型
  1. 选择器的基本类型有三种：元素选择器、类选择器和id选择器；选择器名字分别对应html中元素标签、class属性的值、id属性的值；具体格式如下：
  2. 嵌套的选择器：
    • 子代选择器：两个选择器名称之间用空格间隔，而他们在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、颜色属性

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

2.2、font属性和text属性

  1. font属性：font: style(italic) weight(bold) size(14pt) family(“宋体”)；要注意顺序，也可以单独设置各属性。
  2. 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就是可以折叠单词的意思；
  3. @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值要按照下面顺序来写，下面介绍常用的几种属性设置的含义及取值，例子如下：

  1. background-repeat：背景图片的重复方式；repeat全平面重复、repeat-x在水平方向重复、repeat-y在竖直方向重复、no-repeat不重复；
  2. background-attachment：背景图片是否随着滚轮移动；scroll随滚轮移动；fixed固定不移动；
  3. 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以及修饰块的属性，这也不是我们这里讨论的问题；我们这里讨论的是超链接的四种伪类选择器，代表超链接的四种不同状态：

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

2.5、List属性的设置

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

  1. list-style-type属性，主要有以下形式：
    1. none：无标识；
    2. disc、circle、square等各种形状；
    3. decimal：阿拉伯数字；
    4. upper-alpha、lower-roman等字母形式；
  2. list-style-image属性：通过url(“相对路径/文件名”)设置作为列表标识的图片；此属性会覆盖type中设置的属性值；
  3. 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问题的根本；

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

HTML和CSS——中国大学mooc上web开发笔记_第1张图片

盒模型属性的设置

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

  1. 直接用border来设置：一个值，四个方向都是这个值；两个值，第一个代表上下，第二个代表左右；四个值，按上、右、下、左的顺序设置四个值；
  2. 用方位命名的属性来设置，如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元素的类型来进行定位；主要的元素类型分为：块元素、行内块元素和行内元素。

元素类型及其对应的特点