首页 前端知识 【学习笔记】前端三件套——HTML和CSS

【学习笔记】前端三件套——HTML和CSS

2024-08-12 10:08:31 前端知识 前端哥 273 165 我要收藏

第1章 html和css

1.1 什么是html+css

它们是两种编程语言,一般情况下它们需要搭配使用,是作为网站开发的基础语言。
  • 网站的编程语言:代码经过浏览器编译之后,变成网站
  • 网站是由很多的网页构成的
    • 网站  30网页  .html
    • 电视剧  30集  .mp4
  • 鼠标右键:查看网页源代码
  • 保存:ctrl+s
  • 截切:ctrl+x
  • 全选:ctrl+a
  • 复制:ctrl+c
  • 粘贴:ctrl+v

1.2 编辑器 vscode

VS Code,全称visual studio code,来自微软,是一个开源的、基于Electron的轻量级代码编辑器。
  • 软件下载地址:https://code.visualstudio.com/
  • 插件安装:
    • 中文包:Chinese (Simplified) Language Pack for Visual Studio Code
    • 浏览器预览页面:open in browser
    • 浏览器预览页面:View In Browser
    • 格式化代码:Beautify
  • vscode的基本操作:
    • 打开文件夹:文件-打开文件夹;手动拖动文件夹到vscode
    • 打开文件
    • 创建文件
    • 创建文件夹
    • 修改文件名
    • 保存文件,设置:文件->自动保存
    • 快捷键:
      • 保存:ctrl+s
      • 截切:ctrl+x
      • 全选:ctrl+a
      • 复制:ctrl+c
      • 粘贴:ctrl+v
      • 撤销:ctrl+z
      • 前进:ctrl+y
      • 快速复制一行:shift+alt+↓
      • 快速移动一行:alt+↓或↑
      • 向后缩进:tab
      • 向前缩进:shift+tab
      • 多光标:alt+鼠标左键
      • 选中相同元素的下一个:ctrl+d
      • 快速注释:ctrl+/
      • 查找替换 ctrl+f
    • 自动换行设置:查看-自动换行
    • 文字大小:文件--首选项--设置(文字大小、word wrap)
    • 皮肤切换:文件--首选项-主题
    • 删除文件
    • 快速回到文件夹

1.3 chrome浏览器(谷歌)

谷歌浏览器(google chrome)是一款可以让您更快速、轻松且安全地使用网络的浏览器。 了解:市场上有哪些常用的浏览器,市场份儿怎么样,了解五大浏览器?
  • 谷歌浏览器下载:https://www.google.cn/chrome/
  • 浏览器市场份额:https://baijiahao.baidu.com/s?id=1698991311590951436&wfr=spider&for=pc
  • 谷歌浏览器的操作
    • 切换移动端模式:F12或鼠标右键:检查
  • 了解网站开发过程
    • 需求、项目经理、老板
    • 产品:绘制原型图
    • ui设计:设计效果图的
    • 前端开发工程师(h5工程师):拿到效果图,转成网页 html
    • 后端工程师:实现页面的功能
  • 软件测试:白盒测试、黑盒测试、压力测试、回归测试
  • 运维工程师:部署项目、部署环境
  • 运营:写文章、做外链、公众号、论坛

1.4 web前端的三大核心技术

  • html:结构:房子的主体
  • css:样式:装修房子
  • javascript:行为==特效==交互,电梯,空调

第2章 html基本标签

2.1 HTML基础结构和属性

        HTML叫做超文本标记语言(英语:HyperText Markup Language,简称:HTML), 是一种用于创建网页的标准标记语言。是网页制作必备的编程语言,您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
  • 什么是超文本标记语言?
    • 超文本:文本(文字:汉字+英文字母+数字+符号)+非文本(图片、视频、音频)
    • 标记:<单词>
      • 标记==标签
      • 分类
        • 单标签:<br> 换行
        • 双标签:<h1></h1> 一级标题
      • 属性:<标签 属性="属性值" 属性="属性值">
      • 标签书写
        • 快速生成:单词+回车键
        • 标签可以上下排列,也可以嵌套组合
    • 语言:编程语言
  • 常用标记有哪些:http://www.html5star.com/manual/html5label-meaning/
  • 菜鸟教程:https://www.runoob.com/html/html-tutorial.html

2.2 HTML初始代码

每一个html页面都需要添加初始代码,初始代码就是说无论你是什么网页,都需要具备的,就是初始代码,也是网页的基础结构。
  • 快捷键方式创建初始代码:!+tab键(回车键)
<!DOCTYPE html> //文档声明:告诉浏览器这是一个html文件DOCTYPE html> //文档声明:告诉浏览器这是一个html文件
<html lang="en"> //html文件最外层的标签:包裹所有的标签。lang="en" 表示这是一个英文网站。lang="zh-CN" 代表中文网站html lang="en"> //html文件最外层的标签:包裹所有的标签。lang="en" 表示这是一个英文网站。lang="zh-CN" 代表中文网站
    <head> //存放页面头部所有的标签<head> //存放页面头部所有的标签
        <meta charset="UTF-8"> //元信息:设置网页的编码方式为UTF-8(国际编码)<meta charset="UTF-8"> //元信息:设置网页的编码方式为UTF-8(国际编码)
        <title>Document</title> //设置网页标题<title>Document</title> //设置网页标题
    </head></head>
    <body><body>
        网页内容    网页内容
    </body></body>
</html>/html>

2.3 html中的注释

注释的代码,只有在文件中看得到,但是浏览器显示不出来
<!--注释的内容-->
  • 注释的意义
    • 对开发人员的一个提示
    • 把暂时不需要显示的代码注释起来,方便后期使用
  • 注释的快捷方式
    • ctrl + / (光标停在本行即可)
    • shift + alt + a (需要先选中文本)

2.4 HTML语义化

所谓HTML语义化指的是:根据网页中内容的结构,选择合适的标签进行编写。
  • 意义
    • 在没有css的情况下,页面也能呈现较好的内容结构。
    • 利于SE0(搜索引擎优化),让搜索引擎爬虫更好的理解网页。
    • 方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
    • 便于团队开发与维护。

2.5 标题与段落

  • 标题:h标签
    • 双标签
    • 有六对:<h1></h1> …… <h6></h6>
    • 每一个网页中,只能出现一次h1标签,h1的权重最高
  • 段落:p标签
    • 双标签
    • <p></p>

2.6 文本修饰标签

  • 文本修饰标签
    • <strong> :双标签,表示强调,会对文本进行加粗
    • <em>:双标签,表示强调,会对文本进行斜体展示
    • <sub>、<sup>:下标文本、上标文本
    • <del>:删除文本
    • <ins>:插入文本

2.7 图片标签与图片属性

  • <img>:图片
    • 单标签
    • 属性
      • src:引入图片的地址(绝对路径、相对路径)
      • alt:图片损坏的时候出现的提示信息
      • title:鼠标移入图片的提示信息
      • width:图片的宽
      • height:图片的高

2.8 引入文件的地址路径

  • 相对路径
    • ./ 在路径中表示当前路径
    • ../ 在路径中表示上一级路径
  • 绝对路径
    • 某盘下面的文件路径
    • 网上的文件:https://nimg.ws.126.net/?url=http://cms-bucket.ws.126.net/2021/0809/04cccd0ej00qxjv2d003hc000sg00lcc.jpg&thumbnail=660x2147483647&quality=80&type=jpg

2.9 跳转链接

  • <a> 标签
    • 双标签
    • 属性
      • href:要跳转的地址(可以是相对路径,可以是绝对路径)
      • target:跳转新页面的打开方式
        • _self 当前页面打开,默认效果就是这个
        • _blank 新窗口打开页面
  • <base>标签
    • 单标签
    • 用于给页面所有的a标签设置页面跳转打开方式

2.10 跳转锚点

  • 效果:百度百科
  • 做法
    • 方法一:
      • #号:<a href="#one">
      • id属性:<a id="one">
    • 方法二:
      • #号:<a href="#two">
      • name属性(注意name属性是加到a标签身上的) <a name="two">

2.11 特殊符号

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

w3school:https://www.w3school.com.cn/html/html_entities.asp

2.12 无序列表

  • <ul> <li>
    • 双标签
    • <ul>是无序列表的外层容器、<li>是列表项
    • ul和li必须是组合出现的,他们之间不能有其他标签
    • 属性
      • type:https://www.w3school.com.cn/tags/tag_ul.asp
        • circle
        • square
        • disc
      • type属性真实开发很少用,基本是用css去控制

2.13 有序列表

  • <ol><li>
    • 双标签
    • <ol>是有序列表的外层容器、<li>是列表项
    • 注:有序列表用得非常少,经常都是用无序列表,无序列表可以代替有序列表

2.14 定义列表

  • <dl> :定义列表
    • <dt> :添加标题
    • <dd>: 添加标题的描述
    • 注:一般用于内容左右结构的情形

2.15 嵌套列表

列表之间可以相互嵌套形成多层级列表。

2.16 表格标签

  • <table> :表格的最外层容器
    • <tr> :定义表格行
    • <td>:定义表格列
    • <th>:定义表头
    • <caption>:定义表格标题
  • 语义化标签
    • <tHead>:包裹表格头部内容,一个表格只能出现一次
    • <tBody>:包裹表格正文内容,一个表格可以出现多次
    • <tFood>:包裹表格尾部内容,一个表格只能出现一次

2.17 表格属性

  • 图标下载:https://www.iconfont.cn/
  • 表格的属性
    • border:表格边框
    • cellpadding:单元格内的空间,内边距
    • cellspacing:单元格之间的空间
    • rowspan:合并行
    • colspan:合并列
    • align:左右对齐方式
      • left :左
      • center :中
      • right :右
    • valign:上下对齐方式
      • top :上
      • middle :中
      • bottom:下
  • 作业:

2.18 表单input标签

  • <form> :表单的最外层容器,双标签
    • <input>:表单标签,单标签,用于收集用户信息
      • 属性
        • type:不同的type展示不同的控件。如输入框、密码框、复选框
        • checked:设置选中状态
        • disabled:是否可用
        • placeholder:设置提示信息

2.19 表单相关标签

  • <form> :表单的最外层容器,双标签
  • <textarea>:多行文本框,双标签
  • <select>:下拉菜单,双标签
    • <option>:下拉列表的每一项内容
  • <label>:辅助表单,双标签
  • 作业:

2.20 表格表单组合实例

表格表单之间可以相互组合形成数据展示效果。

2.21 div与span

  • <div>:块
    • 双标签
    • div全称division,“分割、分区”的意思,div标签用于区分一个区域,相当一个局域容器,里面可以容纳标题、段落、表格、图片等多种网页标签。div里面还可以嵌套多层div,用于实现网页规划和布局。
  • <span>:内联
    • 双标签
    • 用于修饰文字,div和span都没有任何默认样式,需要配合css才行。

第3章 css常用样式

css教程:https://www.runoob.com/css/css-tutorial.html

3.1 CSS语法格式

  • 格式

选择器{属性1:值1;属性2:值2}{属性1:值1;属性2:值2}
选择器{{
    属性1:值1;属性1:值1;
    属性2:值2属性2:值2
}
  • 单位
    • px-像素
    • %-百分比
      • 注:相对于父级标签
  • 基本样式
    • width-宽
    • height-高
    • background-color:背景颜色

3.2 内联样式与内部样式

样式css的书写位置有三种:
  • 内联样式:也叫行内样式、行间样式
    • 在html标签上加上style属性来实现效果的
  • 内部样式
    • 在<style>标签内添加的样式,<style>标签写在<head>标签内部
    • 注:内部样式的优点是可以复用代码
  • 外部样式
    • 准备一个外部文件xxx.css,引入到html页面中,下个小节详细介绍

3.3 外部样式及两种写法

准备一个外部文件xxx.css,引入到html页面中。
  • <link>标签
    • rel="stylesheet"  --rel属性指定外部资源与页面的关系
    • href="css文件路径"   ----- (资源的路径可以是绝对也可以是相对路径)
  • @import
    • 写在<style>里面
    • @import url("css路径地址")  ----- (路径可以是绝对也可以是相对路径)
    • 注:不建议使用该方式,会存在一定的问题。
    • link和@import的区别(面试题):https://blog.csdn.net/z591102/article/details/105532801/

3.4 CSS颜色表示法

  • css中颜色的表示方式:
    • 单词表示法:开发当中用得不多
    • 十六进制表示法:要用软件吸取颜色值,最常用的写法
      • 简写:#aabb66-#ab6
    • RGB三原色表示法
      • rgb(x,x,x) x:0-255
  • 颜色名称查询:https://www.cnblogs.com/xmm2017/p/8441124.html
  • 颜色提取工具:photoshop

3.5 背景样式

css背景样式:
  • background-color:背景颜色
  • background-image:url("图片路径") :背景图片
    • 默认情况,如果图片小于块的区域,背景图会平铺整个块,水平和垂直都会平铺
  • background-repeat:背景图的平铺方式
    • repeat-x :x轴平铺
    • repeat-y :y轴平铺
    • repeat :默认方式,就是x和y轴都平铺
  • background-position :背景图的位置
    • 单位
      • 百分比
      • 像素
      • 单词
        • 水平方向:left(左)、center(中)、right(右)
        • 垂直方向:top(上)、center(中)、bottom(下)
  • background-attachment :背景图随滚动条的移动方式
    • scroll:默认值,跟着滚动条滚动。(此时的背景图位置是按照当前元素便宜)
    • fixed:固定不动。(此时的背景图位置按照浏览器标准)
  • background:复合写法.
    • 可以设置的属性分别是:background-color、background-position、background-size、background-repeat、background-origin(不常用)、background-clip(不常用)、background-attachment 和 background-image。
    • 各值之间用空格分隔,不分先后顺序
    • background: #00ff00 url('smiley.gif') no-repeat fixed center;

3.6 背景实现视觉差效果

3.7 边框样式

css边框样式
  • border-style:边框样式
    • solid :实线
    • dashed:虚线
    • dotted:点线
  • border-width:边框大小
  • border-color:边框颜色
    • 注:针对某一边需要单独设置:border-left-color,中间单词写方向:left right top bottom
  • border: 1px solid red;复合写法,不分先后顺序

3.8 边框实现三角形

3.9 family字体类型

  • font-family:字体类型
    • 英文字体:Arial(默认)、'Times New Roman'……
    • 中文字体:微软雅黑、宋体、华为隶书……
  • 中文字体的英文名称
    • 微软雅黑:'Microsoft YaHei'
    • 宋体:SimSun
  • 衬线体和非衬线体

 

  • 注意事项
    • 设置多字体的方式
    • 引号的问题
    • 字体的显示与本地电脑字体库有关

3.10 字体大小粗细样式

  • font-size:字体大小
    • 默认大小:16px
    • 写法
      • 用px:最常用,字体大小一般是偶数
      • 用单词:很少用

  • font-weight:字体粗细
    • 属性值:
      • 单词法:normal(正常,默认效果)、bold(加粗)、bolder(更粗)、lighter(变细)
      • 数值法:100-900(实际上:100-500都是正常,500-900才是加粗)
  • font-style:字体样式
    • 属性值
      • normal:正常
      • italic:斜体(常用,能让本身具备斜体属性的字体变斜体)
      • oblique:斜体(能让不具备斜体的字体变斜体,很少用,不够规范)
  • color:字体大小

3.11 文本修饰与文本大小写

  • text-decoration:文本装饰
    • underline:下划线
    • line-through:删除线
    • overline:上划线
    • none:不添加任何样式(一般用于a标签)
    • 注:可以对一个文本添加多个装饰
  • text-transform:文本大小写(针对英文段落)
    • lowercase:转成小写
    • uppercase:转成大写
    • capitalize:首字母大写

3.12 文本缩进与文本对齐

  • text-indent:文本缩进
    • 单位:
      • 像素 px
      • 相对单位 em
  • text-align:文本水平方向对齐方式
    • 属性值:left、center、right、justify(两端对齐)

3.13 文本的行高

  • line-height:定义行高
    • 小技巧:文字垂直方向居中对齐

行高(自己理解)与行高(w3c):

默认情况下一行文本的行高分为:上间距,文本的高度,下间距,并且上间距是等于下间距的,所以文字默认在这一行中是垂直居中的。 问题:为什么行高等于容器的高度,元素在父容器中垂直居中? 因为如果行高等于容器的高度,那么相当这个容器中只有这一行文本,并且容器被这一行文本占满。而本身文字在自己的一行中是垂直居中的,所以看起来就像是在容器中垂直居中。 当文字只有一行的时候,height和line-height的值相同,能实现文字垂直方向居中。

3.14 文本间距与英文折行

  • letter-spacing:定义字间距
  • word-spacing:定义词间距(针对英文)
  • 强制折行(针对英文)
    • word-break:break-all (非常强烈折行)
    • word-wrap:break-word (不那么强烈折行)

3.15 文本与段落实现个人简介

3.16 css复合样式

  • 含义
    • 一句css样式控制一种效果,叫单一样式
    • 一句css样式控制多种效果,叫复合样式
  • 分类:
    • 无先后顺序    
      • background
      • border
    • 有先后顺序
      • font
        • 至少写两个值:size family,它们的顺序是size需要在family前面,且该两个样式需要放后面
      • 写法举例
        • weight style size family
        • style weight size family
        • weight style size/line-height family
  • 注意
    • 单一样式和复合样式不要混写
    • 如果非要混写单一样式和复合样式,则必须先写复合样式再写单一样式

3.17 ID选择器及注意事项

  • id选择器
    • css:#elem{}
    • html:id="elem"
  • 注:
    • 在一个页面中,id值是唯一性的,否则不规范(后期学习js经常用id来查找元素)
    • 命名规范,字母、数字、下划线、中划线组合(不能是数字开头)
    • 命名方式:
      • 驼峰命名法:searchButton(小驼峰,常用)、SearchButton(大驼峰)
      • 下划线法:search_button
      • 短线式法:search-button
    • 命名规范:
      • 百度:css命名规范 https://www.cnblogs.com/ipoplar/p/4539415.html
      • 参考大厂官网,如淘宝网

3.18 CLASS选择器及注意事项

  • class选择器(类选择器)
    • css:.elem{}
    • html:class="elem"
  • 注:
    • class选择器可以复用(页面中可以出现多次)
    • 可以添加多个class样式
    • 多个样式名的时候,样式优先级根据css顺序决定,不由class的属性先后顺序决定
    • 标签+类写法

3.19 标签群组通配等选择器

  • 标签选择器
    • 写法
      • css: div{}
      • html: <div></div>
    • 使用场景
      • 去掉某些标签默认样式
      • 复杂选择器中,如层次选择器中使用
  • 群组选择器
    • 写法:通过逗号隔开,同时给多个选择器加同样的样式,实现代码的复用
  • 通配选择器
    • 写法:*{} 表示选中页面中的所有标签,统一设置样式,要慎用
    • 使用场景
      • 去掉所有标签的默认样式

3.20 层次选择器

  • 后代 : M N{ } 包括后代
  • 父子 : M > N{ } 不包括后代
  • 兄弟: M ~ N{ } 所有的弟弟,当前M下面所有的兄弟N标签
  • 相邻 M + N { } 当前M相邻的N标签

3.21 属性选择器

3.22 hover等伪类选择器

  • 伪类选择器:css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
    • 写法
      • :link 
      • :visited
      • :hover
      • :active
      • link visited只能给a标签添加,hover和active可以给所有标签添加
      • 如果需要同时使用四个伪类,必须按照顺序:LVHA (买了lv包包,乐haha)
      • 常用写法: a{}  a:hover{}
    • 实例:
      • 巨丑的导航制作
      • 仿网易新闻效果

3.23 after等伪类选择器

  • :after、:before
  • :checked、:disabled
    • 漂亮的复选框
  • :focus

3.24 结构伪类选择器

  • :nth-of-type()、 :nth-child()
    • 角标:1-n
    • 区别:nth-of-type按类来算个数,nth-child按类按孩子排名算
  • first-of-type、:first-child
  • last-of-type、last-child
  • only-of-type、:only-child

3.25 css样式的继承

  • 文字相关样式可以被继承
  • 布局相关样式不能被继承
    • 如果想继承,需要设置:inherit属性。如:border:inherit;

3.26 单一样式的优先级

  • 相同样式优先级
    • 后面的优先级较高
  • 内部样式与外包样式优先级
    • 内部样式与外包样式优先级是一样的。效果取决于最后面的代码。
  • 单一样式优先级
    • !important>行内样式>id>class>标签
类型      权重      权重
!important 1200important 1200
style     1000     1000
id        100        100
class     10     10
tag       1       1


权重比较法
ul li .box span li .box span
1+1+10+1=13+1+10+1=13
.red li #ssred li #ss
10+1+100=111+1+100=111


约分比较法
ul li .box span #ss li .box span #ss
---------------------
.red li #ssred li #ss

3.27 important群组等优先级

  • !important
  • 标签+类与单类
  • 群组与单一选择器

3.28 层次的优先级

  • 权重比较法
  • 约分比较法

第4章 html和css拓展

4.1 css盒子模型

        为了更好的理解盒模型,请理解下面的举例:有一辆卡车运输很多的物品,每一个箱子里面放着一个 花瓶(content),为了防止花瓶破损,盒子里面放着很多 棉花(padding)填充,箱子是木制品,有一定的 厚度(border),为了防止箱子碰撞,箱子之间还放了很多 海绵(margin)隔开。
  • 盒子的模型主要就是由下面参数组成:
    • content:就是内容局域,由width和height决定
    • padding:内填充物,内边距,不一定需要设置
      • 写法
        • 一个值:padding:30px;(上下左右)
        • 两个值:padding:20px 30px;(上下、左右)
        • 三个值:padding:10px 20px 30px;(上、左右、下)
        • 四个值:padding:10px 20px 30px 40px;(上、右、下、左)
    • border:边框,不一定需要设置
    • margin:外填充物,外边距,不一定要设置
      • 写法有四种,参考padding的写法。
  • 注意
    • 背景颜色会填充到margin以内区域。
    • 文字或图片等内容,只会在content区域。
    • padding不能出现负数,margin可以出现负数。

4.2 box-sizing改变盒模型

  • 盒子的宽度是由:content+padding+border+margin决定。(学会计算盒子的宽度)
  • box-sizing:盒尺寸,可以改变盒模型的展示形式。
    • content-box:默认值,盒子的宽度:宽width+左右padding+左右border+左右margin,标准盒模型(手动计算)
    • border-box:盒子的宽度:width(content+border+padding)+左右margin,怪异盒模型(自动计算)
  • 怪异盒模型的优点
    • 不用手动计算数值
    • 解决100%的问题

4.3 盒模型之margin叠加问题

margin的叠加:当两个盒子同时添加上下外边距的时候,会出现叠加问题。该问题只有上下有,左右没有。
  • 解决方案
    • 只给一个元素添加外边距
    • BFC规范(后面再补充)

4.4 盒模型之margin传递问题

margin的传递:当两个盒子嵌套的时候,子盒子设置margin-top,会出现传递现象。(其他三个方向没有这个问题)
  • 解决方案
    • 给父容器加边框
    • margin换成padding(代码写在父盒子身上)
    • BFC规范(后面再补充)

4.5 css盒子模型之扩展

  • margin实现容器(盒子)水平居中
  • 不设置width的现象

4.7 按类型划分标签

  • 按类型划分标签:
    • block:块标签 div、h1-h6、p、ul、li……
      • 独占一行
      • 支持所有的样式
      • 不写宽的时候,宽度会自动继承父容器的宽
      • 所占的空间是一个矩形区域
    • inline:内联标签(行标签) span、a、em、strong、img、b、i……
      • 挨在一起,占据一行
      • 有些样式不支持:width/height/margin/padding
      • 不写宽的时候,宽度由内容决定
      • 所占区域不一定是矩形
      • 内联标签中间会有空隙,换行引起的
    • inline-block:内联块标签 input、select
      • 在一行显示
      • 能设置宽高

4.8 按内容划分标签

  • 按内容划分标签:
    • Flow:流内容
    • Metadata:元数据(meta、link、base、style、script……)
    • Sectioning:分区(footer、header、nav……)
    • Heading:标题(h1、h2……)
    • Phrasing:措辞(strong、em、span……)
    • Embedded:嵌入的(img、video、audio……)
    • Interacive:互动的(input、select……)
  • 网上介绍:https://html.spec.whatwg.org/multipage/dom.html

4.9 按显示划分标签

  • 按显示划分标签:
    • 替换元素:浏览器根据标签和属性来决定显示的效果
      • img、input……
    • 非替换元素:浏览器只根据标签就可以显示效果
      • h1、p、strong……

4.10 display显示框类型

  • display的部分属性值
    • block
    • inline
    • inline-block
    • none:注意与 visibility:hidden;的区别

4.11 标签嵌套规范

  • 块标签可以装内联标签
  • 块标签不一定能装块标签
  • 内联标签不能装块标签
    • a标签例外

4.12 overflow溢出隐藏

  • overflow溢出隐藏属性值
    • visible:默认
    • hidden:隐藏
    • scroll:显示滚动条
    • auto:自动
    • x轴、y轴单独设置
      • overflow-x
      • overflow-y

4.13 透明度与手势

  • 透明度
    • opacity:0-1之间,占空间,所有子内容都会跟着透明
    • rgba:0-1之间,占空间,可以指定某个样式透明而不影响其他样式
  • 手势
    • cursor:定义鼠标样式

4.14 最大最小宽高

  • min-width、max-width
  • min-height、max-height
  • 注意:%单位的细节

4.15 css默认样式

有些标签有默认样式,有些标签没有默认样式。
  • 没有默认样式
    • div、span……
  • 有默认样式
    • body、h1-h6、ul、p……
body:margin:8px;
h1:margin:上下 21.44px ;font-weight:bold;:上下 21.44px ;font-weight:bold;
p: margin:上下 16px: margin:上下 16px
ul:默认小点。margin:上下16px;  padding-left:40px  padding-left:40px
a:默认带下划线,蓝色字体:默认带下划线,蓝色字体

4.16 css重置样式

简单的css reset:https://www.cnblogs.com/weizhxa/p/9885329.html
*{margin:0;padding:0;}{margin:0;padding:0;}
ul{ list-style:none}{ list-style:none}
a{text-decoration: none;}{text-decoration: none;}
img{display:block;}{display:block;}
写页面的顺序:
  1. 写结构
  2. css重置样式
  3. 写具体样式

第5章 ps切图

5.1 PS基本操作与图片格式

  • ps的基本操作和快捷键
    • ps:界面
      • 菜单栏
      • 工具栏
      • 面板
    • 基本操作
      • 放大缩小:alt+滚动滑轮
      • 抓手工具:按住空格键
      • 标尺:ctrl+r -拉参考线
        • 测量尺寸:
          • 选框工具:alt 裁剪选区
          • 参考线:比较好用
          • 针对源文件:psd格式,按住ctrl键+点击图层缩略图
      • 取消选区:ctrl+d
  • 图片格式
    • 结果文件:已经合并图层:jpg、png、git
    • 源文件:未合并图层:psd

5.2 PNG等图片切图流程

  • 利用选框工具
    • 复制:ctrl+c
    • 创建:ctrl+n
    • 粘贴:ctrl+v
    • 保存:ctrl+s
  • 利用切片工具

5.4 PSD源文件切图流程

  1. ps:一张张去切
  2. 像素大厨:和ps配合使用一个插件:切图+标注图制作
  3. 利用ps:插件,扩展。photoshop版本 cc:
    1. 编辑-首选项-增效工具-启用生成器
    2. 文件-生成-图形资源
    3. 改文件图层名字,回车即可切图(加后缀)
  4. 蓝湖:切图+标注图。photoshop版本 cc

5.5 企业中的切图流程

蓝湖:切图+标注图。photoshop版本 cc 蓝湖:https://lanhuapp.com/

第6章 html和css高级应用

6.1 float浮动概念及原理

  • 文档流:文档流是文档中可显示对象在排列时占用的位置。
  • float特性:加浮动的元素,会让其脱离文档流,会沿着父容器靠左或靠右排列,如果之前有浮动的元素,则新浮动的元素会挨着已浮动元素进行顺序排列。
  • float取值
    • left
    • right
    • none

6.2 float注意点整理

float的细节:
  • 只会影响后面的元素
  • 内容默认提升半层
  • 默认宽度根据内容决定
  • 换行排列
  • 主要用于块标签,但也可以用在行标签
    • 块标签用于布局,行标签一般用于修饰文本

6.3 清除float浮动(上)

  • 垂直排列的元素:兄弟关系
    • clear属性:清除浮动,(代码写在下方兄弟节点里面)
      • left
      • right
      • both
  • 嵌套排列的元素:父子关系
    • 固定高度:不推荐,固定高度就不能做到自适应效果(代码写在父盒子里面)
    • 父元素浮动:不推荐,因为父容器脱离文档流也会影响后面元素(代码写在父盒子里面)
    • overflow:hidden : BFC规范,如果子元素想溢出,会受到影响(代码写在父盒子里面)
    • display:inline-block :BFC规范,不推荐,父容器会影响后面元素(代码写在父盒子里面)
    • 设置空标签:不推荐,会新增一个标签
    • after伪类:推荐,是空标签的加强版,目前是大部分公司的做法

6.4 清除float浮动(下)

  • 嵌套排列的元素:
  • 设置空标签:不推荐,会新增一个标签(代码写在下方兄弟节点里面)
  • after伪类:推荐,是空标签的加强版,目前是大部分公司的做法(代码写在父盒子里面)
    • clear属性只能作用于块标签

6.5 中国体彩网导航条制作

6.6-6.7 中国体彩网商铺

6.8 新浪搜索条

6.9 -6.11 relative相对定位

  • position定位特性:可以指定一个元素在文档中的定位方式(叠加效果)
    • 位置设置:下面属性可以决定元素的位置
      • top
      • bottom
      • left
      • right
    • position取值
      • static(默认),没有定位,元素出现在正常的流中
      • relative:生成相对定位的元素,相对于其正常位置进行定位
        • 如果没有定位偏移量,对元素本身没有任何影响
        • 不使元素脱离文档流
        • 不影响其他元素布局
        • left、right、top、bottom是相对于当前元素自身进行偏移的
      • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位
        • 使元素脱离文档流
        • 使内联元素(行元素)支持宽高
        • 使块元素默认宽高根据内容决定(块元素具备行元素的特性)
        • 如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素就相对于文档偏移(绝对、相对、固定)
      • fixed:生成固定定位的元素,相对于浏览器窗口进行定位
        • 使元素脱离文档流
        • 使内联元素(行元素)支持宽高
        • 使块元素默认宽高根据内容决定(块元素具备行元素的特性)
        • 相对于整个浏览器进行偏移,不受浏览器滚动的影响
      • sticky:粘性定位
        • 在指定的位置进行粘性操作。
    • z-index:定位层级
      • 默认层级是0
      • 嵌套的时候的层级问题

6.12 定位实现下拉菜单

6.13 定位实现居中和装饰点

6.14 穷游网模块

6.15 css添加省略号

  • css处理内容溢出的办法
    • width:必须有一个固定宽度
    • white-space:nowrap; 不让内容折行
    • overflow:hidden; 隐藏溢出的内容
    • text-overflow:ellipsis; 添加省略号

6.16 css精灵及好处

  • css sprite:雪碧图、精灵图
    • 是一种网页图片应用处理方式。它允许你将一个网页所有零星小图片都包含到一个大图里面去加载。
  • 使用雪碧图
    • 准备雪碧图,ps打开
    • 测量大小,给一个容器一样的大小
    • 给背景图定位
  • 制作雪碧图

6.17 css圆角设置

  • 圆角设置:border-radius:10px

6.18 布局技巧

  • 排版:float
  • 细节的布局:padding、position

第7章 项目实战-企业站布局

7.1- 7.8 PC端企业类型整页制作

  • 整页布局步骤
    • 准备效果图:png(自己截图)、psd(蓝湖-企业开发)
    • 把里面用到的图片准备好(切图)
    • 创建项目目录
    • 准备公共样式:common.css
    • 结合蓝湖和ps开始写代码
  • 名词
    • 通栏:宽度自适应的 100%
    • 版心:固定大小居中的容器

7.9-7.16 pc端游戏类型整页制作

{year}热门页游排行榜

第8章 HTML5新增标签

8.1 HTML和CSS发展历史

  • html发展历史

  • css发展历史
    • 1994年10月,Hakon Wium Lie提出了层叠样式表,直到1996年css才成为我们今天看到的样式。

8.2 HTML与XHTML的区别

  • doctype和meta编码的区别
  • 元素大小写
  • 属性的布尔值
  • 属性的引号
  • 单标签和双标签
  • 图片的alt属性

8.3 b标签与i标签

  • 表示强调,有加粗效果
    • strong:有语义
    • b:无语义
  • 表示斜体
    • em:有语义
    • i:无语义

8.4 引用标签

  • blockquote:引用大段的段落解释
  • q:引用小段的短语解释
  • addr:缩写或首字母略词
  • address:引用地址信息
  • cite:引用著作的标题

8.5 iframe嵌套页面

iframe可以实现在页面中插入页面。
  • 属性
    • frameborder:边框
    • width:宽
    • height:高
    • scrolling:是否显示滚动条
    • src:引入文件路径
    • srcdoc:在iframe中显示的内容
  • 应用场景
    • 代码共享
    • 数据传输
    • 局部刷新
    • 第三方介入

8.6 br标签与wbr标签

  • br:硬换行
  • wbr:软换行,单词换行时机(word break opportunity)

8.7 pre标签与code标签

  • pre :预格式文本,被该标签包含的文本会保留空格和换行效果
  • code:一般用于装代码
<!DOCTYPE html>DOCTYPE html>
<html>html>
<head>head>
    <meta charset="UTF-8"><meta charset="UTF-8">
    <title>轮播图</title><title>轮播图</title>
</head>/head>
<body>body>
    <div class="container"><div class="container">
        <div class="wrap" style="left:-600px;"><div class="wrap" style="left:-600px;">
            <img src="./img/5.jpg" alt=""><img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt=""><img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt=""><img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt=""><img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt=""><img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
        </div></div>
        <div class="buttons"><div class="buttons">
            <span>1</span><span>1</span>
            <span>2</span><span>2</span>
            <span>3</span><span>3</span>
            <span>4</span><span>4</span>
            <span>5</span><span>5</span>
        </div></div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a><a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a><a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div></div>
</body>/body>
</html>/html>

8.8 map标签与area标签

        定义一个客户端映射:图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址。( 能实现一个图多个链接
  • map :设置热点(图像映射)
  • area:设置作用域
    • shape:设置区域形状
      • rect : 矩形,coords对应的坐标为左上角和右下角
      • circle:圆,coords对应的是圆心(x,y,r),和半径r。 
      • poly:   多边形,coords对应的是每个点的坐标。
    • coords:坐标,根据shape的值去定义。
    • href:跳转链接

8.9 video标签与audio标签

  • video:嵌入视频文件
    • src:资源路径
    • sourse:双标签,解决浏览器兼容的写法
  • audio:嵌入音频文件
    • src:资源路径
    • sourse:双标签,解决浏览器兼容的写法

8.10 link标签扩展学习

//添加外部样式表
<link rel="stylesheet" href="./css/style.css">link rel="stylesheet" href="./css/style.css">
//添加icon小图标
<link rel="icon" type="/images/x-icon" href="https://www.baidu.com/favicon.ico">link rel="icon" type="/images/x-icon" href="https://www.baidu.com/favicon.ico">
//dns预解析,优化手段
<link rel="dns-prefetch" href="//g.alicdn.com" />link rel="dns-prefetch" href="//g.alicdn.com" />

8.11 meta标签扩展学习

//添加元信息meta:辅助信息,写给浏览器和搜索引擎(SEO)看的


//设置编码方式
<meta charset="utf-8" />meta charset="utf-8" />
//设置网站描述
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
//设置网站关键字
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
//设置双内核浏览器,按高的内核进行渲染
<meta name="renderer" content="webkit"/>meta name="renderer" content="webkit"/>
//设置ie浏览器用最新版
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

8.12 HTML5新语义化标签

//语义化标签的使用:为了搜索引擎优化(SEO),无语义标签:div、span、b、i
<header>页眉-一个页面只能出现一次</header>header>页眉-一个页面只能出现一次</header>
<footer>页脚-一个页面只能出现一次</footer>footer>页脚-一个页面只能出现一次</footer>
<main>主体-一个页面只能出现一次</main>main>主体-一个页面只能出现一次</main>
<hgroup>标题组合</hgroup>hgroup>标题组合</hgroup>
<nav>导航</nav>nav>导航</nav>
<article>独立的内容</article>article>独立的内容</article>
<aside>辅助信息,侧栏内容</aside>aside>辅助信息,侧栏内容</aside>
<section>区域</section>section>区域</section>
<figure>描述图像或视频</figure>figure>描述图像或视频</figure>
<figcaption>描述图像或视频的标题或摘要部分</figcaption>figcaption>描述图像或视频的标题或摘要部分</figcaption>
<datalist id="">选项列表-和表单配合使用</datalist>datalist id="">选项列表-和表单配合使用</datalist>
<details open>文档细节</details>details open>文档细节</details>
<summary>文档标题</summary>summary>文档标题</summary>
<progress min="0" max="10" value="5">定义进度条</progress>progress min="0" max="10" value="5">定义进度条</progress>
<meter min="0" max="100" value="80" low="10" high="60">定义度量范围</meter>meter min="0" max="100" value="80" low="10" high="60">定义度量范围</meter>
<time>定义日期或时间</time>time>定义日期或时间</time>
<mark>带有记号的文本-突出</mark>mark>带有记号的文本-突出</mark>

8.13 表格扩展学习

隐藏空单元:empty-cells: hide;-cells: hide;
添加单线:border-collapse: collapse;-collapse: collapse;
斜线分类:border / rotate / rotate
列分组:colgroup / col / col

8.14 表单的扩招学习

  • 表单的修饰:
1.利用 label 和 :checked 实现 2.利用 position 和 opacity实现
  • 新的input控件
email:电子邮件输入框:电子邮件输入框
url:网址输入框
number:数值输入框:数值输入框
range:滑动条:滑动条
data/month/week:日期控件/month/week:日期控件
search:搜索框:搜索框
color:颜色控件:颜色控件
tel:电话号码输入框:移动端,输入的时候会自动跳出数字键盘:电话号码输入框:移动端,输入的时候会自动跳出数字键盘
time:时间控件
  • 新的表单属性
autocomplete:自动完成 off on:自动完成 off on
autofocus:获取焦点:获取焦点
required:不能为空:不能为空
pattern:正则验证:正则验证
  • 扩展标签
fieldset:表单元素分组:表单元素分组
legend:为fieldset元素定义标题:为fieldset元素定义标题
optgroup:定义选项组:定义选项组

8.15 BFC规范

BFC即Block Formatting Contexts(块级格式化上下文),他属于格式化上下文的其中一种规范。具有BFC特性的元素可以看做是个例了的独立容器,容器中的元素不会再布局上印象到外面的元素,并且BFC具有普通ring器没有的一些特性。(解决布局问题) 总结:如果能触发BFC规范,该元素就可以成为一个独立的容器,不受到外面容器的影响,从而解决一些布局问题
  • 触发BFC的条件
1.浮动元素:float出none之外的值浮动元素:float出none之外的值
2.绝对定位元素:position(absolute,fixed)绝对定位元素:position(absolute,fixed)
3.display为inline-block、table-cells、flexdisplay为inline-block、table-cells、flex
4.overflow除了visible之外的值(hidden、auto、scroll)overflow除了visible之外的值(hidden、auto、scroll)
  • BFC特性以及作用
1、解决margin值叠加问题:margin、解决margin值叠加问题:margin
2、解决margin传递问题、解决margin传递问题
3、解决浮动问题、解决浮动问题
4、解决覆盖问题、解决覆盖问题

第9章 CSS3属性

9.1 浏览器内核与浏览器前缀

浏览器厂商以前就一直在实施Css3,但是它还未形成真正的标准。为此,有些css3语法还在波动的时候,他们提成了针对浏览器的前缀。( css3不兼容所有的浏览器,需要加上前缀。前缀主要针对旧的浏览器,新浏览器基本不用添加前缀了
浏览器内核前缀
IETrident-ms-
Firefox(火狐)Gecko-moz-
Opera(欧朋)Opera-o-
Chrome(谷歌)webkit-webkit-
Safari(苹果)webkit-webkit-
Google和Opera SoftwareBlink

9.2 过渡效果 transition

transition 属性是一个简写属性(复合写法),用于设置四个过渡属性:
transition-property:规定设置过渡效果的 CSS 属性的名称-property:规定设置过渡效果的 CSS 属性的名称
transition-duration:规定完成过渡效果需要多少秒或毫秒-duration:规定完成过渡效果需要多少秒或毫秒
transition-timing-function:规定速度效果的速度曲线-timing-function:规定速度效果的速度曲线
transition-delay:定义过渡效果何时开始(正数是延迟,负数的提前)-delay:定义过渡效果何时开始(正数是延迟,负数的提前)
描述
linear(匀速)规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease(默认-慢快慢)规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in(加速)规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out(减速)规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out(先加速后减速)规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可 来源:  CSS transition-timing-function 属性
贝塞尔曲线数据设置:https://cubic-bezier.com/#.17,.67,.83,.67

9.3 过渡菜单的制作

9.4-9.5 变形效果 transform 

translate:位移:位移
    translateX:x轴translateX:x轴
    translateY:Y轴translateY:Y轴
    translateZ:z轴 (3d)translateZ:z轴 (3d)
scale:缩放(正常是1,2就是放大一倍,0.5就是缩小一倍.以当前元素中心点进行缩放):可以简写成一个值:缩放(正常是1,2就是放大一倍,0.5就是缩小一倍.以当前元素中心点进行缩放):可以简写成一个值
    scaleXscaleX
    scaleYscaleY
    scaleZ(3d)scaleZ(3d)
rotate:旋转(旋转的值,单位是度:deg):旋转(旋转的值,单位是度:deg)
    rotateX(3d)rotateX(3d)
    rotateY(3d)rotateY(3d)
    rotateZ(平面和rotate复合写法是等价关系。正数:顺时针,负数:逆时针)rotateZ(平面和rotate复合写法是等价关系。正数:顺时针,负数:逆时针)
skew:斜切(单位:deg):斜切(单位:deg)
    skewX:正数,向左倾斜,负数向右倾斜skewX:正数,向左倾斜,负数向右倾斜
    skewY:正数,向左倾斜,负数向右倾斜skewY:正数,向左倾斜,负数向右倾斜

9.6 transform复合写法与注意点

  • transform使用的注意事项
    • 变形操作不会影响到其他元素
    • 变形操作只能添加给块元素,不能添加给内联元素(行元素)
    • 复合写法,可以同时添加多个变形操作
      • 执行是有顺序的。先执行后面,再执行前面的操作
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15348.html
标签
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!