Web前端 第一周
板块布局
一、 HTML+CSS系列教程①之拨云见日
HTML
CSS
切图流程
PC企业站布局
PC游戏站布局
二、 HTML+CSS系列教程②之溯本求源
拓展HTML
拓展CSS
HTML5新语法
CSS3新语法
兼容与hack
三、 HTML+CSS系列教程③之风生水起
弹性布局
网格布局
移动端布局
响应式布局
Bootstrap
四、 HTML+CSS系列教程④之巧夺天工
预编译CSS
postcss
CSS构架
高级功能
CSS与JS交互
一、HTML
1.什么是HTML、CSS?
是做网站的编程语言。
- 浏览器把代码解析后就是我们所看到的网站。
- 网站原始代码→鼠标右键查看网页源代码
2.如何去写代码?写到哪里?
- .html文件
3.VS Code编辑器
VS code下载地址:vscode
4.编辑器的基本使用
设置:文件-首选项-设置(大小、是否换行word wrap)
Ctrl+S:保存
Ctrl+A:全选
Ctrl+X/C/V:剪切、复制、粘贴
Ctrl+Z/Y:撤销、前进
Shift+Alt:从头选中一行
Shift+home:从尾部选中一行
Shift+Alt+↓:快速复制一行
Alt+↑/↓:快速移动一行
Tab:向后缩进
Tab+Shift:向前缩进
多光标:Alt+鼠标左键
Ctrl+D:选择相同元素的下一个
5.Web前端三大核心技术
- HTML:技术
- CSS:样式
- JavaScript:行为
6. HTML的基本结构和属性
HTML:超文本 标记 语言
超文本:文本内容+非文本内容(图片、视频、音频等)
标记(标签):<单词>写法:①单标签
<header>
②双标签<header></header>
创建标签的快捷键:Tab+单词→<单词>
可上下排列,也可组合嵌套。
属性:修饰标签,设置当前标签的一些的功能<标签 属性=“值” 属性2=“值2”>
语言:编程语言
HTML常见标签:
7.HTML初始代码
每个.html文件都有的代码,要符合html文件的规范写法
!+Tab:快速的创建html的初始代码
初始代码:
<!DOCTYPE html> 文档声明:告诉浏览器这是一个html文件
<html lang="en"> html文件的最外层标签:包裹着所有html标签代码
lang="en"英文网站
lang="zh-CN"中文网站
<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>
</head>
<body>
</body>
</html>
8.HTML注释
写法:<!- - 注释的内容 - -> 在浏览器中看不到,只能在代码中看到注释的内容。
意义:
(1)把暂时不用的代码注释起来,方便以后使用
(2)对开发人员进行提示
快捷添加注释与删除注释:
- Ctrl+/
- Shift+Alt+A
9.HTML语义化
10.标题与段落
标题→双标签:<h1></h1> … <h6></h6>
一个网页中h1标题最重要且只有一个,.html文件中只能出现一次h1标签
段落→双标签:<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.引入文件的地址路径
(1)相对路径:
.在路径中表示当前路径
. .在路径中表示上一级路径
(2)绝对路径:目录下的绝对位置
14.链接标签
a→双标签<a></a>
- href属性:链接的地址
- target属性:可以改变链接打开的方式
①默认情况下:在当前页面打开_self
②新窗口打开:_blank
②例如
<!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>
</head>
<body>
<!-- <a href="http://www.baidu.com">访问百度</a>
<a href="https://www.bilibili.com">
<img src="./img/QQ图片20221008152340.jpg" alt="">
</a> -->
<a href="http://www.baidu.com"target="_blank">访问百度</a>
</body>
</html>
base→单标签:改变链接的默认行为(作用)
例:
<!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>
<base target="_blank">
</head>
<body>
<!-- <a href="http://www.baidu.com">访问百度</a>
<a href="https://www.bilibili.com">
<img src="./img/QQ图片20221008152340.jpg" alt="">
</a> -->
<!-- <a href="http://www.baidu.com"target="_blank">访问百度</a> -->
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
<a href="http://www.baidu.com">访问百度</a>
</body>
</html>
15.跳转瞄点
(1)#号+id属性
(2)#号+name属性(注:name属性加给的是a标签)
16.特殊符号
&+字符 解决冲突
17.列表标签
- 无序列表→ul li 符合嵌套的规范
正确写法:
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
注:ul和li必须组合出现,且之间不能有任何标签
错误写法:
<ul>
<p>
<li>第一项</li>
</p>
</ul>
- type属性:改变前面标记的样式(一般用CSS去控制)
ul - 有序列表→ol li 一般用得比较少,可以用无序列表来实现
<ol type="1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
- 定义列表→dl dt dd 列表项需要添加标题和对标题进行描述的内容
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
注:列表之间可以互相嵌套,形成多层级的列表。
18.表格标签
<table>
:表格的最外层容器
<tr>
:定义表格行
<th>
:定义表头
<td>
:定义表格单元
<caption>
:定义表格标题
语义化标签:<tHead>、<tBody>、<tFood>
注:在一个table中,tBody可以出现多次,tHead、tFood只能出现一次
<border>
:表格边框
<cellpadding>
:单元格内的空间
<cellspacing>
:单元格之间的空间
<rowspan>
:合并行
<colspan>
:合并列
<align>
:左右对齐方式
<valign>
:上下对齐方式
<!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>
</head>
<body>
<table border="1" cellpadding="15">
<caption>天气预报</caption>
<tr>
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
<tr>
<td rowspan="2">2022年10月26日</td>
<td>白天</td>
<td><img src="./img/QQ图片20221026142322.png" alt=""></td>
<td>有小雨,不宜出游</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/QQ图片20221026142322.png" alt=""></td>
<td>有小雨,不宜出游</td>
</tr>
<tr>
<td rowspan="2">2022年10月25日</td>
<td>白天</td>
<td><img src="./img/QQ图片20221026142448.png" alt=""></td>
<td>天气晴朗,适宜出游</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./img/QQ图片20221026142448.png" alt=""></td>
<td>天气晴朗,适宜出游</td>
</tr>
</table>
</body>
</html>
19.表单标签
<form>
:表单的最外层容器
<input>
(单标签):用于收集用户信息,根据不同的type属性值,展示不同的控件
<input>
的type属性:
<!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>
</head>
<body>
<form>
<h2>输入框:</h2>
<input type="text">
<h2>密码框:</h2>
<input type="password">
<h2>复选框:</h2>
<input type="checkbox">荔枝
<input type="checkbox">西柚
<input type="checkbox">草莓
<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>
</body>
</html>
<textarea>
:多行文本框
<select>
、<option>
:下拉菜单
<label>
:辅助菜单