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