把1,2合在一起了，方便查看教程指路：这里目录1.导入京东界面练习（p102-114）设置网站图标（用在标题栏和收藏栏）2.vscode使用3.html实体meta标签：语义化标签块元素和行内元素列表超链接路径：图片标签内联框架音视频表格table表单formCSS设置样式：语法：选择器：单个选择器：复合选择器：父子兄弟选择器：属性选择器伪类选择器：否定伪类：超链接伪类：伪元素选.
把1,2合在一起了，方便查看
教程指路：这里
目录
解决方法（BFC）：Block Formatting Context 块级格式化环境
并非完整笔记！主要是记录重点知识
1.导入
注释：<!-- -->
文档声明：<!doctype html>
字符集设置：<meta charset="utf-8">
京东界面练习（p102-114）
设置网站图标（用在标题栏和收藏栏）
网站图标一般都存储在网站的根目录下，名字一般都叫做favicon.ico
2.vscode使用
使用！+Tab可以生成一个完整结果
向下复制：alt+shift+向下箭头
自动生成英文文本：lorem
3.html
实体
网页中需要些特殊符号，使用html中的实体，语法为: &实体名字；
例如：
> <
meta标签：
description：用于指定网站的描述，显示在结果页面
http-equiv：用于重定向，时间+网址
语义化标签
<strong></strong>
<blockquote></blockquote>长引用，<q></q>短引用
块元素和行内元素
块元素中可以放任何东西（<p>内什么都不能放）
行内元素是不可以使用width和height来设置
我们可以使用display来设置元素显示的类型：
inline表示将元素设置为行内元素
block表示将元素设置为块元素
inline-block（尽量不用）表示将元素设置为行内块元素，可以设置宽高但是不会独占一行
none元素不在页面中显示
visiblity用来设置元素的显示状态
visible默认值，元素在页面中正常显示
hidden元素在页面中隐藏，不显示，但是依旧占据位置
列表
无序列表<ul>
有序列表<ol>
自定义列表<dl>
list-style:设置样式
超链接
<a>是一个行内元素，其中可以嵌套任何元素（除自身）
其中的href属性为跳转路径，如果设置为#，返回顶部。href="#"
如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转
动href="javascript:;"表示一个空的跳转，也就是什么都不懂
target属性：打开超链接的方式，_self在当前页面打开,_blank新页面打开
路径：
./当前文件所在目录 ../表示上级目录
图片标签<img>
这是一个替换元素。
src：路径，alt：显示不出来就显示alt中文字，并且搜索引擎根据alt中的内容来识别图片
内联框架<iframe></iframe>
用于向当前页面中引入一个其他页面,网页中嵌套网页
src：指定要引入的网页的路径
frameborder：边框
音视频
音视频文件引入时，默认情况下不允许用户控制
<audio></audio>替换元素，src，source都是指明地址，source可以指定失败时的文字，可以多版本文件选择，兼容性更好。
controls：允许用户控制，autoplay：设置自动播放，loop：循环播放
<video></video>替换元素，src
表格table
tr表示一行
td表示单元格
td，可以使用vertical-align和text-align修改td中内容的位置
colspan：横向合并单元格，例如
rowspan：纵向合并单元格
表格同样可以分为三个部分：thead，tbody，tfoot
如果表格中没哟砽tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
tr不是table的子元素，而是tbody的子元素。
border-spacing：指定边框之间的距离
border-collapse：设置边框的合并
表单form
属性：action：需要提交的地址
input：text文本框，submit提交按钮，password密码框
提交必须要有一个name
单选按钮type=“radio”，必须是相同的name属性，checked默认选中
多选框type=“checkbox”，
下拉选项：select，option
自动补全：autocomplate=“off”
只读数据会提交：readonly 禁止数据不会提交 disabled
自动获取焦点：autofocus
CSS
设置样式：
0.通常情况下我们需要去除浏览器的默认样式，
*{margin：0；padding：0；}
1.通过标签内style属性来设置元素样式---内联样式表
例如：style="color:red;font-size:60px"
2.写到head中的<style></style>中的标签---内部样式表
div{内容}
3.样式编写到css文件中---外部样式表
在head中连接到外部样式表
例如：<link rel="stylesheet" href="./style.css">
编写到外部文件，可以使用浏览器的缓存机制，加快网页的加载速度，提高用户体验。
语法：
注释：/**/
选择器 声明块（名：值；）
选择器：
单个选择器：
元素选择器：直接把元素名写下来即可
id选择器：语法：#id属性值 { }
class选择器：语法：.class属性值{ }，多个class可以使用空格隔开
通配选择器：* { }
复合选择器：
交集选择器：语法：选择器1选择器2选择器3 { }
如果有元素选择器，必须使用其开头
并集选择器：选多个选择器
语法：选择器1，选择器2，选择器3 { }
父子兄弟选择器：
子元素选择器：语法：父元素>子元素
注意只能隔一代，孙子元素不行
后代元素选择器：语法：祖先 （空格）后代
既可以隔一代也可以多代，选择的是全部
兄弟元素选择器
选下一个兄弟 语法：前一个+后一个
选下边所有的兄弟 语法：前一个~后面所有
属性选择器
语法：【属性名】选择含有指定属性的元素
【属性名=属性值】选择含有指定属性和属性值的元素
【属性名^=属性值】选择属性值和指定值开头的元素
【属性名$=属性值】选择属性值和指定值开头的结尾
【属性名*=属性值】选择属性值中含有指定值的
伪类选择器：
不固定的元素可以使用伪类标签添加样式
开头第一个元素： ：first-child 例如：ul>li:first-child{}
最后一个元素： ：last-child
第n个子元素： ：nth-child(n) 如果写n表示全选，2n表示选中偶数，2n+1为基数
odd表示奇数，even表示偶数
以上这些伪类都是根据所有的子元素排序，如下例子第一个为span，所以如果我们设置ul>li:first-child{}就无效。因为没有第一个li
如果需要在相同类型元素中排序我们可以使用,用下述伪类选择器就可以忽略掉上栗中的span。
:first-of-type :last-of -type :nth-of-type
否定伪类：
：not（）将符合条件的元素从选择器中去除，如下例子：除了第三个元素都设置为绿色
超链接伪类：
：link用来表示正常的链接（不论是否访问过）
：visited用来表示访问过的链接，由于隐私的问题，所以visited伪类只能修改链接的颜色
：hover用来表示鼠标移入的状态，悬停状态
：active用来表示鼠标点击，正在点击
伪元素选择器：
表示页面中特殊的位置。使用：：例如选择第一个字母：p：：first-letter{}
：：first-letter 第一个字母
：：first-line 第一行
：：selection 表示选中的内容（鼠标选中内容）
：：before 元素的开始
：：after 元素的结束，这两个必须结合content属性使用，并且鼠标无法选中
例如：
权重
继承
单位
字体：
px：像素
em：相对于当前字体大小
rem：相对于当前html字体大小
颜色：
最低0.47元/天 解锁文章
1770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
