文章目录

软件安装
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

插件

颜色主题：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时生效。
　　　　　另有

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

前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
前端笔记（3）css，选择器，文字文本属性，外观属性
CSS样式表(1) (1)css概念引入css的三种方法行内式(内联样式) 内部样式表(内嵌样式表) 外部样式表(外链式) (2)css选择器 css基础选择器标签选择器类选择器 id选择器 ...
Pink老师前端笔记-CSS第六天
Pink老师前端笔记-CSS第六天 # day08-前端基础CSS第六天今日目标能够说出为什么要用定位能够说出定位的 4 种分类能够说出 4 种定位各自的特点能够说出为什么常用子绝父相 ...
移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
Henry前端笔记之 CSS相关
Henry前端笔记之 CSS相关深入理解vertical-align和line-height的基友关系深入理解vertical-align和line-height的基友关系详见:基友理解 px. ...
[前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天学习目标: 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式 ...

【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 常用元素