3_表单&CSS基础

一、超链接标签的使用

超链接标签的使用:用户点击标签可以发生跳转

1. 标签名称：a

2. 默认样式

   字体有颜色(颜色会进行改变)

   • 默认有下划线
   • 鼠标指针悬停显示手型(引导用户点击)

3. 属性

   • href 表示连接地址
   • title 提示文本
   • target 控制跳转页面的打开方式
   • self 表示覆盖原窗口
   • blank 表示打开新窗口

4. 拓展

   • 在头部文件中书写 base标签
   • 在标签内书写属性即可

二、div&span标签

div:没有具体的含义 用来作为网页的盒子实现布局
span:没有具体的含义 包裹文本内容

三、常见标签的嵌套关系

1. 常见的固定搭配：ul>li ol>li dl>dt+dd

2. b>i i>b a>img

3. 注意点：h和p标签之间的嵌套

   • p标签不可以嵌套自己
   • h标签不可以嵌套自己
   • p不可以嵌套h
   • h可以嵌套p

4. 下周二元素类型：块级元素（div）可以嵌套行内元素（span）

四、表单的创建

表单标签的创建和使用

1. 表单的作用:收集用户的信息

2. 表单的创建:form（不要写成from)

3. 表单框的属性

   action:表示发送数据的地址
   method:表示提交表单框信息的方法 GET/POST
   get和post区别：相对而言post比get安全，在地址栏中不会携带参数
   ？表示发送数据成功 后面携带的都是参数

表单控件的使用:填写信息

1. 标签名称:input

2. 表单控件的属性

   • type类型 表示可以修改不同的作用
     • text 默认值 表示文本输入框
     • password 密码框
   • value 提示文本/信息 在不同的type属性值中作用也是不同的 占位置的需要手动删除
   • placeholder HTML5中新增的属性 提示文本 不占位置用户输入的时候会自动消失
   • name 数据发送时候 绑定用户的信息

3. 表单中的功能按钮(必须要放在form标签内)

   • submit 提交按钮
   • reset 重置按钮

4. 空按钮:没有任何的作用需要绑定JS事件

   • input(type=“buutton”)
   • button标签 默认提交表单

五、CSS的语法组成

CSS基础知识

1. 作用:修饰美化网页

2. 语法组成:选择器{声明}/选择器{属性1:属性值1;属性2:属性值2}

   • 选择器:修饰的对象
   • {声明}包含属性和属性值
   • 属性和属性值之间需要使用冒号相连
   • 当有多个声明的时候,每个声明之间需要使用分号隔开

3. 生活中案例:志强同学身高160cm,体重200kg,长相千锋坤坤

   • HTML语法: <小强同学 身高=“160cm” 体重=“200kg” 长相=“坤坤”></小强同学>
   • CSS语法: 小强同学{身高:180cm;体重:200kg; 长相:坤坤}

六、CSS样式表的创建

cSS样式表的创建方式:行内、内部、外部
语法组成:选择器{属性:属性值}

一:行内式样式表创建

1. 需要在标签内部创建样式表
2. 书写style属性,在属性值里面书写声明即可

二:内部样式表的创建

1. 需要在头部文件中创建style标签
2. 在标签内书写规范的css语法即可

三:外部样式表的创建

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

2. 在文件中书写规范的css代码即可

3. 需要引入外部的样式表

   • 第―种方式(常用): link标签
   • 第二种方式(了解):
     • 需要在头部中创建style标签
     • 在标签里面书写@import ur1(·路径")

4. 注意外部引入的区别

   • link标签引入的时候HTML和CSS同时加载
   • @import方式引入先加载HTML后加载css
   • @import方式在后期学习模块化开发按需引入很常用

四:练习样式表的创建

• 有一个div盒子
• 需要使用是那种样式表同时给当前div添加样式

观察最终文本的字体颜色
​思考三种样式表的使用场景

七、样式表的优先级

思考1:三种样式表的使用场景

• 行内样式表 使用的很少
• 内部样式表 作用于当前文件 案例
• 外部样式表 作用于多个文件 项目 维护方便

思考2:有一个div盒子
需要使用是那种样式表同时给当前div添加样式 观察最终文本的字体颜色

• 行内样式表的优先级最高,外部和内部取决于书写顺序在下面的优先级更高=>就近原则

浏览器常见的错误提示

1. 黑色实现划掉属性:表示属性有相同的优先级高的把优先级低的给覆盖了
2. 黄色的三角形和白色的感叹号:表示当前css代码写错了

八、选择器的概念

选择器:选中的对象
网页布局中国有很多相同的标签，为了区分标签从而设置不同的样式所以给标签添加不同的名字

选择器分类

1. 基本选择器
2. 层级选择器

九、基本选择器的使用

基本选择器的分类:标签、class、id、通配符、群组选择器

—.标签选择器

1. 语法:可以把HTML中的所有标签看成是选择器进行选择修饰
2. 常见的标签选择器:div、p、span、ul、li、ol…

二:id选择器

1. 语法

   • 需要在标签内添加id属性和属性值
   • 在样式表中通过#id属性值{}

2. 作用:在网页布局中通常用来表示网页的最外围结构,建议在一块布局中只使用一次

三:class选择器(类选择器)

1. 语法

   • 需要在标签内添加class属性和属性值
   • 在样式表中通过.class属性值{}

2. 作用:没有强制的要求 可以用来设置一类或者是单个需要添加样式的声明

四:通配符(选择到页面中的所有标签)

1. 语法:*{margin: 0;padding:0}内外边距(盒模型)
2. 作用:页面布局中浏览器和标签都是有默认间距的 8px

五:群组选择器

1. 语法:选择器1,选择器2,选择器3{声明}
2. 作用:选择到相同声明的选择器放在一起书写 简写代码

十、层级选择器的使用

层级选择器的使用:后代选择器(包含)\子级选择器、相邻一个兄弟、相邻全部兄弟
一:后代选择器(包含选择器)

1. 语法:父级选择器子级选择器{声明}
2. 作用:可以通过父级元素选择到相对应的子级选择器

二:子代选择器

1. 语法:父级选择器>子级选择器
2. 作用:选择到父级元素下面的直接子级元素爷爷的直接孩子

三:相邻一个兄弟

1. 语法:兄弟标签+下一个相邻兄弟
2. 作用:表示通过哥哥选择到后面的一个兄弟

四:相邻所有兄弟

1. 语法:兄弟标签~后面所有相邻兄弟
2. 作用:表示通过哥哥选择到后面的所有兄弟

需求:有一个div标签通过给div标签设置id class标签 包含等选择器进行设置样式
问:最后会显示哪个选择器中的样式?

十一、CSS的权重

需求:有一个div标签通过给div标签设置id class标签
包含等选择器进行设置样式间:最后会显示哪个选择器中的样式?

权重:表示选择器的使用优先级
在css语言中可以使用四位数字表示权重0000

1. 标签选择器:0001
2. class选择器:0010
3. id选择器:0100
4. 行内样式表:1000
5. 通配符:0000
6. 群组选择器:根据情况各自计算#name, .name{}
7. 后代选择器:相加ul li{}

css的中文翻译:层叠样式表

1. 什么是层叠性:当修饰的对象有多个选择器的时候可以选择不同选择器中的属性
2. 当属性相同的时候会根据权重进行选择
3. 当属性不同的时候会进行样式的叠加

十二、PS软件的基本使用

一:如何从浏览器中拿到自己的首页仿写图片

1. 火狐浏览器
2. 360浏览器

二:ps软件的基本设置

1. 如何把设计图放在ps中进行切图

2. 如何把设计图放大缩小

   • ctrl+ +/-
   • alt+鼠标滚轮
   • ctrl+k常规下面有用滚轮缩放

3. 调出标尺 ctrl+r

4. 量取盒子的宽高大小

   • 点击左侧菜单栏的第二个按键选择矩形选框工具
   • 选择范围之后点击顶部工具栏的窗口下面信息(F8/FN)
   • 在ps中默认的单位是厘米需要把厘米修改为像素
   • ctrl+k -单位与标尺- cm => px

5. 如何切图

   • 点击左侧菜单栏的第5个右键选择切片工具
   • 直接拖拽鼠标进行选择

6. 如何保存切图

   • 左上角点击选择web和所有的设备格式
   • 存储的时候会默认生成一个images文件夹
   • 需要选择"所有的用户切片”

7. 完成以上操作之后选择顶部的视图下面清除切片和辅助线