Html基础

Yizhe大约 16 分钟前端Html

""

1.<h1>

将有关联的一组标签放在一个组里

<hgroup>
	<h1>Title 1</h1>
    <h2>Title 2</h2>
</hgroup>

2.块级元素

块级元素(block element)在浏览器中占据整行,并排斥其它元素与其位于同一行。也就是说,块级元素的宽度是 100%

块级元素不管宽度有多小,总是独占一行

块级元素意义
div最典型的块元素,常用
p表示段落
h1-h6表示1-6级标题(默认加粗)
br表示换行
olopen in new window有序列表
ulopen in new window无序列表

3.行内元素

行内元素又称内联元素(inline block)。在浏览器中可以与其它行内元素共占一行,只有当多个元素的总宽度大于浏览器的宽度时,才会换行显示

行内元素说明
aopen in new window超链接
span常用行级,常用
strong加粗,强调
b加粗,不强调
em斜体,强调
i斜体,不强调
imgopen in new window图片
inputopen in new window输入框
selectopen in new window下拉列表
::after伪元素

Tips:不建议在行内元素中嵌套块元素,这样不仅不符合开发规范,还会导致行内元素也独占一行。

4.blockquote

引用标签,用于引用别人的话,块级元素

相同还有q标签,自动添加一对引号,行内元素,

子曰
<blockquote>
    逝者如斯夫,不舍昼夜
</blockquote>

子曰<q>学而不思则罔,思而不学则殆</q>

5.结构标签

结构标签,用于区分网页的大致结构

标签含义
header表示网页头部
main网页主体部分
footer网页底部,或某一的区域的底部
nav导航栏
aside侧边栏
article一个独立的文章

6.定义列表

dl创建一个定义列表

dt,定义内容

dd,对内容解释说明

list-style: none 把列表项的点去除

<dl>
	<dt>三国演义</dt>
    <dd>一本好书</dd>
</dl>

7.超链接

target属性值为_self 在当前页面中打开超链接

值为_blank 在一个新的页面中打开超链接

可以通过超链接跳转到页面的任意位置,只需在任意位置的标签属性中添加id属性,在超链接的href属性中值为#+想要跳转的位置的标签的id值

超链接去除下划线 text-decoration: none;

<a href="#one"></a>
<p id="one">
    跳转到我这里
</p>

8.内联框架

用于在当前页面中引入一个其他页面

frameborder设置边框

<iframe src="www.baidu.com" frameborder="0"></iframe>

把百度页面引入到此页面

9.选择器

选择器例子例子描述
.classopen in new window.intro选择 class="intro" 的所有元素。
.class1.class2.name1.name2选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2.name1 .name2选择作为类名 name1 元素后代的所有类名 name2 元素。
#idopen in new window#firstname选择 id="firstname" 的元素。
*open in new window*选择所有元素。
elementopen in new windowp选择所有 <p> 元素。
element.classopen in new windowp.intro选择 class="intro" 的所有 <p> 元素。
element,elementopen in new windowdiv, p选择所有 <div> 元素和所有 <p> 元素。
element elementopen in new windowdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementopen in new windowdiv > p选择父元素是 <div> 的所有 <p> 元素。
element+elementopen in new windowdiv + p选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2open in new windowp ~ ul选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]open in new window[target]选择带有 target 属性的所有元素。
[attribute=value]open in new window[target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value]open in new window[title~=flower]选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value]open in new window[lang|=en]选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]open in new windowa[href^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]open in new windowa[href$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value]open in new windowa[href*="w3schools"]选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:activeopen in new windowa:active选择活动链接。
::afteropen in new windowp::after在每个 <p> 的内容之后插入内容。
::beforeopen in new windowp::before在每个 <p> 的内容之前插入内容。
:checkedopen in new windowinput:checked选择每个被选中的 <input> 元素。
:defaultopen in new windowinput:default选择默认的 <input> 元素。
:disabledopen in new windowinput:disabled选择每个被禁用的 <input> 元素。
:emptyopen in new windowp:empty选择没有子元素的每个 <p> 元素(包括文本节点)。
:enabledopen in new windowinput:enabled选择每个启用的 <input> 元素。
:first-childopen in new windowp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letteropen in new windowp::first-letter选择每个 <p> 元素的首字母。
::first-lineopen in new windowp::first-line选择每个 <p> 元素的首行。
:first-of-typeopen in new windowp:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focusopen in new windowinput:focus选择获得焦点的 input 元素。
:fullscreenopen in new window:fullscreen选择处于全屏模式的元素。
:hoveropen in new windowa:hover选择鼠标指针位于其上的链接。
:in-rangeopen in new windowinput:in-range选择其值在指定范围内的 input 元素。
:indeterminateopen in new windowinput:indeterminate选择处于不确定状态的 input 元素。
:invalidopen in new windowinput:invalid选择具有无效值的所有 input 元素。
:lang(language)open in new windowp:lang(it)选择 lang 属性等于 "it"(意大利)的每个 <p> 元素。
:last-childopen in new windowp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-typeopen in new windowp:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:linkopen in new windowa:link选择所有未访问过的链接。
:not(selector)open in new window:not(p)选择非 <p> 元素的每个元素。
:nth-child(n)open in new windowp:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)open in new windowp:nth-last-child(2)同上,从最后一个子元素开始计数。
:nth-of-type(n)open in new windowp:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个<p>元素。
:nth-last-of-type(n)open in new windowp:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。
:only-of-typeopen in new windowp:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-childopen in new windowp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。
:optionalopen in new windowinput:optional选择不带 "required" 属性的 input 元素。
:out-of-rangeopen in new windowinput:out-of-range选择值超出指定范围的 input 元素。
::placeholderopen in new windowinput::placeholder选择已规定 "placeholder" 属性的 input 元素。
:read-onlyopen in new windowinput:read-only选择已规定 "readonly" 属性的 input 元素。
:read-writeopen in new windowinput:read-write选择未规定 "readonly" 属性的 input 元素。
:requiredopen in new windowinput:required选择已规定 "required" 属性的 input 元素。
:rootopen in new window:root选择文档的根元素。
::selectionopen in new window::selection选择用户已选取的元素部分。
:targetopen in new window#news:target选择当前活动的 #news 元素。
:validopen in new windowinput:valid选择带有有效值的所有 input 元素。
:visitedopen in new windowa:visited选择所有已访问的链接。

①class选择器

为一个标签作用多个class类选择器,需要用空格隔开

.one{

	}
.two{

	}


<p class="one two">
    
</p>

②通配选择器

作用于页面中所有的元素

*{
    margin: 0;
    padding: 0;
}

③复合选择器

1.需要同时满足两个条件(交集选择器

div.red{}

代表选择class=“red”的div标签

④伪类选择器

伪类前有冒号 :

伪元素前有两个冒号 ::

伪类用来描述一个元素的特殊状态,如第一个子元素,被点击的元素

1.:first-child last-child

选择第一个此类的元素 选择最后一个此类的元素

ul > li:first-child{}--选中第一个li元素
ul > li:last-child{}--选中最后一个li元素

2.nth-child()

选择第几个此类元素

ul >li:nth-child(1)--选中第几个li元素
特殊值:n,0-无穷		2n,偶数(even)	2n+1,奇数(odd)
  • :first-of-typelast-of-typenth-of-type是只按照选中类型排序

3.not伪类

除去选中的元素

4.超链接伪类

伪类名称作用
:link设置未访问过的链接样式
:visited设置访问过的链接样式
:hover用于设置鼠标悬浮时的效果
:active表示鼠标点击时的效果

⑤伪元素选择器

伪元素作用于一些特殊的位置

伪元素代码作用
::first-letter选中第一个字母
::first-line选中第一行
::selection为鼠标拖拽选择的内容作效果
::before元素的开始,位于标签与内容之间的部分
::after元素的最后,位于标签尾与内容之间的部分

::before 和 ::after必须结合content属性来使用

选择器的权重

内联样式1000 > id选择器100 > 类选择器10 > 标签选择器1 > *选择器0 >继承选择器None

多个选择器同时使用,如 div.red ,将div和.red的权重值相加,越高的会优先显示,并集选择器不会,如,p,div,.red,则单独计算

并且同一类选择器相加再多,也不会高于前一个选择器


10.单位

emrem

1em=1font-size

p{
	font-size:20px;
	width:10em;
}
则宽度就为10*20=200px
p{
	font-size:20px;
	width:10rem;
}
则不会生效,rem的font-size依据的是根元素html的字体大小,默认是16px

11.盒子模型

1.盒子边框

border-style:指定边框的样式;
solid 表示实线
dotted 点状虚线
dashed 线状虚线
double 双线

border会改变页面布局

outline不会改变页面布局

用法一样

2.水平布局

一个元素在其父元素中,必须要满足以下等式

margin-left+border-left+padding-left+width+padding-right+border-right+marign-right=其父容器的宽度

如果相加没有达到要求,成为过度约束,则等式会将margin-right的值调整为可以达到要求的值

但是,如果,其中有的值为auto,则不会调整margin-right,而是调整auto元素的值

3.垂直布局

如果子元素超出父元素的高度,可以使用在父元素中使用overflow来处理超出的部分

overflow: hidden		直接隐藏超出的部分
overflow: scroll		会加入垂直和水平滚动条
overflow: auto			只加入垂直滚动条

overflow-x和overflow-y : 单独处理水平或垂直方向上的溢出内容

4.行内元素盒子模型

不支持设置宽度和高度
可以设置padding,但是垂直方向的padding对页面没有影响
可以设置border,但是不会影响页面
可以设置margin,但是只会影响水平布局
没有外边距重叠

display : 用于设置元素显示的类型

作用
block将元素设置为块元素
inline元素设置为行内元素
inline-block将元素设置为行内块元素,既可以设置宽高,也不是独占一行将
table将元素设置为一个表格
none元素不在页面中显示,不占位置

Tips:visibility: hidden/visible 元素隐藏或显示,仍然占位置

12.浏览器默认样式去除

*{
	margin: 0;
	padding: 0;
}

13.盒子阴影

box-shadow

box-shadow: 0px 0px 0px rgba

参数作用
第一个参数水平偏移量,相当于margin-left,正值向右移动
第二个参数垂直偏移量,相当于margin-top,正值向下移动
第三个参数模糊半径,像素越高越模糊
第四个参数阴影颜色,通常是rgba(0,0,0,0.1),第四个参数是透明,越靠近1越明显

14.圆角

border-radius

border-**-**-radius: 0px 0px

参数作用
**用于确定是四个角哪个角
第一个0px确定x轴半径长度
第二个0px确定y轴半径长度

如果两个参数不一样,就是一个椭圆

15.浮动特点

1.浮动的元素不会覆盖文字,可以设置一些文字环绕效果

2.浮动后脱离文档流,脱离后的特点

块元素特点行内元素特点
不再独占一行变成块元素,拥有块元素的特点
宽度和高度默认和内容一样

clear: 清除前面浮动元素对此元素的影响

clear: left		清除左侧的影响
clear: right	清除右侧的影响
clear: both		清除两侧中影响最大的影响

16.浮动导致的高度塌陷问题

解决方法:BFC 块级格式化环境

开启元素的BFC后元素会变成一个独立的布局区域

特点

  • 开启后的元素不会被浮动元素所覆盖
  • 开启的元素和父元素外边距不会重叠
  • 开启的元素可以包含浮动的子元素

开启BFC的方法

  • 设置元素的浮动
  • 将元素设置为块元素
  • 将元素的overflow设置为非visible的值
overflow: auto/hidden			开启BFC最优的方法

最终解决方法:

::after:为父元素设置after伪元素

.box1::after{
	content:'';
	clear: both;
	display: block;		因为after是行内元素,需要变为块元素
}

17.子元素外边距导致父元素移动的问题

使用***::before***

.box1::before{
	content: '';		空值不行
	display: table;		加上这句话就可以
}

此时子元素的外边距就不会影响父元素

18.同时解决高度塌陷和外边距重叠

.clearfix::before,.clearfix::after{
	content: '';
	display: table;
	clear: both;
}


<div class="box1 clearfix">			在div.box1中引入clearfix类,即可
    
</div>

19.定位position

position

效果
static元素静止,没有开启定位
relative开启元素的相对定位
absolute开启元素的绝对定位
fixed开启元素的固定定位
sticky开启元素的粘滞定位

相对定位

  • 开启相对定位以后,可以通过偏移量来设置元素的位置

  • 是相对于元素左上角来定位

  • 相对定位会提升元素的层级

  • 不会使元素脱离文档流

  • 不会改变行内还是块元素

代码效果
top定位元素和其上侧的距离,类似于margin-top,但是不会影响其他元素位置
left其左侧
right其右侧
bottom其下侧
.box2{
            width: 300px;
            height: 300px;
            background-color: rgb(29, 138, 138);
            position: relative;						开启相对定位
            left: 100px;							向右移动100px
	}

绝对定位

  • 绝对定位会使元素从文档流中脱离
  • 会改变元素的性质,行内变成块元素,并且会被内容撑开
  • 会使元素提升一个层级
  • 是相对于其包含块来定位的
  • 其包含块是距离此元素最近的开启了任意定位的祖先元素

值和相对定位一样

固定定位

和绝对定位一模一样,唯一的不同是,固定定位始终相对于浏览器的左上角

不会随着网页滚动条滚动

粘滞定位

当元素移动到指定位置的时候,固定在浏览器视图上

.nav{
            width: 80%;
            height: 50px;
            background-color: #c1c1c1;
            margin: 0 auto;
            margin-top: 100px;
            position: sticky;	开启粘滞定位
            top: 0;				当元素top值到达top: 0 的时候就不会随着页面滚动而移动
  
    }

20.元素水平垂直居中的方法

.box1{
	width: 100px;
	height: 100px;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
让box1盒子在父元素中水平垂直居中

21.文字的水平垂直对齐

水平对齐

text-align

效果
left左对齐
right右对齐
center居中对齐
justify两端对齐

垂直对齐

vertical-align

效果
baseline基线对齐,子元素文字底部与父元素文字底部对齐
top顶部对齐
bottom底部对齐
middle居中对齐,将子元素的中线和父元素对齐
10px用像素值调整

22.文字的特殊效果

white-space 设置网页如何处理空白

效果
normal超出自动换行
nowrap不换行
pre保留空白

word-wrap: *break-word*;:强制文字换行

文字溢出时省略号效果

.box1{
            width: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
     }

23.背景图片处理

背景铺满处理

background-repeat : 背景的重复方式

效果
repeat铺满,不断重复
repeat-x沿着x轴方向重复
repeat-y沿着y轴方向重复
no-repeat不重复,图片保持大小

图片位置处理

background-position : 设置背景图片的位置

top
left
right
bottom
px
background-position: top left;			左上,其他位置一样
background-position: center center;		正中间
background-position: 100px 100px;		向右向下分别100px

图片裁剪设置

background-clip : 设置背景出现的位置

效果
border-box默认值,背景会在边框下边
padding-box背景不会出现的边框下,出现在内边距和内容区
content-box背景只出现在内容区

图片原点起始位置

效果
padding-box图片原点从内边距开始计算
content-box图片原点从内容区开始计算
border-box图片原点从边框处开机计算

背景图片大小

background-size : 设置图片大小

background-size: 200px 200px;				宽度200,高度200px
background-size: 200px;						宽度200,高度自适应
background-size: 200px auto;					宽度200,高度自适应
background-size: cover;			图片比例不变,将盒子铺满
background-size: contain;		图片比例不变,将图片显示完整

24.渐变

线性渐变

颜色沿着线变化

linear-gradient()

通过background-image来设置

代码效果
linear-gradient(RGB,RGB)从第一个RGB颜色向第二个RGB颜色渐变,自上向下
linear-gradient(to right,RGB,RGB)to 方向,向什么方向渐变,to right就是自左向右
to left,to right,to top,to bottom四个方向
to left top,左上角,其他角相同
45deg旋转45°
0.5turn转半圈
linear-gradient(RGB,RGB,RGB...)可以是很多颜色的渐变

径向渐变

从中心向四周延伸

radial-gradient()

通过background-image来设置

使用方法基本和线性一样

做三角

css做三角形的方法:首先创建一个div元素,设置div的width和height为0,只用边框宽来填充,边框样式设置为实线“solid”;然后顶部边框设置颜色,剩下的三个边框的颜色设置为透明“transparent”值即可。

.sanjiao{
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent red transparent;
}