关于HTML + CSS + JavaScript学习笔记及心得总结

笔记：

相对路径：1）同一级直接写文件名 2）/下一级文件名 3)  ../上一级文件名(注意是两个点) 相对路径用 /   绝对路径用 \

标签用于定义超链接，作用是从一个页面链接到另一个·页面 链接的语法格式 文本、图像、表格、音频、视频等

链接方式： 1.外部链接 举例： 腾讯 (注意href里必须用http://开头 , target 打开窗口方式 默认为_self表示在此窗口打开， 用_blank表示在新窗口打开超链接)

2.内部链接（不需要加http://) 目录文件夹里的页面相互跳转

3.空链接 # 文本或图像

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。 （地址链接的是  文件 .exe  或者是  zip 等压缩包形式 常见为压缩包形式）   5.锚点链接：点击链接，可以快速定位到页面中的某个位置  ·在链接文本的href属性中，设置属性值为#名字的形式，如第二集 ·找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：第二集介绍

注释标签   快捷键： ctrl + /

特殊字符 空格 ; < ; > ;

                           表格标签：展示数据更为方便        单元格内的文字或者图片或者链接     ...（这是表头单元格，居中加粗显示）       ....

表格属性（一般用css来设置） align 对齐 cellpadding 文字与单元格的距离 默认为1像素 cellspacing 单元格间的距离 默认为2像素 width 宽 height高

表格结构标签 标签 表格的头部区域 标签 表格的主体区域

合并单元格 1.合并单元格方式 跨行合并：rowspan="合并单元格的个数" 跨列合并：colspan="合并单元格的个数"

目标单元格：（写合并代码） 跨行：最上侧单元格为目标单元格，写合并代码 跨列：最左侧单元格为目标单元格，写合并代码 最后删除多余的单元格）

             列表标签：用来布局更为方便

无序列表:     列表项1     列表项2     列表项3     .....

在标签里只能放标签，其他标签或者文字 是不被允许的，里可以随便放

有序列表       列表项1     列表项2     列表项3     .....

自定义列表

    名词     名词解释1     名词解释2     ..........

在标签里只能放和标签， 其他标签或者文字是不被允许的

    表单 1.表单域

2.表单控件(表单元素）

1. input 输入表单元素

(单标签)

radio 单选框  checkbox 复选框 

·name 和 value是每个表单元素都有的属性值， 主要给后台人员使用

·name表单元素的名字， 要求单选按钮和复选框要有相同的name值

单选按钮和复选框可以设置checked 属性， 当页面打开的时候就可以默认选中这个按钮 单选框只能有一个，复选框可以有多个

maxlength属性 表示输入的最多字符，一般较少使用

2. select 下拉表单元素 语法：     选项1     选项2     选项3         .......

3. textarea 文本域元素（多行文本的输入） 语法： 文本内容

3.提示信息

     css（美化网页，布局页面)

css语法规范 选择器+一条或多条说明

font-size:数字px;(字体大小)

css代码风格（规范）：

1.样式格式书写

推荐使用展开式风格，比较直观 h3 {    color:pink;    font-size: 20px; }

2.样式大小写 一般用小写

3.空格规范 · 属性值前面，冒号后面，保留一个空格

·选择器（标签）和大括号中间保留空格

选择器： 基础选择器 和 复合选择器

1.基础选择器 由单个选择器组成 包括 标签选择器 类选择器 id选择器 通配符选择器

·类选择器 语法：

  ·类名 {     属性1： 属性值1；     ......

  } （不要用纯数字，中文等命名，一般用小写字母命名）

用class调用 格式为class="类名" （样式点定义，结构类（class）调用,开发最常用）

·id选择器 语法 #名字 {     属性1： 属性值1；     ......

  } 用id调用 （id选择器只能调用一次）

·通配符选择器(改全部标签）

* {     属性1： 属性值1；     .......

}

字体属性：

例如： h2 {     font-family:'微软雅黑'；（文字系列，但是更提倡用英语写）

    font-size: 20px;(文字大小，不同浏览器可能默认显示的字号大小不一样 ，我们尽量给一个明确值大小，不要默认大小）

    *font-weight: normal(正常的字体）（400） ； （等价于font-weight:700；实际开发更提倡使用数字进行加粗或变细，注意不加单位）     bold 加粗     bolder 特粗体     light 细体     *

    *font-style: nomal;文字样式     italic 倾斜         *

}

可以同时用多种字体比如font-family:Arial,'Microsoft Yahei'; 一般情况下，如果有空格隔开的 多个单词组成的字体，加引号

可以给body指定整个页面文字的大小，标题标签比较特殊，需要单独 指定文字的大小

字体复合写法：

格式： font: font-style font-weight font-size/line-height font-family; 例如： font：italic  700 16px 'Microsoft yahei'; (顺序不能颠倒) 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性 ，否则font属性将不起作用

*css文本属性 定义文本的外观，比如颜色、对齐文本、装饰文本、文本缩进、行间距等

1.文本颜色 表示                                   属性值 预定义的颜色值                  red,green,blue 等 16进制    (常用)           #FF0000,#FF6600,#29D794 RGB代码           rgb(255,0,0)或rgb(100%,0%,0%)

2.对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式 left:左对齐 right:右对齐 center:居中对齐

3.装饰文本 text-decoration

属性值                        描述

none            默认。没有装饰线（最常用，可用于取消链接自带的下划线） underline        下划线。链接a自带下划线（常用） overline        上划线。（几乎不用） line-through          删除线。（不常用）    

 4.文本缩进 text-indent 属性用来指定文本的第一行缩进， 通常是将段落的首行缩进。                     格式： text-indent: 20px(取负值的时候往左缩进); text-indent: 2em; em是一个相对单位，就是当前元素1个文字 的大小，如果当前元素没有设置大小，则会按照父元素的1个文字的大小 *line-height属性用于设置行间的距离。可以控制文字行与行之间的距离 行间距包括上间距、文本高度、下间距。

*样式表 外部样式表

引用外部样式表分为两步 1.新建一个后缀名为.css的样式文件， 把所有css代码都放入此文件中。 2.在HTML页面中，使用标签引入这个文件

*css复合选择器（基础选择器的组合）

复合选择器包括后代选择器（又称包含选择器，重要）、子选择器、并集选择器、伪类选择器

1.后代选择器 元素1 元素2 { 样式声明 } 元素1是父级，元素2是子级，最终选择的是元素2 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可

2.子选择器，只能选择作为某元素的最近一级子元素。 简单理解就是选亲儿子元素 格式： 元素1>元素2 { 样式声明 }

3.并集选择器 并集选择器可以选择多组标签，同时为他们定义相同的样式。 通常用于集体声明。

格式： 例如： 元素1，元素2 { 样式声明 } 上述语法表示选择元素1和元素2.                

心得体会：通过一周的前端的学习，初步掌握一些写网页结构并美化网页的方法，感觉不难学，就是繁琐复杂。。