我的前端学习之路——第三天：表单和css基础

 学习所用编辑器为VS Code

学习回顾

1、HTML的概念

2、HTML的基础语法

3、常见标签的使用

 路径

绝对路径：三种

这里的级是指html文件和目标文件的存放位置，后面为使用方法

        同级找同级：目标文件的名字.后缀名

        上级找下级：目标文件的文件夹/目标文件的名字.后缀名

        下级找上级：../目标文件的名字.后缀名

相对路径：

        当前文件含有盘符的路径

        注意：不要使用，因为服务器上没有盘符路径

常用标签

HTML+CSS 实现页面布局 div+css

div：大盒子，用来包裹其他盒子作为页面布局

span：小盒子，用来包裹一段文字或者一个文字作为页面布局

标签嵌套

1、a和img的嵌套        a>img

2、p和h的嵌套        p不能嵌套h，h可以嵌套p，p和p不能嵌套

3、div和span        div可以嵌套span；div可以嵌套所有，它是块级元素

4、加粗 b/strong、倾斜 i/em        任意嵌套

表格

表格的使用

        以前是用来做布局的(带有计算属性：会根据内容自动设定宽高大小)。现在只做数据展示

表格的标签

        table>tr>td

                table        整个表格

                tr        行

                td        列

属性：

        width/height/border        宽度/高度/边框，设置html属性建议给父级元素添加

        bordercolor/bgcolor        边框颜色/背景颜色

        cellspacing/cellpadding      单元格和单元格之间的间距/单元格与内容之间的间距

表格中的对齐方式

        1、水平方向对齐

                align：left、right、center

                作用范围        产生效果

                table               控制整个表格在页面中居中显示

                tr                     行内文字居中显示

                td                    单元格文本居中

        2、垂直方向对齐

                valign：top、bottom、middle

                table               没有效果

                tr                     行内垂直方向文本居中

                td                    单元格内列方向居中

合并单元格

        选择几个单元格，属性为数字

        1、colspan         列合并

        2、rowspan        行合并

        原则：跨行合并、跨列合并

表单

作用：收集用户信息

1、表单框 from是一个盒子

        属性：name        表单框的名字

                  action        后台地址

                  method      提交方法get/post（区别就是携带参数的区别）

        网址最后 ？ 后面接的就是参数

2、表单控件 input

        属性：name        表单控件的名字

                   size            表单控件的宽度大小（指字符数）
                   maxlength  最大长度 约束用户输入的字符数

3、type和value的使用（重点）

        type类型有很多属性值，不同的属性值有不同含义。默认为text，表示为文本输入框，value作提示文本

        type的属性值：

               1) text 文本输入框 value在text里面表示提示文本。提示文字占位置，用户输入时需要手动删除

                2)password 密码 HTML5新增placeholder 提示文本 不占位置

                3)radio 单选 默认多个都可以被选中(添加一个name属性，将多个input设置成相同的)

                4)checkbox 多选

4、功能按钮

        submit        提交

        reset           重置

        button         空按钮，需要绑定JS事件

注意：

        属性和属性值相同的时候可以简写，如：

                默认选用        checked

                禁止选用        disable

css基础

概念：

        css：层叠式样表 美化页面
    一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化及个性设置

css语法组成：

        选择器{声明} ==>选择器{属性1:属性值1;属性2:属性值2}

        选择器：需要修饰的对象 HTML结构标签

        声明：选中的对象 需要用什么属性进行修饰

                声明包含属性和属性值

总结：

        HTML属性和css语法写法是不一样的

        声明一定要写在大括号内部

        声明分为属性和属性值，之间用冒号

        属性值不要引号

        当一个对象有多个声明时不区分前后顺序,声明之间加分号

css样式表的建立

css样式表的创建方式：行内样式表、内部样式表、外部样式表

1、行内样式表的创建

        需要在标签的内部创建

        书写一个style属性

        属性值就是css语法中的声明

2、内部样式表

        需要在head区域内创建

        创建style标签（不是属性）

         在style标签中书写css语法

3、外部样式表

        在外面创建一个后缀名为css的文件

         在css文件中写css语法

         使用link标签引入

                语法<link rel="stylesheet" href="css文件">

拓展：外部样式表的引入，除了link还可以使用@import

        在head区域内建立一个style标签

        在标签内书写@import url('相对路径')

link和@import区别

        link引入样式表时，结构和样式同时加载

        @import 先加载结构 后加载样式表

样式表的优先级

浏览器审查中的常见错误

        浏览器中黑线划掉的属性，表示属性冲突，其他地方的属性优先级更高

        浏览器内黄色感叹号，表示单词写错了

结论：

        行内样式最高，内部和外部看书写顺序，后面的更高

        就近原则，靠近修饰对象越近，优先级越高

总结：三种样式表如何使用？

        行内样式表由于优先级最高 很少使用

        结构和样式分清楚 利于后期维护和更新迭代

        内部样式表 案例

        外部样式表最常用 工作中

css的选择器

css语法组成： css选择器{属性:属性值}

css选择器：标签选择器、ID选择器、class选择器、包含选择器、群组选择器、通配符选择器

1、标签选择器

        HTML标签作为选择器

2、ID选择器

        在标签里面添加ID属性 属性值取名规范和站点一样

        在样式中使用 #属性值名字{声明}

        作用：通常在一款区域只用一次，表示网页的外围结构

3、class选择器

        在标签中添加class属性

        在样式表中 .class属性值名字

        作用：通常选择到一类相同的对象修饰

4、包含选择器

        语法：父级选择器 子级选择器

        作用：通过父级选择自己        比如列表ul>li

5、群组选择器

        语法：选择器1，选择器2...{相同的声明}

        选择到相同的声明的选择器

6、通配符

        固定用法 *{margin:0;padding:0} 清除浏览器的默认间距

        * 表示选择页面中的全部标签

        建议放在样式表的最上方