【coderwhy前端笔记 - 阶段一 HTML+CSS】（一）HTML

hippyoo

已于 2023-07-16 22:07:09 修改

阅读量1.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签：前端学习 html

于 2022-11-09 23:43:32 首次发布

本文链接：https://blog.youkuaiyun.com/hippyoo/article/details/127780323

前端学习笔记专栏收录该内容

6 篇文章

订阅专栏

文章目录

软件安装
1　vscode
2　常用工具
HTML
1　快捷键
2　HTML结构
- 2.1　整体结构
- 2.2　文档声明
- 2.2 ＜html＞＜/html＞
- 2.3 ＜head＞＜/head＞
- 2.4 ＜body＞＜/body＞
3　body常见元素
- 3.1　常用元素
- 3.2　不常用元素
- 3.3　全局属性
4　列表
- 4.1　列表元素
- 4.2　常见列表
5　表格
- 5.1　元素
- 5.2　边框 CSS
- 5.3　合并
6　表单
- 6.1　表单属性
- 6.2　常用元素
7　Emmet语法
- 7.1　子代（>），兄弟（+）
- 7.2　多个（*），上一级（^）
- 7.3　分组（ () ）
- 7.4　属性内容
- 7.5　数字（$）
- 7.6　隐式标签
- 7.7　css简写
8　HTML5 新增的元素
- 8.1　语义化元素
- 8.2　音频元素　video　audio
- 8.3　input
- 8.4　data-*　自定义数据属性
9　前端代码步骤
10　BFC　块级格式化
- 10.1　作用一：解决折叠问题
- 10.2　作用二：浮动时高度塌陷

软件安装

1　vscode

插件

颜色主题：Atom One Dark Theme
中文：chinese
浏览器查看： open in browser、live server
更新文件夹图标：VSCode Great Icons
自动重命名标签：auto rename tag
px 转换 rem：px to rem
js快捷输入：ES7+ react/redux/re…

配置

自动保存：文件 - 自动保存
代码区文字大小：文件 - 首选项 - Editor
自动换行：文件 - 首选项 - wrap
空格渲染：文件 - 首选项 - render Whitespace
代码缩进：文件 - 首选项 - tab size

2　常用工具

Snipaste截图贴图、GIF截图、windows on top窗口置顶

HTML

1　快捷键

说明	方法
html外框	!
嵌套输入	div>ul>li

2　HTML结构

2.1　整体结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.2　文档声明

<!DOCTYPE html>

告诉浏览器当前页面是HTML5
必须放在 HTML文档的最前面，不能省略
让浏览器用HTML5的标准去解析识别内容

2.2 ＜html＞＜/html＞

<html lang = "en"></html>

< html >元素表示一个 HTML 文档的根，也称为根元素
css类中称为 :root
lang属性： lang = "en" 英文，lang = "zh-CN" 中文。帮助语音合成工具确定要使用的发音,帮助翻译工具确定使用的翻译规则。

2.3 ＜head＞＜/head＞

规定文档相关的配置信息，也成为元数据，包括文档的标题title、引用的文档样式style、脚本等，可以理解为对整个页面的配置
常见元素：
- <title>网页标题</title>
- <meta>
  - <meta charset="UTF-8">
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端设置
- <link>

<link rel="stylesheet" href="index.css"> <!-- css表 -->
<link rel="dns-prefetch" href="网页地址"> <!-- 用户点击链接之前进行DNS查询和协议握手 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!--站点图标-->
<link rel="stylesheet" type="text/css" href="xxx.css">			<!--作为默认样式表-->
<link rel="alternate" type="text/css" href="xxx.css">			<!--作为可替换样式表-->

2.4 ＜body＞＜/body＞

所有元素：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
常用元素：p、h，img、a、iframe，div、span 等
进阶学习：ul、ol、li，button、input，table、thead、tbody、thead、th、tr、td 等
新增元素：再说

3　body常见元素

3.1　常用元素

（1）img - 图片 - (image)

不用绝对路径，常用相对路径，结尾不用 /

（2）a - 标签 - (anchor)

网页中锚点用法

<div id="dian"></div>  <a href="#dian"></a>

两个属性：地址href、打开方式target

<a href="地址" target="_self">默认值，当前窗口</a>
<a href="地址" target="_blank">新窗口</a>
<a href="地址" target="_top">最顶层窗口打开（需结合iframe）</a>
<a href="地址" target="_parent">父级窗口打开（需结合iframe）</a>

地址常用存放方法

<a :href="url"></a>
<script>
	const url = "https://........"
</script>

图片跳转链接

<a href="地址" target="_self">
	<img src="地址" alt="">
</a>

其他地址

<a href="地址/xxx.zip" target="_blank">下载压缩包</a>
<a href="mailto:123@qq.com" target="_blank">发邮件给123</a>

（3）iframe

禁止他人访问设置：X-Frame-Options: sameorigin，只允许同源链接访问
基础设置
frameborder取值：1 ---- 显示，0 ---- 不显示

<iframe src="地址" width="800" height="600" frameborder="0"></iframe>

a 标签 + iframe


01.html
<div>第1层</div>
<a href="https://www.taobao.com/" target="_self">打开淘宝啊</a>
02.html
<div>第2层</div>
<iframe src="01.html" frameborder="1"></iframe>
03.html
<div>第3层</div>
<iframe src="02.html" frameborder="1"></iframe>

效果图：
在这里插入图片描述请添加图片描述

（4）H - 标题 - (heading)

h1 -> h6

（5）p - 段落 - (paragraph)

文章段落

（6）div - (division)

分割内容的容器

（7）span

区分特殊文本，同行显示

3.2　不常用元素

strong 偶尔使用，加粗

i 内容倾斜，目前通常用css完成

code 显示代码、等宽字体

<code>一段电脑代码 print("Hello World")</code>

br 换行，已经不用

3.3　全局属性

id：唯一标识符
class：元素类名
style：内联样式
title：信息文本，鼠标移至旁边会有提示

4　列表

4.1　列表元素

常见的列表结构：
- div 格式
- 使用列表元素
按照自己的风格来布局
- 列表元素默认的CSS样式，用起来不是非常方便
- 列表元素有很多限制，如：ul / ol 中只能存放 li，li再存放其他元素，默认样式等
- 虽然我们可以通过重置来解决，但是我们更喜欢自由的div

4.2　常见列表

HTML提供了 3 组常用的列表元素

有序列表：ol > li
无序列表：ul > li
定义列表：dl > dt、dd

一般需要去掉默认样式padding:0; margin:0; list-style:none;
li标签内容前的小标设置 list-style-type: ;

（1）有序列表：ol > li

ol（ordered list）：直接子元素只能是 li；li（list item）：列表中的每一项

（2）无序列表：ul > li

直接子元素为 li

（3）定义列表：dl > dt、dd

直接子元素为 dt、dd
dt（definition term）：term 是项的意思，列表中每一项的项目名
dd（definition description）：内容，dt 后紧跟着一个或多个 dd
代码：在这里插入图片描述效果:

5　表格

5.1　元素

原始表格

table 表格
tr（table row）行
td （table data）单元格

增加其他元素

thead 表头
tbody 表格的主体
tfoot 表格的页尾
caption 表格的标题
th 表格的表头单元格

表格重构如下

<table>
	<caption>表格标题</caption>
	<thead>
		<tr><th>表格头头</th></tr>
	</thead>
	<tbody>
		<tr><td>表格内容</td></tr>
	</tbody>
	<tfoot>
		<tr><td>表格结尾</td></tr>
	</tfoot >
</table>

效果：在这里插入图片描述

5.2　边框 CSS

table { 
  border-collapse: collapse; /*表格内的边框：collapse 合并，separate 分开 */
}
table tr td[rowspan] {
  font-size:16px;
} /* 获取元素加粗 */

5.3　合并

跨列　|　，左列和右列，1-1 和 1-2
跨行　— ，上行和下行，1-1 和 2-1

项目	Value
1-1	1-2
2-1	2-2

在这里插入图片描述

<tr>   <td colspan="2">1-1</td>   <!-- <td>1-2</td> -->         </tr>
<tr>       <td>2-1</td>               <td>2-2</td>              </tr>

<tr>       <td>1-1</td>         <td rowspan="2">1-2</td>        </tr>
<tr>       <td>2-1</td>         <!--<td>2-2</td> -->            </tr>

6　表单

6.1　表单属性

form 通常作用表单的外壳，将表单作为一个整体来操作（如：重置、提交）

action：提交表单数据的请求URL
method：请求方法（get 和 post ），默认 get。
target：参考 a 元素的 target

请求方式对比
get：http://www.baidu.com/login?number=234&password=123
post：http://www.baidu.com/login，隐藏请求的内容“number=234&password=123”

6.2　常用元素

form 表单，一般情况下，其他表单相关元素都是它的后代元素
input 单行文本输入框、单选框、复选框、按钮等元素
select 下拉选择框
option 下拉选择框
textarea 多行文本框
button 按钮
label 表单元素的标题

（1）input 输入框

input的表现为行内替换元素，但因形式多样，也是非标准的行内替换元素，input的详细描述。

type属性： text 文本框明文输入、password 文本框密文输入、radio 单选框、checkbox 复选框、button 按钮、reset 重置、submit 提交表单数据给服务器、file 文件上传、time 时间、date 日期
readonly 只读
disabled 禁用
checked 默认被选中，只有当type为redio或checkbox时可用
autofocus 当页面加载时，自动聚焦
name 名字
value 取值

（2）布尔属性

disabled 禁用、checked 被选中、readonly 只读、multiple 多选、autofocus 自动聚焦、selected 已选择
布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身

<input type='text' disabled autofous readonly>
<!-- 等价于 -->
<input type='text' disabled='disabled' autofous='autofous' readonly='readonly'>

（3）button

有两种写法：input 按钮：<input type="button" value="按钮一">
　　　　　　button 按钮 <button>按钮二</button>

input 的按钮一般用于表单中的 <重置> 和 <提交> 按钮

<input type="reset" value="重置">和<input type="submit" value="提交">

<input type="button" value="按钮一"> 为普通按钮

（4）input 与 label 的关系

label 元素一般跟 input 配合使用，用来表示 input 的标题
label 可以跟某个 input 绑定，点击 label 就可以激活对应的 input 变成选中
（ label 的 for 与 input 的 id 关联了）

<label for="username">
  用户：<input id="username" type="text">
<label>

（5）radio　单选框

name 将性别男女归组，两个 radio 互斥

<label for="male">
  <input id="male" type="radio" name="sex" value="male">男
<label>
<label for="female">
  <input id="female" type="radio" name="sex" value="female">女
<label>

（6）checkbox　复选框

您的爱好：
<label for="male">
  <input id="male" type="checkbox" name="sex" value="male">男
<label>
<label for="female">
  <input id="female" type="checkbox" name="sex" value="female">女
<label>

（7）textarea　多行输入框

cols 宽度，列数，rows 高度，行数

<textarea name="info" id="inputLabel" cols="30" rows="10">

缩放的 css 设置

禁止缩放：resize: none
水平缩放：resize: horizontal
垂直缩放：resize: vertical
水平垂直缩放：resize: both

（8）select 和 option 的使用

option 是 select 的子元素，一个 option 代表一个选项
select 常用属性
- multiple：可以多选
- size：显示多少项
option 常用属性
- selected 默认被选中

<select name="fruits" id="" multiple size="2">
  <option value="apple" selected>苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
</select>

注意：每个 option 都可以加上 label

7　Emmet语法

一个提高前端开发效率的工具，输入 html 或 css 缩写后，按 tab 或 enter 自动生成代码

7.1　子代（>），兄弟（+）

div > h1 + p

7.2　多个（*），上一级（^）

ul > li * 10，多个
上一级：设 div 下有四个子元素：span p h1 p （兄弟关系），其中 h1 下包含元素 span 和 i，有两种写法
- div > span + p + ( h1 > span + i ) + p
- div > span + p + h1 > span + i ^ p
^ 可以写很多个，但最终只能到 body 元素

7.3　分组（ () ）

( div > span + p ) + div > p

7.4　属性内容

a[href="www.baidu.com"]{百度一下} = <a href="www.baidu.com">百度一下</a>
有内容： ul > li { 列表内容 } * 10
有 id：div # main
有 class：.classname

7.5　数字（$）

ul > li { 列表内容 $ } * 10
当写$$$时，表示001、002、003等

7.6　隐式标签

ul > .item * 3，自动加上 css为 item 的 li。

7.7　css简写

w100 = width: 100px;
w20+h30+m40+p50 = width: 20px;height: 30px; margin: 40px;margin: 50px
m20-30-40-50 = margin 的上右下左
dib = display: inline-block
bd1#cs （border，1px，#ccc，solid） = border: 1px solid #ccc

8　HTML5 新增的元素

8.1　语义化元素

<header>：头部元素

<nav>：导航元素

section：定义文档某个区域的元素

article：内容元素

aside：侧边栏元素

footer：尾部元素

8.2　音频元素　video　audio

（1）视频、音频

之前是通过flash或者其他的插件来实现，但无法很好支持html/css特性、兼容性问题

视频：<video>

音频：<audio>

video

<video src="../video/xx.mp4" controls></video>

video 中间是针对浏览器不支持此元素的降级处理

<video src="xx.mp4" controls width="500" autoplay muted>
	<source src="xx.webm">
	<p>以上视频格式都不可用，建议更换或升级浏览器查看</p>
</video>

在这里插入图片描述

audio

<audio src="xxx.mp3" controls autoplay muted></audio>

<audio src="xx.mp3" controls autoplay muted>
	<source src="xx.ogg">
	<p>以上视频格式都不可用，建议更换或升级浏览器查看</p>
</audio>

在这里插入图片描述

8.3　input

input文档，扩展属性：

placeholder：占位文字
multiple：多个值
autofocus：聚焦

multiple：允许用户输入多个值，input 内仅在值为email、file时生效。
　　　　　另有 👇 多选方式，但该方法不好用，一般会用复选框形式

<select multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

input 的 type 值：
date、time、number、tel、color 颜色选择器、email

8.4　data-*　自定义数据属性

<div data-name="pyy" data-age="60" class="girl">
	定义姓名和年龄
</div>
<script>
const girl =document.querySelector(".girl")
console.log(girl.dataset)
</script>

在这里插入图片描述

9　前端代码步骤

（1）先完成结构
（2）重置样式（body、a、ul）
（3）先整体、后局部；从外往里，从上往下
（4）去除重复代码（css）；将重复的逻辑放到一个单独的class中（.icon）；不同的代码抽到不同的class（.new .hot）

重置代码常用，可前往凹凸实验室规范参考

body, h1, h2, h3,ol, ul, li, p, dl, dt, dd {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none; /* 去除下划线 */
  color: #000;
  outline: none;
}
ul, ol, li {
  list-style: none;
}
input {
  outline: none;
  border: none;
}
img {
  vertical-align: top;
}
i {
  font-style: normal;
}

10　BFC　块级格式化

BFC（Block Formatting Context - 块级格式化上下文）
IFC（ Inline Formatting Context - 行内级格式化上下文）

会创建BFC的元素：
根元素<html>、浮动元素float: 不为 none、绝对定位元素position: absolute / fixed、行内块元素display: inline-block、表格单元格display: table-cell、表格标题 display: table-caption、匿名表格单元格元素、 overflow 计算值不为visible的块元素、弹性元素，display: flex / inline-block 元素的直接子元素、网格元素，display: flex / inline-block 元素的直接子元素、display: flow-root

BFC含义：

box会在垂直方向上一个挨着一个的排布；
垂直方向的间距由margin属性决定；
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

10.1　作用一：解决折叠问题

上下相邻两个box
<div class="box1">margin-bottom: 30px</div>
<div class="box2">margin-top: 10px</div>
呈现的margin为最大设置值 30px

解决方案：
<div class="box-wrapper"> overflow: auto
　　<div class="box1"> margin-bottom: 30px </div>
</div>
<div class="box2"> margin-top: 10px </div>

.box-wrapper 的 overflow:auto 使得自身已经形成了一个新的 BFC，而 .box2 仍属于 html 的BFC，（它俩不同属一个BFC，所以不会折叠）

10.2　作用二：浮动时高度塌陷

浮动元素是脱标元素。高度塌陷是子元素有高度，父元素没有高度(忽略高度)

解决方法一：
需要使用清除浮动clear: both，父元素加上样式 .clear_fix

.clear_fix::after {
	content: "";
	display: block;
	clear:both;
	height:0;
	visibility: hidden;
}

解决方法二：
父元素加上css属性：overflow: auto，前提！该父元素的height必须是auto(默认)

注意：设置这个 overflow 后，并非子元素给父元素汇报高度，而是父元素不断增加高度，直至包裹子内容。

解决方法三：加上空div

另外：关于定位元素的高度计算问题

相对定位（relative）未脱离标准流，所以父级仍有高度；
绝对定位（absolute）会脱离标准流，设置后父级便没了高度。

（未解决疑惑：父overflow: auto; position: relative，子position: absolute，子元素消失不见）

【coderwhy前端笔记 - 阶段一 HTML+CSS】（一）HTML

文章目录

软件安装

1 vscode

2 常用工具

HTML

1 快捷键

2 HTML结构

2.1 整体结构

2.2 文档声明

2.2 ＜html＞＜/html＞

2.3 ＜head＞＜/head＞

2.4 ＜body＞＜/body＞

3 body常见元素

3.1 常用元素

（1）img - 图片 - (image)

（2）a - 标签 - (anchor)

（3）iframe

（4）H - 标题 - (heading)

（5）p - 段落 - (paragraph)

（6）div - (division)

（7）span

3.2 不常用元素

3.3 全局属性

4 列表

4.1 列表元素

4.2 常见列表

（1）有序列表：ol > li

（2）无序列表：ul > li

（3）定义列表：dl > dt、dd

5 表格

5.1 元素

5.2 边框 CSS

5.3 合并

6 表单

6.1 表单属性

6.2 常用元素

（1）input 输入框

（2）布尔属性

（3）button

（4）input 与 label 的关系

（5）radio 单选框

（6）checkbox 复选框

（7）textarea 多行输入框

（8）select 和 option 的使用

7 Emmet语法

7.1 子代（>），兄弟（+）

7.2 多个（*），上一级（^）

7.3 分组（ () ）

7.4 属性 内容

7.5 数字（$）

7.6 隐式标签

7.7 css简写

8 HTML5 新增的元素

8.1 语义化元素

8.2 音频元素 video audio

8.3 input

8.4 data-* 自定义数据属性

9 前端代码步骤

10 BFC 块级格式化

10.1 作用一：解决折叠问题

10.2 作用二：浮动时高度塌陷

1　vscode

2　常用工具

1　快捷键

2　HTML结构

2.1　整体结构

2.2　文档声明

3　body常见元素

3.1　常用元素

3.2　不常用元素

3.3　全局属性

4　列表

4.1　列表元素

4.2　常见列表

5　表格

5.1　元素

5.2　边框 CSS

5.3　合并

6　表单

6.1　表单属性

6.2　常用元素

（5）radio　单选框

（6）checkbox　复选框

（7）textarea　多行输入框

7　Emmet语法

7.1　子代（>），兄弟（+）

7.2　多个（*），上一级（^）

7.3　分组（ () ）

7.4　属性内容

7.5　数字（$）

7.6　隐式标签

7.7　css简写

8　HTML5 新增的元素

8.1　语义化元素

8.2　音频元素　video　audio

8.3　input

8.4　data-*　自定义数据属性

9　前端代码步骤

10　BFC　块级格式化

10.1　作用一：解决折叠问题

10.2　作用二：浮动时高度塌陷