【笔记】html基础学习

Html基础学习笔记

标签

<div>占一行,块级元素
<span>可以一行放多个，行内元素

<img src=”图像路径” alt=”图像显示不出来时的显示文字” title=”停留显示的文字”/>

链接

<a herf=”路径 未确定时可以使用#代替” target=”弹出方式 _self _blank”>标题</a>

图片链接
<a><img src=””/></a>

锚点链接

<a herf=”#name”></a> //对应位置 id=”name”

空格：&nbsp;
小于大于 &lt;&gt;

表格

Table
Tr
Thth(表头加粗居中)
thth
Tr
Tdtd
Tdtd

Tr
table

表格属性
《table》Align=center/left/right border cellpadding=单元格内文字和边框距离 cellspacing=单元格之间

《thead》《tbody》

Rowspan=合并行单元格 colspan=合并列单元格

自定义列表
Dl(definition list)
Dt（definition term）
Dd(definition description)
Dd
Dl

表单

《form》《/form》定义表单域
属性：action=”提交给地址” method=“post/get” name=””

<input type=”” value=”” checked=””/> type:tect/button/select/image/submit/radio（单选）/checkbox（多选）（通过添加统一name确定选择域）

<label for=”目标表单元素的id”></label>

<select>
<option checked=”checked”></option>
</select>

<textarea></tectarea>

CSS

选择器+样式

基础选择器/复合选择器
基础选择器→标签……，类……，id，通配符……

类选择器 .class {}

选择器名字可以用-分段
多个类名空格隔开

id选择器 #id {}

通配符选择器 星号

字体 font-family
字体大小font-size
字体粗细font-weight:bold/700(相当于加粗)/400(相当于normal)
文字样式 font-style:italic(斜体)/normal
复合写法：font:style weight size/height family;
Text-align(水平对齐方式)
装饰文本text-decoration:underline
文本缩进 text-indent:2em(两个字符)/20px

行间距 line-height 可以用来使文字垂直居中

<link rel=”sytlesheet” herf=””> 外联css

Shift+alt+F 调整文档格式

复合选择器

后代、空格分隔 ol li {}
子类、大于号分隔（只选择子类不选孙类）
并集、逗号分隔
伪类、开头加冒号
链接伪类 a:link 未访问 a:visited a:hover a:active
要按LVHA的顺序！

光标伪类(主要针对表单) input:focus {background-color:pink;}

元素显示模式

块元素 占一行 如div h123456 p（文字类中不能放块级元素，如p，h）

行内元素 一行能放多个 如span 不能直接设置宽高（大小取决于内容） 里面只能放行内元素和文本
特殊：a里面可以放块级元素

行内块元素 可以想块元素指点宽高，也可以像行内元素一行多个

转换 display：block；/inline；/inline-block（行内块）

让行高（line-height）等于盒子高度（height）可以垂直居中

背景图片： background-image:url( );
Background-position:x y;

Background-attachment:fixed;固定背景图片在页面上，不随着滚动而滚动/scroll（默认）

Background:rgba(0,0,0,0.5)

Css三大特性：
①层叠性 就近原则
②继承性

行高的继承

③优先级 ！Important》行内》id》class》标签

盒子模型

Border-collapse:collapse;（表格单元格border合并）
边框、padding会影响盒子大小，但当盒子没有指定大小的时候，padding不会撑开盒子

Padding 内边距
Margin 外边距

margin:0 auto;(水平居中)
Text-align:center(行内、行内块元素水平居中 )

嵌套元素塌陷：子元素margin大于父元素margin会让父元素一起塌陷，可以通过给父元素加border、padding、overflow：hidden解决

Box-shadow:10px（水平阴影） 10px（垂直阴影）10px（模糊距离） 10px(阴影尺寸) color；

浮动

①浮动元素会脱离标准流，不再保留原本的位置 ②浮动的元素会在一行内显示并顶端对齐 ③浮动的元素会有行内块的特性

清除浮动→当子元素需要浮动但父元素不方便设置高度时（否则因为子元素浮动了，父元素高度会变成0）
如何清除 clear:both/left/right
①额外标签法/隔墙法 在最后一个浮动元素后加一个标签，如<br><div>（必须是块级元素）

② 父元素添加overflow属性 overflow：hidden/auto/scroll
③ （最常用！）after伪元素
④ 双伪元素

定位

定位组成=定位模式+边偏移
静态定位static 标准流特性，用的少
相对定位relative 相对于原本的位置移动， 原本的位置保留，不会脱标

绝对定位absolute 相对于祖先元素

！子绝父相 子元素使用绝对定位，则父元素需要使用相对定位

固定定位fixed 以可视窗口作为标准，会脱标，可以看作一种绝对定位的特殊情况
粘性定位（了解）

定位叠放次序 z-index:number 数字越大越在上层

加了绝对定位的盒子不能通过margin:auto水平居中，居中通过left:50%(父容器宽度一半) margin：-&px(左移自己宽度的一半)

给行内元素、块级元素添加绝对定位/固定定位和display:inline-block效果类似
（浮动元素不会压住标准流的文字，绝对定位会压住所有的内容

元素隐藏

①应用非常广！→Display：none（隐藏元素，位置不保留） (display:block既可以表示转换为块级元素，也可以表示显示元素)
②visibility inherit是继承父元素的隐藏属性

③overflow：hidden隐藏溢出的部分 scroll添加滚动条 auto有溢出则添加滚动条否则不添加

Iconfont 比精灵图更好用，放大缩小不会失真，简单的小图标可以用
在iconfont.cn下载

鼠标样式属性cursor

去除表单输入框的轮廓线 outline：none（或者0）
去除textarea的放大缩小 resize：none

Vertical-align 垂直居中（只适用于行内和行内块）
：bottom（底线，默认）middle/top/baseline

文本溢出显示省略号
①单行 white-space:nowrap;（强制一行显示）
Overflow:hidden;（隐藏溢出）
Text-overflow:ellipsis;（省略号替换溢出）

HTML5的新特性

新增的标签
代替div的标签
<header><nav><article><section><aside><footer>

音频<audio>
视频<video src=”” >(其他属性：autoplay、muted(静音播放)、controls、loop) 支持mp4/ogg

新增input的type值

新增表单属性

Required=”requird” 不允许为空
Placeholder=”提示文本”
Autofocus=”autofocus” 加载网页时光标自动锁定输入框
Autocomplete=”off/on” 自动补全，默认是on
Mutiple=”multiple” 可以多选文件提交

Css3的新特性

属性选择器

（有点像子类选择器）
标签名[属性名] {}
标签名[属性名=”属性值”] {}
标签名[属性名^=”属性值共同的开头值”] {}
标签名[属性名$=”属性值共同的结尾值”] {}

结构伪类选择器（根据文档结构进行选择）

n可以是数字、公式、关键字（even偶数，odd奇数）
Child系列是先选出第一/最后一个子元素，再对照:前的属性名，of-type是先把需要的属性全部选出来，再找第一/最后一个

伪元素选择器 必须有content属性,用来清除浮动

父元素::after {content:’’; display:block; height:0; clear:both; visibility:hiden}

Box-sizing:border-box 盒子大小不受border、padding影响

过渡变化

（经常和:hover一起使用）

Transition写在要变化的标签里，：hover中写变化的目标效果
修改多个用逗号分隔或者属性写all