@[TOC]Web前端教学
HTML+CSS系列教程
1.1拨云见日：HTML CSS 切图流程 PC企业站布局 PC游戏站布局
1.2溯本求源：扩展HTML 扩展CSS HTML5新语法 CSS3新语法 兼容与hack
1.3风生水起：弹性布局 网格布局 移动端布局 响应式布局 Bootstrap
1.4巧夺天工：预编译CSS postcss CSS架构 高级功能 CSS与JS交互
一序
1.1 什么是HTML，CSS?
1.1.1 是做网站的编程语言。
浏览器把代码解析后的样子就是我们所看到的网站，我们可以通过鼠标右键选择查看网页源代码。
一个网站是由N多个网页组成。 每一个网页 .html 文件 (.mp4 文件)
1.1.2VS code 编辑器
安装插件：语言包，open in browser view in browser
设置：文件-> 首选项 -> 设置 （大小，是否换行 word wrap)
创建文件 ，创建文件夹，重名名和删除
快捷键，多光标，ctrl+d :选择相同元素的下一个
1.2 深入了解网站
1.2.1 Glooge chrome 浏览器 百度统计浏览器市场份额
1.2.2 UI设计师 ： 设计稿
web前端开发工程师（H5开发)
设计稿 -> 代码
数据库里的数据 -> 显示到页面
HTML + CSS : 结构 ，样式
web后端开发工程师 ：后端数据存储，（访问时）提取
1.2.3 web前端的三大核心技术
HTML : 结构
CSS ： 样式
JavaScript : 行为
1.3 HTML基础结构与属性
1.3.1 是 超文本 标记 语言，标准通用标记语言下的一个应用。网页制作必备的编程语言。
1.3.2 HTML : 超文本 标记 语言
超文本 ： 文本内容 + 非文本内容 （ 图片 ，视频，音频等）
语言 ： 编程语言 （规范）
标记 ：< 单词 >
标记也叫做标签：写法分为两种 ：单标签 <header>
双标签 <footer></footer>
创建标签的快捷键： 单词 + tab键 -> < 单词>
标签是可以上下排列，也可以组装嵌套。
标签的属性 ：来修饰标签的，设置当前标签的一些功能。
1.4 HTML初始代码
1.4.1 每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的。（初始代码定义）（要符合html文件的规范写法）
！+ tab键 ： 快速创建html的初始代码
1.4.2 <!DOCTYPE html > 文档声明 ： 告诉浏览器这是一个html文件
<html lang=“en"> html文件的最外标签 : 包裹着所有html 标签代码 分en为英文网站 zh-CN为一个中文网站。
<head>
<meta charset=“UTF-8"> 元信息 ：是编写网页中的一些赋值信息
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
1.5 HTML注释
1.5.1 写法： <!-- 注释的内容 --> 在浏览器中看不到，只能在代码中看到注释的内容。
意义 ：1. 把暂时不用的代码注释起来，方便以后使用，
2. 对开发人员进行提示。
快捷添加注释与删除注释：1.ctrl + / 2. shift + alt +a
1.6 HTML语言化
1.6.1 指的是，根据网页中内容的结构，选择合适的HTML标签进行编写，
好处： 1. 在没有 CSS 的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（如屏幕阅读器，盲人阅读器等）
4. 便于团队开发与维护。
1.7 标题与段落
1.7.1 标题 -> 双标签 ：<h1></h1> ... <h6></h6>
在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。
h5 h6标签在网页中不经常使用。
段落 -> 双标签 ：<p></p>
1.8 文本修饰标签
1.8.1 强调 -> 双标签 ：<strong></strong> <em></em>
<strong> : 表强调（强调性更强），会对文本进行加粗
<em> ：强调性弱，会对文本进行斜体
<sub> <sup> : 下标文本，上标文本
<del> <ins> : 删除文本，插入文本
注 ： 一般情况下，删除文本都是和插入文本配合使用的。
1.9 图片标签
1.9.1 img -> 单标签
src : 引入图片地址
alt : 当图片出现问题时，可以显示一段友好的提示文字。
title ：提示信息
width height : 图片的大小
1.10 引入文件的地址路径
1.10.1 相对路径 ： .在路径中表示当前路径
..在路径中表示上段路径
绝对路径
1.11 跳转链接
1.11.1 a-> 双标签 <a></a>
href 属性 ：链接的地址
target 属性 ：可以改变链接打开的方式，默认情况下：在当前页面打开 —self 新窗口打开—blank
base -> 单标签 ：作用就是改变链接的默认行为。
1.12 跳转锚点
1.12.1 两种做法 1. #号 + id 属性
2. #号 + name属性 （注意name属性加给的是a标签）
1.13 特殊字符
1.13.1 1. & + 字符
2. 解决冲突 左右尖括号 添加多个空格的实现
1.14 列表标签
1.14.1 1. 无序列表 -> ul li 符合嵌套的规范
2.有序列表 -> ol li 一般用的比较少，可以用无序列表来实现。
（两者之间不能有其他字符）
3.<ol> <li> : 列表的最外层容器 列项表
type属性 ： 改变前面标记的样式（一般都是用CSS去控制）
1.15 定义列表
1.15.1 <dl> : 定义列表
<dt> : 定义专业术语或名词
<dd> ：对名词进行解释和描述
二序
2.1 表格标签
2.1.1 <table> : 表格的最外面容器
<tr> : 定义表格行
<th> : 定义表头
<td> : 定义表格标题
注：之前是有嵌套关系的，要符合嵌套规范。
语义化标签：tHead、tBody、tfood
align : left、center、right
valign: top、middle、bottom
2.2 表格属性
2.2.1 border : 表格边框
cellpadding : 单元格内的空间
cellspacing : 单元格之间的空间
rowspan : 合并行
colspan : 合并列
aling : 左右对齐方式
valign : 上下对齐方式
2.3 表单标签
2.3.1 form、input、textarea select label ...
input(单标签）标签有一个type属性，决定是什么控件。
还有一些常见属性：checked. disabled. named. for.....
2.4 表格表单组合使用
2.5 div和 span
div : 做一个区域划分的块
span : 对文字进行修饰内联
2.6 CSS基础语法
2.6.1 选择器{属性1 ： 值1；属性2 ：值2}
width weight background-color : 背景色
长度单位 ： 1.px -> 像素
2.% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
2.7 CSS样式的引入方式
区别 ： 内部样式的代码可以复用，复合w3c的规范标准，进行让结构和样式分开处理。
2.7.2 外部样式
引入一个单独的CSS文件，name. css
通过link 标签引入外部资源，rel属性指定资源跟页面的关系，href属性指资源的地址。
通过@import方式引入外部样式（这种方式有很多问题，不建议使用）
2.8 CSS 中颜色的表示方法
2.8.1 1.单词表示法 ： red blue green yell....
2. 十六进制表示法 ： #000000 #fffffff
3. rgb三原色表示法 ： rgb(255.255.255)取值范围 0~255
提取颜色的下载地址 ： https://www.baidufe.com/fehelper
2.9 CSS背景样式
2.9.1 background-color 背景色
background-image 背景图
url(背景地址）
默认： 会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat (x ，y 都进行平铺，默认值）
no-repeat 都不平铺
background-position : 背景位置
xy :number 单词
x: left center right
y : top center bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 （ 背景位置是按照当前元素进行偏移的 ）
fixed : (背景图是按照浏览器进行偏移的 ）
2.9 CSS边框样式
2.9.1 border-style : 边框样式
solid : 实线
dashed : 虚线
dotter : 点线
border-width : 边框大小
px ...
border-color : 边框颜色
red .....
边框也可以针对某一边进行设置 : border-left-style
颜色：透明颜色 transparent
2.10 CSS文字样式
2.10.1 font-family : 字体类型
英文，中文
衬体线，非衬体线
注意点 ： 1. 多个字体类型的设置（可以让电脑识别）
2. 引号的添加的目的（字体名称中间有空格要加引号）
2.10.2 letter-spacing : 字之间的间距
word-spacing : 词之间的间距 （针对英文段落的）
英文和数字不自动折行的问题 ：
1.word-break : break-all ;(非常强烈的折行）
2.word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域）
2.11 CSS复合样式
2.11.1 复合的写法，是通过空格的方式实现的，复合写法有的是不需要关心顺序的，例如： background. border ;有的是需要关心顺序的，例如： font。
1.background :red url() repeat 0 0;
2.border : 1px red solid ;
3.font ：
注：最少要有两个值 size family
weight style size family
style weight size family
weight sty;e size/line-height family
注 ： 如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。
2.12 CSS选择器
#elem{} id="elem"
注：
1. ID 是唯一的值，在一个页面中只能出现一次，出现多次是不符合规范的。
2. 命名的规范，由字母，下划线，中划线，字母（并且第一个不能是数字）
3. 驼峰写法 : seachButton （小驼峰） SeachButton (大驼峰） seachSmallButton
4. 短线写法 ： seach-small-button
5. 下划线写法 ： seach_small_button
9119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
