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

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选择器。
   <link rel="stylesheet" href="css文件的路径" type="text/css">

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

语法格式

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

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

选择器类型

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

/* 元素选择器 1分*/
p