-
HTML+CSS系列教程
-
目录
-
一、拨云见日
-
HTML
-
CSS
-
切图流程
-
PC企业站布局
-
PC游戏站布局
-
二、溯本求源
-
扩展HTML
-
扩展CSS
-
HTMLS新语法
-
CSS3新语法
-
兼容与hack
-
三、风生水起
-
弹性布局
-
网格布局
-
移动端布局
-
响应式布局
-
Bootstrap
-
四、巧夺天工
-
预编译css
-
postcss
-
CSS架构
-
高级功能
-
CSS与JS交互
感兴趣、够努力！
一
- 什么是html和css？
是做网站的编程语言
- 怎样看见网站的原始代码？
鼠标右击选择查看网页源代码
- 如何写代码？写到哪里去？
①一个网站是由多个网页构成的，
每一个网页是 .html文件
-
- VS code下载地址
- 如何安装插件？
语言包
open in browser
view in browser
- 学习编辑器基本使用
设置：文件-＞首选项-＞设置（大小、是否换行 word wrap）
创建文件、创建文件夹、重命名和删除
ctrl+s：保存
ctrl+a：全选
ctrl+x、ctrl+c、ctrl+v：剪切，复制粘贴
ctrl+z、Ctrl+y：撤销，前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↓或↑：快速移动一行
tab、tab+shift：向后缩进，向前缩进
alt+鼠标左键：多光标
ctrl+d：选择同样元素的下一个
3.chrome浏览器
chrome: 68.88%
- 深入了解网站开发
UI设计师：设计稿
Web前端开发工程师：
设计稿-＞代码
数据库里的数据-＞显示到页面
HTML+CSS：结构+样式
Web后端开发工程师：
- JavaScript是什么
https://m.php.cn/article/483342.html。
- JavaScript与HTML、CSS之间的关系
https://blog.csdn.net/qq_34115898/article/details/108773207
4.web前端的三大核心技术
- HTML
<div>HTML+CSS系列教程</div>
<style>
div｛color:red;front-style:italic;｝
</style>
........
- CSS
- JavaScript
4.HTML基本结构与属性
- HTML：超文本 标记 语言
- 超文本：文本内容+非文本内容（图片，视频，音频等）
- 标记：<单词>
- 语言：编程语言
【标记也叫作标签：<header>、<footer>
- 写法分为两种：
单标签<header>
双标签<header></header>】
（创建标签的快捷键：单词+tab-＞ <单词>）
标签可以上下排列，也可以组合嵌套
- HTML常见标签http://www.html5star.com/manual/html5label-meaning/
- 标签的属性：来修饰标签，设置当前标签的一些功能。
<标签 属性＝“值” 属性2＝“值域2”..........>
5.HTML初始代码
- 每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
- ！+tab键：快速的创建html的初始密码
6.HTML注释
- 写法<！--注释的内容-->
在浏览器看不到，只能在代码中看到注释的内容。
- 意义：
- 把暂时不用的代码注释起来，方便以后使用
- 对开发人员进行提示
- 快捷添加注释与删除注释
- ctrl+/
- shift+alt+a
7.HTML语义化
- 标题与段落
h标签（标题）
- 标题-＞双标签：<h1></h1>....<h6></h6>
- 在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签
- h5 h6标签不常用
p标签（段落）
- 段落->双标签：<p></p>
8.文本修饰标签
- 强调->双标签：<strong></strong>、<em></em>
区别：
- 写法和展示效果是有区别的，一个加粗，一个斜体
- strong的强调性更强，em的强调性更弱
- 下标：<sub></sub>
- 上标：<sup></sup>
- 删除文本：<del></del>
- 插入文本：<ins></ins>
注：一般情况下，插入文本和删除文本配合使用的
9.图片标签与属性
- img->单标签
1.src：引入图片的地址
2.alt：当图片出问题的时候，可以显示一段友好的提示
3.title：提示信息
4.width、height：图片的大小
10.引入文件的地址路径
- 相对路径
. 在路径中表示当前路径
.. 在路径中表示上一级路径
11.跳转链接
- <a>标签
1.双标签
- <base>标签
1.单标签
2.作用：改变链接的默认行为的。
12.跳转锚点
- 实现方式：
1.#号+id属性
2.#号+name属性（注意name属性加给的是a标签）
13.特殊符号
- & +字符
- 解决冲突啊 左右尖括号、添加多个空格的实现
- < >
（左尖括号，右尖括号，空格)
14.无序列表
- <ul>、<li>：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。
- type属性
15.有序列表
- <ol>、<li>：列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
16.定义列表
- <dl>：定义列表
- <dt>：定义专业术语或名词
- <dd>：对名词进行解释和描述
注：列表项需要添加标题和对标题进行描述的内容
17. 嵌套列表
- 习题制作菜单
过程问题
- 无序嵌套少东西
- 漏打错打
总结
ul后嵌套跟着li........
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p> <strong>好美味小吃</strong> </P> </body> <ul> <li>小吃类 <ul> <li>煮粉干</li> <li>拌青菜</li> <li>蛋炒饭</li> <li>煎蛋</li> <li>米饭</li> </ul> </li> </ul> <ul> <li>卤味类 <ul> <li>鸭肠</li> <li>面筋</li> <li>牛肚</li> <li>猪耳朵</li> <li>猪头肉</li> <li>大肠</li> <li>鱿鱼</li> </ul> </li> </ul> <ul> <li>套餐类 <ul> <li>卤面筋饭</li> <li>猪肉肉饭</li> <li>猪耳朵饭</li> <li>卤猪脚饭</li> <li>卤猪舌头饭</li> </ul> </li> </ul> <ul> <li>炖罐类 <ul> <li>猪蹄黄豆</li> <li>猪肚莲子</li> <li>猪心枸杞</li> <li>羊肉枸杞</li> <li>牛肉枸杞</li> </ul> </li> </ul> <body> <p> <em>亲，20元以上可送餐哦！！</em> </p> </body> </html>
18.表格标签
1.
- <table>：表格最外层容器
- <td>：定义表格单元
- <tr>：定义表格行
- <th>：定义表头
- <captain>：定义表格标题
注：之间是有嵌套关系的，要符合嵌套规范
- 语义化标签
<tHead>、<tBody>、<tFood>
注：在一个table中，tBody可以出现多次，但tHead、tFood只能出现一次。
2.表格属性
- border：添加表格边框
- cellpadding：添加单元格空间
- cellspacing：添加边框空间
- rowspan：合并行
- colspan：合并列
- align：左右对齐方式
left、center、right
- valign：上下对齐方式
top、middle、bottom
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="30" valign middle>
<tr>
<td valign="middle"><strong>班次名称</strong></td>
<td valign="middle"><strong>科目</strong></td>
<td valign="middle"><strong>授课内容</strong></td>
<td valign="middle"><strong>增值服务</strong></td>
<td valign="middle"><strong>课时</strong></td>
<td valign="middle"><strong>价格</strong></td>
<td valign="middle"><strong>试听</strong></td>
<td valign="middle"><strong>购买</strong></td>
</tr>
<tr>
<td rowspan="3"><strong>真题精解班</strong></td>
<td>行测+申论</td>
<td>全年历年例题精解</td>
<td rowspan="3">课后赠例题精解
24小时以内答疑</td>
<td>48</td>
<td><font color="red">1280元</font></td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td>行测</td>
<td>行测例题历年精解</td>
<td>32</td>
<td>980元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td>申论</td>
<td>申论历年例题精解</td>
<td>16</td>
<td>580元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td rowspan="3"><strong>高分技巧班</strong></td>
<td>行测+申论</td>
<td>全科技巧强化</td>
<td rowspan="3">入学试卷测评
24小时以内答疑</td>
<td>32</td>
<td><font color="red">980元</font></td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td>行测</td>
<td>行测速解计划强化</td>
<td>18</td>
<td>680元</td>
<td>图片</td>
<td>图片</td>
</tr>
<tr>
<td>申论</td>
<td>申论速解技巧强化</td>
<td>14</td>
<td>580元</td>
<td>图片</td>
<td>图片</td>
</tr>
</table>
</body>
</html>
19.表单标签
form、input....
textarea：多行文本框（配套 行rows 列cols 使用）
select、option：外行下拉菜单、内部下拉菜单（selected默认被选中，selected disabled不能再次选择，selected multiple多选）
laber：辅助表单
注：没有严格的嵌套要求
input（单标签)有一个type属性，决定是什么空间
text：文本框
password：密码框
checkbox：复选框
radio：单选框
file：上传文件
submit：提交按钮
reset：重置按钮
placeholder：输入前输入框内显示
- 常见属性
checked
disabled
name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
<table border="0" width="400">
<tr>
<h2>电子邮箱：
<input type=" text">
</h2>
</tr>
<tr>
<h2>设置密码：
<input type="passbox
</h2>">
</tr>
<tr>
<h2>真实姓名：
<input type="text">
</tr>
<tr>
<h2>性别：
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</h2>
</tr>
<tr>
<h2>生日：
<h2>年
<select>
<option selected disabled>请选择</option>
<option >2004</option>
</select>
</h2>
<h2>月
<select>
<option selected disabled>--</option>
<option>1</option>
</select>
</h2>
<h2>日
<select>
<option selected disabled>--</option>
<option>11</option>
</select>
</h2>
</h2>
</tr>
<td>
<h2>我现在：
<select>
<option selected disabled>请选择身份</option>
<option>学生</option>
</select>
</h2>
</td>
</table>
</form>
</body>
</html>
20.表单表格组合
21. div与span
1.<div>（块)
表示分割与分区，可以嵌套多个<div>
用来将网页分割成独立、不同的部分，来实现网页的规划与布局
2.<span>（内联)
用来修饰文字，看不出独立的区域
注：他们两都没有任何默认样式，需要css的配合
3.
4.标签身上添加样式
22.CSS基础语法
1.格式
选择器｛属性1：值1；属性2：值2｝
2.标签内添加样式
<style> </style>
注：style添加的注释在<body>里可以用，没有添加的不可以用。如图下，div添加了注释，在后面<body>里可以作用，但span没有在style里添加，故后面span没有样式。
3.单位
px -> 像素（pixel）
% -> 百分比
4.基本样式
width（宽)、height（高)
background-color（背景颜色）
5.CSS注释
/*CSS注释的内容*/
22.CSS样式的引入样式
1.内联样式
style属性
2.内部样式
style标签
区别：
内部样式的代码可以复用，符合w3c的规范标准，进行让结构和样式分开处理
3.外部样式
- 引入一个单独的css文件，name，css
- 通过<link>标签引入外部资源，rel属性指定资源跟页面的关系，href属性表示资源的地址。
- 通过@import引入外部样式（这种方式有很多问题不建议使用）
23.CSS中的颜色表示法
- 单词表示法：red，blue，green....
- 十六进制表示法：0123456789abcdef #000000 (黑色) #ffffff（白色）
- rgb三原色表示法: rgb(225,225,225)
- 取值范围0～255
- 获取颜色的工具
http://www.baidufe.com/fehelper/
Photoshop工具
24.背景样式
25.css边框样式
颜色：透明颜色 transparent
26.CSS文字样式
注：字体名有空格时需要引号
- font -size：字体大小
默认：16px
写法：number(px) I 单词（small large....不推荐使用）
注：字体大小一般是偶数，目的为了对齐
- font-weight：字体粗细（两种）
模式：正常（nomal） 加粗（bold）
写法：单词（normal、bold）
number（100 200 ......900，100到500都是正常的，600到900都是加粗的）
- font-style：字体样式（两种）
模式：正常（normal） 斜体（italic/oblique）
写法：单词（normal、italic）
注：oblique用的比较少，了解即可
区别：
italic所有可以带倾斜字体的可以设置
oblique没有倾斜属性的字体也可以设置倾斜操作
- color：字体颜色
27.CSS段落样式
1. text-decoration：文本修饰
- 下划线：underline
- 删除线：line-through
- 上划线：overlion
- 不添加任何装饰：none
注：添加多个文本修饰，用空格隔开
2.text-transform：文本大小写取值
- 小写：lowercase
- 大写：uppercase
- 只针对首字母大写：capitalize
3.text-indent：文本缩进
- 首行缩进
- em单位：相对单位，1em永远都是跟字体大小相同
4.text-align：文本对齐方式
- left、right、center、justify（两端点对齐）
5.line-height：定义行高
- 定义：一行文字的高度，多行文字中的上边距与下边距相同
- 默认行高：不是固定值，而是变化的，根据当前字体的大小在不断的变化
- 取值：number（px） I scale（比例值，跟文字大小成比例）
6.letter-spacing：字之间的间距
7. word-spacing：词之间的间距（针对英文段落）
28.CSS的复合样式
29.CSS选择器
3231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
