把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字体大小
颜色: