一、导学
HTML+CSS系列教程:
A 拨云见日:
HTML→CSS→切图流程→PC企业站布局→PC游戏站布局
B 溯本求源:
扩展HTML→扩展CSS→HTML5新语法→CSS新语法→兼容与hack
C 风生水起:
弹性布局→网格布局→移动端布局→响应式布局→Bootstrap
D 巧夺天工:
预编译CSS→postcss→CSS架构→高级功能→CSS与JS交互
二、拨开云雾见天日 守得云开见月明
1.什么是HTML和CSS:
是做网站开发的编程语言
浏览器把代码解析后的样子就是我们看到的网站
- 如何看到网站的原始代码呢?
通过鼠标右键选择查看网页源代码 - 一个网站是由N个网页组成的(每个网页=xx.html文件)
- 创建xx.html文件最简单的方法
目录(xx盘)→右键/新建/文本文档/重命名xx.html→右键/打开方式(拖拽/双击)/记事本 - HTML的定义:全称为超文本标记语言,是一种标记语言。包括一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
- CSS的定义:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.宇宙第一编译器VS Code
定义:全称Visual Studio Code,来自微软,是一个开源的、基于Electron的轻量代码编辑器
下载地址:添加链接描述
- 安装编辑器插件
左侧→扩展→输入/自定义插件(语言包、open in brower/view in brower)→安装 - 编辑器基本使用
创建文件、创建文件夹、重命名、删除和搜索
设置:文件→首选项→设置(大小、是否换行、word、wrap) - 快捷键使用
ctrl+s:保存
ctrl+a:全选
ctrl+x:剪切
ctrl+c:复制
ctrl+v:粘贴
ctrl+z:撤销
ctrl+y:前进
shift+end: 从头选中一行
shift+home: 从尾选中一行
shift+alt+向下键: 快速复制一行
shift+alt+向上键或向下键: 快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标:alt+鼠标左键
ctrl+d:选择相同元素的下一个
3.chrome浏览器
Chrome下载地址:添加链接描述
市场上常见的浏览器:IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器
4.深入了解网站开发
团队配合,不可或缺
- UI设计师:设计稿
- Web前端开发工程师(H5开发):
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
HTML:结构
CSS:样式 - Web后端开发工程师
JavaScript与HTML、CSS之间的关系:
- HTML与CSS、JS是不同的技术,可以独立存在
- HTML一般需要CSS和JS来配合使用,否则单一HTML文档无论是功能还是展示上效果都不理想
- CSS一般是不能脱离HTML或XML的,如果CSS脱离了HTML和XML,那就没有存在的必要的; JS可以脱离HTML和CSS而独立存在
- JS可以操作HTML和CSS
5.Web前端三大核心技术
- HTML:结构
- CSS:样式
- JavaScript:行为
6.HTML基本结构与属性
HTML:超文本标记语言
- 超文本:文本内容+非文本内容(图片、视频、音频等)
- 标记(标签):<单词>
1.写法分为两种:
a 单标签 <单词>
b 双标签 <单词></单词>
2.创建标签的快捷键:单词+tab键→<单词>
3.标签是可以上下排列,也可以组合嵌套
4.标签属性:来修饰标签的,设置当前标签的一些功能
<标签 属性=“值” 属性2=“值2”……>
7.HTML初始代码
定义:每一个html文件都需要添加初始代码,初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码
!+tab键:快速创建html文件的初始代码
<!DOCTYPE html> 文本声明:告诉浏览器这是一个html文件
<html lange="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>
8.HTML中的注释
写法:<!- - 注释的内容 - - > 在浏览器中看不到,只能在代码中看到注释的内容
意义:
- 吧暂时不用的代码注释起来,方便以后使用
- 对开发人员进行提示
快捷添加注释与删除注释:
- ctrl+/
- shift+alt+a
9.HTML语义化
定义:所谓HTML语义化指的是,根据网页中内容的结构,选择适合的HTML标签进行编写
好处:
- 在没有CSS的情况下,页面也能呈现出很好的内容结构
- 有利于SEO,让搜索引擎爬虫更好的理解网页
- 方便其他设备解析(如屏幕阅读器、盲人阅读器等)
- 便于团队开发与维护
网页标签:添加链接描述
10.标题与段落
- 标题 (双标签) :
<h1></h1>......<h6></h6>
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签 - h5、h6标签在网页中不经常使用
段落 (双标签):<p> 段落内容 </p>
11.文本修饰标签
<strong> </strong>:表示强调,会对文本进行加粗 (双标签)
<em> </em>:表示强调,会对文本进行斜体(双标签)
区别:
- 写法和展示效果是有区别的,一个加粗,一个斜体
- strong的强调行更强,em的强调性稍弱
<sub> </sub>:下标文本
<sup> </sup>:上标文本
<del> </del>:删除文本
<ins> </ins>:插入文本
注:一般情况下,删除文本都是和插入文本配合使用的
12,图片标签与图片属性
<img> :图片(单标签)
属性
- src:引入图片地址
- alt :当图片出现问题的时候,可以显示一段友好的提示文字
- title :提示信息
- width、height: 图片的大小(数字)
13.引用文件的地址路径
a .相对路径:
- 在路径中表示当前路径
- 在路径中表示上一级路径
b .绝对路径
14.跳转链接
- a→双标签:
href属性:链接的地址
target属性:可以改变链接打开的方式,默认情况下,在当前页面打开_self ,在新窗口打开_blank - base→单标签:作用就是改变链接的默认行为的
15.跳转锚点
- 实现一:#号 + id属性
- 实现二:#号 + name属性(注意name属性加给的是a标签)
16.特殊符号
编写一些文本时,经常会遇到输入法无法输入的字符,如注册商标、版权符等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为中心特殊字符准备了专门的代码
& + 字符
解决冲突啊 左右尖括号、添加多个空格的实现
常用:<;%gt;7nbsp;
17.无序列表
<ul> 、<li>:列表的最外层容器、列表项 (符合嵌套的规范)
注:ul和li必须是组合出现的,他们之间是不能有其他标签的
正确写法
<ul>
<li>......</li>
<li>......</li>
</ul>
type属性:改变前面标记的样式(一般都是用CSS去控制)
18.有序列表
<ol> 、<li>:列表的最外层容器、列表项
注:有序列表用的非常少,经常用的是无序列表,无序列表,无序列表可以代替有序列表
type属性:改变前面标记的样式(一般都是用CSS去控制)
19.定义列表
定义:列表项需要添加标题进行描述的内容
<dl> :定义列表
<dt> :定义专业术语或名词
<dd> :对名词进行解释和描述