HTML+CSS
- 001：导学
- 002：什么是HTML和CSS
- 003：宇宙第一编辑器VS Code
- 005：了解软件开发
- 006 web前端的三大核心技术
- 007：HTML基本结构与属性
- 008：HTML初始代码
- 009：HTML的注释
- 010：HTML语义化
- 011：标题与段落
- 012：文本修饰标签
- 013：图片标签与图片属性
- 014：引入文件的地址路径
- 015：跳转链接
- 016：跳转锚点
- 017：特殊符号
- 018：无序列表
- 019：有序列表
- 020：定义列表
- 021：嵌套列表
- 022：表格标签
- 023：表格属性
- 024 表单input标签
- 025：表单相关标签
- 026 表格表单组合实例
- 027 div与span
- 028 CSS语法格式
- 029 内联样式与内部样式
- 030：外部样式及两种写法
- 031：CSS颜色表示法
- 032 背景样式
- 033
001：导学
一、拨云见日
- HTML
- CSS
- 切图流程
- PC企业站布局
- PC游戏站布局
二、溯本求源
- 扩展HTML
- 扩展CSS
- HTML5新语法
- CSS3新语法
- 兼容与hack
- List item
三、风生水起
- 弹性布局
- 网格布局
- 移动端布局
- 响应式布局
- Bootstrap
四、巧夺天工
- 预编译CSS
- postcss
- CSS架构
- 高级功能
- CSS与JS交互
002：什么是HTML和CSS
- 什么是HTML和CSS？
是做网站的编程语言。- HTML：
HTML的全称为超文本标记语言，标准通用标记语言下的一个应用，是网页制作必备的编程语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 - CSS：
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。息资源用随机方式进行连接，为人们查找，检索信息提供方便。
- HTML：
- 浏览器把代码解析后的样子就是我们看到的网站。
- 如何看到网站的原始代码呢？
通过鼠标右键选择查看网页源代码。 - 一个网站是由N多个网页组成的，每一个网页就是一个.html的文件。
003：宇宙第一编辑器VS Code
VS Code，全称 Visual STudio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。
学习编辑器基本使用
- 创建文件、创建文件夹、重命名和删除、搜索
- ctrl+s：保存
crtl+a：全选
crtl+x：剪切
crtl+v：粘贴
crtl+c：复制
crtl+z：撤销
crtl+y：前进 - 设置：文件–>首选项–>设置（大小、是否换行word wrap
- shift+end：从头选中一行
shift+home=从后选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行 - tab：向后缩进
tab+shift：向前缩进 - alt+鼠标左键：多光标
- ctrl+d：选择相同元素的下一个
005：了解软件开发
一、深入了解网站开发
- UI设计师：设计稿
- Web前端开发工程师（H5开发）：
设计稿->代码；
数据库里的数据->显示到页面；
HTML+CSS
HTML：结构
CSS：样式 - Web后端开发工程师：存储数据
二、什么是JavaScrpit
JavaScrpit：
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。
三、JavaScrpit与HTML和CSS的联系
JavaScript是一种脚本语言，即可以运行在客户端也能运行在服务器端。JavaScript的解释器就是JS引擎，JS引擎是浏览器的一部分。而JavaScript主要是用来扩展文档交互能力的，使静态的HTML具有一定的交互行为（比如表单提交、动画特效、弹窗等）。
这三者99%的情况下都是搭配使用的，但也不是绝对的，具体关系是：
1.HTML与CSS、JS是不同的技术，可以独立存在；
2.HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；
3.CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；
4.JS可以脱离HTML和CSS而独立存在；
5.JS可以操作HTML和CSS。
总结：如果把HTML比做身体，那CSS就好比是衣服，而JavaScript则意味着人能做的一些高级动作。
006 web前端的三大核心技术
HTML：结构
- ctrl+滚轮：放大/缩小页面
- ctrl+0：还原到原来页面大小
CSS：样式
JavaScript：行为
007：HTML基本结构与属性
- HTML：超文本 标记 语言
(1). 超文本：文本内容+非文本内容（图片、视频、音频等）
(2). 标记（标签）：<单词>
写法分成两种：单标签：<>双标签:<header></header>
创建标签的快捷键：单词+tab->标签。
标签可以上下排列，也可以组合嵌套。
HTML常见标签：
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签 属性="值" 属性2="值2">
008：HTML初始代码
1.HTML初始代码：每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。要符合html文件的规范写法。
！+tab键：可以快速的阿创建html的初始代码
<!DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签：包裹着所有html标签代码
lang="en"表示是一个英文网站
lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> 元信息：是编写网页中的一些赋值信息 charset="UTF-8"国际编码，让网页不出现乱码的情况
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
009：HTML的注释
- 注释的代码,只有在文件中看得到，但是浏览器显示不出来。
写法：<!--注释的内容-->
意义：（1）把暂时不用的代码注释起来，方便以后使用。
（2）对开发人员进行提示 - 快捷添加注释与删除注释：
（1）ctrl+/
（2）shift+alt+a
010：HTML语义化
- 概念：根据网页中内容的结构，选择适合的HTML标签进行编写。
- 好处:
（1）在没有CSS的情况下，页面也能呈现出很好的内容结构。
（2）有利于SEO，让搜索引擎爬虫更好的理解网页。
（3）方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
（4）便于团队开发与维护
011：标题与段落
- 标题 -->双标签：
<h1></h1>……<h6></h6>
在一个网页中，h1标题最重要，并且一个html文件中，只能出现一次h1标签，h5、h6标签在网页中不经常使用。 - 段落–>双标签：
<p></p>
012：文本修饰标签
- 强调（加粗）（强调性更强）–>双标签：
<strong></strong> - 强调（斜体）（强调性稍弱）–>双标签：
<em></em> - 下标文本、上标文本：
<sub></sub>、<sup></sup>（数字的平方和化学式） - 删除文本、插入文本：
<del></del>、<ins></ins>（一般情况下删除文本都是和插入文本配合使用的）
<p>
促销：原价<del>300</del>,现价<ins>100</ins>
</p>
013：图片标签与图片属性
<img>：图片（单标签）
src：引入图片的地址
alt：当图片出现问题的时候可以显示一段友好的提示文字
title：提示信息
width、height：图片的大小
<img src=" " alt=""title="">
014：引入文件的地址路径
- 相对路径：.(一个点，往内部找）
两个点（往外部找) - 绝对路径:网络地址。
015：跳转链接
<a></a>双标签
href属性：链接的地址<a href=""></a>
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self，新窗口打开_blank<base>单标签（通常写在<head></head>里面，可以让所有链接都在新窗口打开）
<base target="_blank">
016：跳转锚点
实现方法：
- 在href中加#号，在目标点加 id属性（eg:
<a href="#html">HTML</a><h2 id="html">HTML超文本编辑语言</h2>） - #号 和name属性
017：特殊符号
- &+字符
- 解决冲突，如左右尖括号、添加多个空格的实现。
018：无序列表
1.<ul>、<li>：列表的最外层容器、列表项。（注：ul和li必须是组合出现的，他们之间是 不能有其他标签的 ）
<ul>
<li>第一项</li>
</ul>
（ul和li的该嵌套关系是固定的，不能改变，但li内部可以再嵌套）
2. type属性：改变前面标记的样式（一般都是用CSS去控制）（在html中不大重要）
<ul type="circle">
<li></li>
</ul>
019：有序列表
<ol>、<li>：列表的最外层容器、列表项（注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表）（用法与无序列表相同 ）- type属性（用法与无序列表差不多）
020：定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述
列表项需要添加标题和对标题进行描述的内容
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
021：嵌套列表
- 列表之间可以互相嵌套，形成多层级的列表。
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
- 有序列表和定义列表也是相同的嵌套方式。
022：表格标签
<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题- 之间是有嵌套关系的，要符合嵌套规范。
<table>
<caption>天气预报</caption>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td>2019年1月1日</td>
<td>太阳</td>
<td>天气晴朗，适合出行</td>
</tr>
</table>
4. 语义化标签：<tHead>、<tBody>、<tFood>(不具备效果，只是使表格规范）
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td>太阳</td>
<td>天气晴朗，适合出行</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
效果不变
5. 注意：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。
023：表格属性
- 常见表格属性：
border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式
（1）
<table border="1">
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td>太阳</td>
<td>天气晴朗，适合出行</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
（2）
<table border="1" cellpadding="30">
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td>太阳</td>
<td>天气晴朗，适合出行</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
（3）
<table border="1" cellpadding="30" cellspacing="30">
（4）
合并列用法与合并行相同
（5）
align：left、center、right
valign：top、middle、bottom
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right">
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr>
<td>2019年1月1日</td>
<td>太阳</td>
<td>天气晴朗，适合出行</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
其他用法类似，加在tr里面，哪里需要加哪里。
024 表单input标签
1.表单标签： <form>：表单的最外层容器
<input>：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
2.
（注意:
单选框要增加name属性，自定义名字，使其变成一组。
form下的action定义用来写数据提交的地址。
checked可以使选项一开始你就被选中，其值可写可不写。
disabled使选项禁止使用。）
（1）
<form action="http://www.baidu.com">
<h2>输入框：</h2>
<input type="text">
<h2>密码框：</h2>
<input type="password">
<h2>复选框：</h2>
<input type="checkbox" checked="checked">苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框：</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件：</h2>
<input type="file">
<h2>提交按钮和重置按钮：</h2>
<input type="submit">
<input type="reset">
</form>
（2）
<h2>输入框：</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框：</h2>
<input type="password" placeholder="请输入密码">
025：表单相关标签
<textarea>：多行文本框。
cols指列，rows指行
<form action="http://www.baidu.com">
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
</form>
2. <select>、<option>：下拉菜单（组合使用）
（添加selected可以使当前项直接被选中 ，disabled是禁止选择）
（1）
<form action="http://www.baidu.com">
<h2>下拉菜单</h2>
<select>
<option selected>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</form>
（2）
<option selected disabled>请选择</option>
（3）
<form action="http://www.baidu.com">
<h2>下拉菜单</h2>
<select size="2">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</form>
（4）multiple多选，鼠标滑过或ctrl+鼠标左键多选
<form action="http://www.baidu.com">
<h2>下拉菜单</h2>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
</form>
（5）
<input type="file" muitiple>
<label>：辅助表单（无显示效果，只是辅助表单操作，使选择区域变大）
<form action="http://www.baidu.com">
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</form>
<form action="http://www.baidu.com">
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
（id和for要一一对应）
026 表格表单组合实例
- 表格有嵌套规范，表单没有嵌套规范，所以先写表单，table要放在form里。
<body>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit"> <input type="reset"></td>
</tr>
</tBody>
</table>
</form>
</body>
027 div与span
-
div（块）：
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。 -
span（内联）：
用来修饰文字的，div与span都是没有默认样式的，需要配合CSS才行。
<body>
<div>
<h2><a href="#">千锋教育<span>html5</span>-中国数万程序员的选择-官方首页</a></h2>
<a href="#"><img src="" alt=""></a>
<p>段落</p>
<a href="#">www.mobiletrain.org 2019-04-评价 广告</a>
</div>
<div>
<h2><a href="#">千锋教育<span>html5</span>-中国数万程序员的选择-官方首页</a></h2>
<a href="#"><img src="" alt=""></a>
<p>段落</p>
<a href="#">www.mobiletrain.org 2019-04-评价 广告</a>
</div>
</body>
028 CSS语法格式
格式：选择器{属性1：值1；属性2：值2}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background-color: red;}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
长度单位：
px->像素（pixel）、%->百分比（外容器->600px 当前容器50%->300px）
基本样式：
width、height、background-color
CSS注释：
- 快捷键：ctrl+/
/*CSS注释的内容*/
029 内联样式与内部样式
- 内联（行内、行间）样式
在html标签上添加style属性来实现的
<body>
<div style="width: 100px;height: 100px;background-color:red">这是一个块</div>
</body>
- 内部样式
在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background-color:red}
</style>
</head>
<body>
<!-- <div style="width: 100px;height: 100px;background-color:red">这是一个块</div> -->
<div>这是一个块</div>
</body>
</html>
- 区别：内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。
030：外部样式及两种写法
- 通过标签引入外部资源，rel属性指定资源跟页面的关系，href属性是资源的地址。
2. @import
（注：这种方式有很多问题，不建议使用）
031：CSS颜色表示法
- 单词表示法：red，blue，green，yellow…
- 十六进制表示法：#000000，#ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
#ff0000红色，#000000黑色，#ffffff白色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
div{background-color: #000000;}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
- rgb三原色表示法：rgb（255,255,255）;
取值范围 0~255
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
div{background-color:rgb(0,0,0);}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
- 获取网页中的颜色
（1）用网页扩展工具里的FeHelper（前端助手）（只能识别网络里的，不能识别本地的），十六进制的。
（2）用photoshop（或者电脑自带的画图也行，吸取颜色后，找到编辑颜色。）
032 背景样式
- background-color：背景颜色
- background-image：背景图片 url（背景地址） 默认：会水平垂直都铺满背景图。
- background-repeat：背景图片的平铺方式 repeat-x x轴平铺，repeat-y y轴平铺，repeat（x，y 都进行平铺，默认值），no-repeat 都不平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 300px;background-color: red;
background-image:url(./img/dog.jpg) ;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（其他平铺方式用法相同）
4. background-position：背景图片的位置
（1）number（x，y值为负数的话往左或者往上平移，为正数往右或者往下进行平移）
（2）单词：
x：left、center、right
y：top、center、bottom
（两者用法一样）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 300px;background-color: red;
background-image:url(./img/dog.jpg) ;
background-repeat: repeat-x;
background-position:100px o ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5. background-attachment：背景图随滚动条的移动方式。
scroll：默认值，背景图跟着动。（背景位置是按照当前元素进行偏移的）
fixed：背景图固定不动（背景位置是按照浏览器进行偏移的，变成按浏览器进行位置固定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{height:2000px ;}
div{width: 300px;height: 300px;background-color: red;
background-image:url(./img/dog.jpg) ;
background-repeat: repeat-x;
background-position:100px o ;
background-attachment: scroll;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
