Web前端视频学习笔记（手机初稿）
HTML+CSS系列教程
目录
一、拨云见日
HTML
CSS
切图流程
PC企业站布局
PC游戏站布局
二、溯本求源
扩展HTML
扩展CSS
HTMLS新语法
CSS3新语法
兼容与hack
三、风生水起
弹性布局
网格布局
移动端布局
响应式布局
Bootstrap
四、巧夺天工
预编译css
postcss
CSS架构
高级功能
CSS与JS交互
感兴趣、够努力！
一
- 什么是html和css？
是做网站的编程语言
- 怎样看见网站的原始代码？
鼠标右击选择查看网页源代码
- 如何写代码？写到哪里去？
①一个网站是由多个网页构成的，
每一个网页是 .html文件
HtmlCSS
- 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选择器
Web前端视频学习笔记（手机初稿）相关推荐
- Web前端教程学习笔记1.2-2022.10.17始
引言部分: 一.拨云见日(HTML.CSS.切图流程.PC企业站布局.PC游戏站布局) 二.溯本求源(扩展HTML.扩展CSS.HTML5新语法.CSS3新语法.兼容与hack) 三.风生水起(弹性布 ...
- Web前端-HTML学习笔记一
一.HTML(Hyper Text Markup Language) HTML:超文本标记语言(可支持文本.图片.音频.视频.动画) HTML发展 1993 HTML 1999 HTML4 2013 ...
- Web前端开发 学习笔记（一）
Day 1 课程内容 一.字符编码 字符编码(英语:Character encoding)也称字集码,是把字符集中的字符编码为指定集合中某一对象(例如:比特模式.自然数序列.8位组或者电脉冲),以便文 ...
- Web前端HTML-CSS学习笔记
HTML 块元素 <!-- 块元素:独占一行,默认宽是100%标题标签:h1-h6段落标签:p盒子:div水平线:hr 没有结束标签--> 标题 通过 – 标签定义 字体大小,文本粗细 & ...
- Web前端开发学习笔记（2）（css3新特性）
一.圆角边框与阴影 圆角边框(border-radius) border-top-left-radius 左上角的形状 border-top-right-radius 右上角的形状 border-bo ...
- Web前端系统学习——课程笔记（章节8-9）
Web前端系统学习--课程笔记 课程链接:WEB前端系统学习 - 网易云课堂 参考教程:菜鸟教程 笔记链接:Web-Learn-Note 章节8 表格与表单 课时30 表格嵌套规则 样式初始化 14: ...
- web前端需要学习什么？需要掌握什么技术
1.Web前端是什么意思 Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页. 用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制 ...
- web前端从学习到学废
web前端从学习到学废 了解web前端 1.HTML.CSS系列之导学 2.什么是HTML.CSS? 3.宇宙第一编辑器VSCode 4.chrome浏览器 5.深入了解网站开发 6.web三大核心技 ...
- 前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型 是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
最新文章
- JAVA——RSA加密【X509EncodedKeySpec、PKCS8EncodedKeySpec、RSAPublicKeySpec、RSAPrivateKeySpec】
- BG.Hive - part1
- 【matlab-7】Matlab与线性代数(三)
- python web开发 CSS基础
- 表情可字怎么打_小辫子表情怎么打？两根毛表情符号复制
- 前端必须要有的学习能力
- TMOD TCON SCON
- 《雍正皇帝》文化专有词翻译策略的研究现状（纽马克）
- 【易通慧谷】供应链金融六大模式解析
- 2020浙江省赛打铁记
- Python大法之告别脚本小子系列—信息资产收集类脚本编写(下)
- @loj - 2478@「九省联考 2018」林克卡特树
- 忆阻器交叉开关阵列中的长短期记忆(LSTM)神经网络
- html加入3d模型的,3dmax怎么给模型添加材质
- 如何把文本文字转换为语音
- MATLAB实现控制系统的根轨迹分析
- 使用dba_waiters检查锁等待
- python-查找字符串
- 手机中毒变“肉鸡” 个人信息1元贱卖
- MATLAB 修改绘图figure界面背景颜色