1.什么是HTML CSS
是做网站的编程语言。
浏览器把代码解析后的养殖就是我们看到的网站,如何看到网站的原始代码呢?通过鼠标右键选择查看网页源代码。
如何去写代码?写到哪里呢?
- 一个网站是由N多网页组成的。每一个网页 .html文件
- 电视剧,40集。 .mp4文件
2.VSCode编辑器或者JetBrains WebStorm
VSCode插件:语言包、open in browser、view in browser
学习编辑器基本使用:
- 设置:文件->首选项->设置(大小、是否换行word wrap)
- 创建文件、创建文件夹、重命名和删除、搜索
- Ctrl+Y:前进
- Shift+end:从光标到结尾选中一行
- Shift+home:从光标到开始选中一行
- Shift+Alt+↓:Ctrl+D:快速复制一行
- Alt+↑或↓:快速移动一行
- Alt+鼠标左键:多光标
3.Chrome浏览器
Chrome下载地址:https://www.google.cn/intl/zh-CN/chrome/
市场份额约https://www.51.la/ranking/browser 大于50%
4.深入了解网站开发?
- UI设计师:设计稿
- web前段开发工程师(H5开发)
- 设计稿->代码
- 数据库里的数据->显示到页面
- HTML+CSS
- HTML:结构
- CSS:样式
- web后端开发工程师
5.web三大核心技术
- HTML
- CSS
- JavaScript
6.HTML基本结构和属性
-
HTML:超文本 标记 语言
- 超文本:文本内容+非文本内容(图片、视频、音频等)
- 标记:<单词>单词>
- 语言:编程语言
-
标记也叫做标签:
- 单标签:
- 双标签:<p></p>
- 创建标签的快捷键:单词+tab-><单词>单词>
- 单标签:
-
标签可以是上下排列,也可以组合嵌套
-
HTML常见标签:http://www.html5star.com/manual/html5label-meaning/
-
标签的属性:用来修饰标签的,设置当前标签的一些功能。
<标签 属性=“值” 属性2=“值2”>
7.HTML初始代码
- 每个.html文件都有的代码叫做初始代码,要符合html文件的规范写法
- !+tab键:快速创建html的初始代码
<!doctype html>
:文档声明,告诉浏览器这是一个html文件<html lang="en">
:html文件的最外层标签,包裹着所有的html标签代码,lang=“en”表示是一个英文网站,lang=“zh-CN”表示一个中文网站
8.HTML注释
- 写法
<!--注释内容-->
:在浏览器中看不到,只能在代码中看到注释的内容 - 意义:
- 把暂时不用的代码注释起来,方便以后使用
- 对开发人员进行提示
- 快捷添加注释与删除注释:Crtl+/
9.标题与段落
- 标题:双标签:<h1></h1>…<h6></h6>
- 在一个网页中,h1标题最重要,并且一个html文件中只能出现一次h1标签
- h5、h6标签在网页中不经常使用
- 段落:双标签:<p></p>
10.文本修饰标签
- 强调:双标签、
- 区别:
- 写法和展示效果是有区别的,一个加粗、一个斜体
- strong的强调性更强,em的强调性稍弱
- 区别:
- 下标:
- 上标:
- 删除文本:
- 插入文本:
- 注:一般情况下,删除文本都是和插入文本配合使用的。
11.图片标签
img:单标签
- src:引入图片的地址
- alt:当图片出现问题的时候,可以显示一段友好的提示文字
- title:提示信息
- width、height:图片的大小
12.路径的引入
- 相对路径
- ./ :代表文件所在的目录(可以省略不写)
- ../ :代表文件所在的父级目录
- ../../ :代表文件所在的父级目录的父级目录
- / :代表文件所在的根目录
- 绝对路径
- https://www.test.com/HelloHBuilder/html/css/css1/000.css。
13.连接标签
- herf属性:连接的地址
- target属性:可以改变连接打开的方式,默认情况下在当前页面打开_self,新窗口打开:_blank
- base:单标签,改变连接的默认行为
14.锚点
- #号+id属性
- #号+name属性(注意name属性加给的是a标签
15.特殊字符
- &+字符
- 解决冲突,左右尖括号、添加多个空格的实现
- \<\>\
16.列表标签
- 无序列表:ul li符合嵌套的规范
- 有序列表:ol li一般用的比较少,可以用无序列表来实现
- 定义列表:dl dt dd列表项需要添加标题和对标题进行描述的内容
注:列表之间可以相互嵌套,形成多层级的列表
17.表格标签
- table、tr、th、td、caption等
- 注:之前是有嵌套关系的,要符合嵌套规范
- 语义化标签:tHead、tBody、tFoot
- 注:在一个table中,tBody是可以出现多次的,但是tHead、fHoot只能出现一次。
- align:left、center、right
- valign:top、middle、bottom
18.表单标签
form、input、textarea、select、label
- input(单标签)标签有一个type属性,决定是什么空间
- 还有一些常见的属性:checked、disabled、name、for
19.div和span
- div:做一个区域划分的块
- span:对文字进行修饰的内联
20.CSS基础语法
选择器{属性1:值1;属性2:值2}
- width:宽
- height:高
- background-color:背景色
长度单位
- px:像素
- %:百分比
21.CSS样式的引入方式
-
内联样式:style属性
-
内部样式:style标签
区别:内部样式的傣妹可以复用、符合W3C的规范标准,可以让结构和样式分开处理
-
外部样式:
- 引入以个单独的CSS文件,name.css
- 通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址
- 通过@import方式引入外部样式(这种方式有很多问题,不建议使用)
22.CSS中的颜色表示法
- 单词表示法:red blue green yellow…
- 十六进制表示法:#000000 #ffffff
- rgb三原色表示法:rega(255,255,255,1),透明度0~1
获取颜色的工具:
- 提取颜色的下载地址:https://www.baidufe.com/fehelper
- Photoshop工具