8天web基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Genius_ytc/article/details/62426400

web基础html

第一天

====head 中的meta(提供网页原信息)

<head>

</head>

====标题 h1~h6 <h1>标题1</h1>

====段落 <p>这是一个段落</p>

====横线 <hr>

====换行 <br/>

====空格

====锚点 <a href=”http://www.baidu.com” target =”_blank”>点击跳百度</a>

//target打开链接的方式默认_parent(当前/新窗口)

====图片 <img src="jcak.jpg" alt="图不显就显示这段文字">

====无序列表<ul><li>

</ul>

====有序列表<ol><li>

</ol>

====定义列表<dt> <dd>

第二天

====<b>加粗文字 <i>文字倾斜 <u>加下划线 <em>加粗倾斜 <strong>文字加粗

<b>这是个加粗字</b>

====<sub></sub>下标 <sup></sup>上标

H<sub>2</sub>O

====<align>属性:文字对齐方式

====符号:

¥日圆 ÷ 除号 ×乘号 ®注册商标 ©版权 "双引号 & &符号 >大于 <小于

代码:<p>1 < 2 > 3 & 4 " 5 © 6 ® 7 × 8 ÷ 9¥ </p>

效果:1 < 2 > 3 & 4 " 5 © 6 ® 7 × 8 ÷ 9¥

====<a title>超链接中,鼠标移到锚点会显示信息 title中的换行:

代码:<a href="http://www.baidu.com" title="欢迎生与死轮回不止我们生他们死">老七的主页</a>

====锚点跳转--name

<a href = "#666"> 点击跳到name为666的地方去</a>

....

====电子邮件链接<a href=”mailto...”>发邮件</a>

语法: mailto:URL? 参数1=内容 & 参数2=内容&参数

subject 邮件标题

body 内容

cc 抄送对象

bcc暗送对象

==== style

<p style="font-size:144px; color:#C0C">144号颜色字体</p>

====表

表table 表头th 列tr 行td 跨几行rowspan 跨几列colspan

常用属性:background align bordercolor bgcolor width height

<tr>

</tr>

</table>

====表单form

<body>

账号<input type="text" size="5" value="填账号" maxlength="5" placehoder=”请输入账号”>

密码<input type="password" name="pwd" value="123" maxlength="6">

单选框

复选框

下拉框

成都

</option>

南充

</option>

阆中

</option>

</select>

多行文本

</textarea>

提交<input type="submit">

图片提交<input type=”img” src="#" alt="提交">

重置<input type="reset">

</form>

//发邮件--必须选enctype="text/plain" 方法必须为get(默认)

主题：<input name="subject" type="text"><br/>

抄送：<input name="cc" type="text"><br/>

密送：<input name="bcc" type="text"><br/>

正文：<textarea name="body"></textarea><br/>

提交<input type="submit">

</form>

</body>

第三天

选择器

====通用元素选择器：*

*{font-size: 12px;}表示所有的元素的字体大小都是12px

====标签选择器

p{ background-color:yellow; }

====id 选择器

#para1{background-color:#089}

</style></head>

<body><p id="para1">Hello World!</p> </body>

====class 选择器

====1所有拥有 center 类的 HTML 元素均为居中

.center {text-align:center;}

<p class="c">这段文字会居中</p>

====2指定特定的HTML元素使用center 类有效

<head>

<style>

p.c{text-align:center}

</style>

</head>

<body>

<h1 class="c">fsdf</h1>//无效

<p class="c">fdsaf</p>//有效

</body>

====组合选择器：(多元素选择器)

h1,h2,h3,h4,h5,h6{color: red}

p, td, li {color:#c00;

#pp, #oocolor:#000;height:26px;}//id=”pp”和id=”oo”都可以

====添加样式的方式

====外部样式表

建css文件取名ss

代码:body{background-color:#9F6}

html代码head里面:

====内部样式表

<head>头部用 <style> 标签定义

====内联样式

====导入样式表:@import url(路径);

建css文件:

body{background-color:#9F6}

.c{background-color:#900}

html文件代码:

<head><style>@import url(ss.css);</style></head>

====修饰选择器的关键字!important

//如果不加!important,加载出来的就是下面的blue不是red

<head>

<style>

#pp{background-color:red;!important

background-color:blue;}

</style>

</head>

====选择器优先级

!important > 行内样式 > ID选择器 > Class选择器 >元素选择器

====链接样式(顺序不能改变)

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

<style>

a{ text-decoration:none}/*去除链接的下划线*/

a:link{background-color:red}

a:visited{background-color:blue}

a:hover{background-color:yellow}

a:active{background-color:gray}

</style>

====盒子模型

<style>

margin:10px;//Margin(外边距) ----外边距合并(如果上下两个盒子元素分别设置了margin-bottom:10px和margin-top:50px 结果他们之间的边距取最大的50px 不会是60px)

padding:10px;//padding(内边距)

border:10px slider;//Border(边框)

width:50px;//宽

height:50px;}//高

</style>

====系统自带的也是加入了默认样式的:一般不用修改它

例子1:

<ul>

<li><a>Contact</a></li>

<li><a>About</a></li>

</ul>

例子2:前面的点(空心否,圆正方)

li{list-style-type:square}

li{list-style-type: disc;}

li{list-style-type: circle;}

例子3:li前面是图片

li{list-style-image:url(q2.png)}

==== Float 使元素向左或向右移动，其周围的元素也会重新排列

img {float:right;

width:80px;}</style>

This is some text. This is some text. This is some text.</p>

====<span></span>--只选择span标签内部的内容

<style>

span{background-color:#C09}

</style>

<p>fasdfds<span>fdsf</span>fdsfdfdsfsdfsdfsfdsf<span>fafafdsf</span></p>

==== first-child 选择内部第一个元素

<style>

/*1.p元素的父亲的第一个儿子并且是p元素*/

p:first-child {background-color:#9C3}

/*2.p元素的父亲的第一个儿子并且是p元素而且是p下的第一个i元素*/

p > i:first-child {background-color:#9C3}

/*3.p元素的父亲的第一个儿子并且是p元素而且是p下的第一个元素(而且是i元素)*/

p:first-child i:first-child {background-color:#9C3}

/*4.p元素的父亲的第一个儿子而且是p元素而且p下所有的i元素*/

p:first-child i {background-color:#9C3}

</style>

第四天

====移动的文字<marquee> ... </marquee>

direction属性：滚动方向left，right，up，down

behavior属性： alternate（来回滚动）scroll（单方向循环滚动）slide（滚动一次）

loop属性：数字：设置滚动次数。infinite和 -1（无限循环滚动）

scrollamount属性：设置滚动速度（数字）

scrolldelay属性：设置两次移动操作之间的延迟时间(慢放)

====<div>

====1(div标签会自动换行)

<p>

asdas<div>adssadasdads</div>asdasdasd

</p>

====2

<p>xxxxx</p><h3>xxxx</h3>

</div>

====3<div>配合float---没有设置float的元素围绕设置float,宽够同行,不够换行

<div id="header">header</div>

<div id="three">three</div>

</div>

<div id="footer">footer</div>

</div>

<style>

#contianer{

width:90%;

height:1000px;

margin:auto;}

#header{

width:90%;

height:200px;

background-color:#333;}

#body{

width:90%;

height:800px;

background-color:#039}

#one{

width:30%;

height:800px;

float:left;

background-color:#9C0;}

#two{

width:50%;

height:800px;

float:left;

background-color:#69C}

#three{

width:20%;

height:800px;

background-color:#900;

float:left}

#footer{

width:90%;

height:200px;

background-color:#F0F;}

</style>

====定位 position

relative相对(自己的起点) absolute绝对(上一个定位的父元素,没有就是浏览器的顶点)

Static无特殊定位(static定位中left，right等属性不生效)

Fixed 定位(元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠)

====相对 .i{

position: relative;

left: 100px;

top: 0px;

}

====绝对.i{

position: absolute;

left: 100px;

top: 0px;

}

====绝对定位中的层级 z-index

.i{

position:absolute;

left: 200px;

top:0px;

z-index:2;

}

==== Fixed定位 .i{

position: fixed;

left: 100px;

top: 0px;

}

====static定位

.i{

position: static;

left: 100px;

top: 0px;

}

第五天

====尺寸

====使用像素值(百分比)来设置元素的宽高img{height: 30px}

====使用像素值(or百分比)来设置元素的最大宽高p{max-height: 10px}

====使用像素值(or百分比)来设置元素的最小宽高p{min-width: 200%}

====使用像素值(or百分比,数值--数值是倍数的意思)设置行高(行间距).i{line-height: 0.5}

====内联,块级元素:块级元素,默认是独自占据一行的比如是<p>内联元素，默认是几个内联元素都可以在同一行上显示。比如是<a>,<span>

====display属性(规定元素应该生成的框的类型)(换不换行)

none此元素不会被显示

inline默认。此元素会被显示为内联元素，元素前后没有换行符

block此元素将显示为块级元素，此元素前后会带有换行符

span{background-color:#00C;display:block} <p>dsa<span>das</span>dsad</p>

==== borde属性元素边框的样式、宽度和颜色(复合属性)

border-color:red;

border-width:10px

border-style:dotted;

注:边框样式(常用的solid)

none：无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像

hidden：隐藏边框

dotted：点状轮廓。

dashed：虚线轮廓。

solid：实线轮廓

double：双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove：3D凹槽轮廓。

ridge：3D凸槽轮廓。

inset：3D凹边轮廓。

outset：3D凸边轮廓

====opacity 透明度:0-1 span{opacity:0;}

====媒介类型 (使用css属性针对哪些媒介比如:显示器媒介印刷媒介)

针对屏幕的 <style>@media screen{.i{background-color:red;}}</style>

针对屏幕和打印(纸质)的 <style>@media screen,print{.i{background-color:red;}}<style>

====简单了解一些html5的新标签

<nav> 标签定义导航链接的部分。

HTML5: <nav></nav>

HTML4:<ul></ul>

<header> 标签定义 section 或 document 的页眉。

HTML5: <header></header>

HTML4: <div></div>

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

HTML5: <section></section>

HTML4: <div></div>

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:<article></article>

HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。

HTML5: <figure><figcaption>标题</figcaption><p>内容</p></figure>

HTML4: <h1>标题</h1><p>内容</p>

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5: <mark></mark>

HTML4: <span></span>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5: <footer></footer>

HTML4: <div></div>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

HTML5: <progress></progress>

<audio> 标签定义声音，比如音乐或其他音频流。

<source src="mv/menu.ogg" type="audio/ogg">//优先播放标签内能有效播放的source

浏览器不支持 audio时显示这段文字

</audio>

常见支持音频格式：audio/ogg ,audio/mpeg

autoplay 如果出现该属性，则音频在就绪后马上播放

controls如果出现该属性，则向用户显示音频控件

loop如果出现该属性，则每当音频结束时重新开始播放

<video> 标签定义视频，比如电影片段或其他视频流。

</video>

controls如果出现该属性，则向用户显示视频频控件

poster 规定视频正在下载时显示的图像，直到用户点击播放按钮。在JS中使用

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

HTML5:<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #00FF00"></canvas>

第六天

====选择器

id中存在的

[id="test1-1"]{background-color:#03F}

id中包含的[id*="test1-1"]{}

id中开始的[id^="test1-1"]{}

id中结束的[id$="test1-1"]{}

==== X>Y子元素选择器(只能选择X元素的儿子孙子不行)

div>ul{background-color:#900}

==== X Y后代选择器 (可以选择某元素的所有子孙孙孙..元素)

.demo li {color: blue;}

==== X,Y群组选择器(相同样式,逗号隔开)

.test1,h1,p{background-color:red}

====伪元素选择器

==== X:first-line{} X元素中的第一行文字

p:first-line {color: #0000FF}

==== X:first-letter{}X元素中的第一个字

==== X:before{content:”xxx”}某个元素前面插入内容

h1:before{content:"h1前面插入的内容";background-color:#900}

==== X:after{content:”xxx”}某个元素后面插入内容

====结构性伪类选择器

==== :root{} 整个html界面

:root{background-color:#06C}

==== Y *:not(X) Y结构除开X之外 (1.如果括号里是自己取名字的选择器冒号前面不能有空格和* 2.如果括号里是结构元素(标签),冒号前面可以有*或者没有,但是Y后必须有空格)

p:not(.abc){ color:#f00;}

body *:not(p){color:#009}

==== :empty当元素内容为空白时的样式

:empty{background-color:#900}

==== :target对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target

:target{background-color:#FF0}

<a href="#change1">点了下面就变色1</a>

<a href="#change2">点了下面就变色2</a>

==== :first-child 第一个元素例 p:first-child{color:red} <p>66</p><p>666</p>

:last-child 最后一个元素

:nth-child(5) 第5个元素注:括号里可以填even和odd 奇偶的意思

:nth-last-child(2) 倒数第2个元素

==== X:nth-of-type(n) 只针对同类型的元素进行计算

p:nth-of-type(5) p元素的父亲的第5个p元素 (不是第5个儿子)

p:nth-last-of-type(8) p元素的父亲的倒数第8个p元素

例 p:nth-of-type(2){color:red} <h1>66</h1><p>66</p> //没有效果:只有1个p元素

==== X:only-child X的父元素只有一个子元素元素时X元素的样式

例 p:only-child {color:red}

==== 阴影box-shadow:10px 20px 20px #F00 (参数分别是xy偏移阴影的扩展半径阴影颜色)

例 div{ width:300px;

height:100px;

background-color:yellow;

box-shadow:#F00 10px 20px 20px}

====圆角度 border-radius:10px 10px 20px 40px(只设置四个值:上右下左; 三个值:上右下(缺省取对称值); 两个值:上右(缺省取对称值) 一个值:上(全部))(可以设置为百分比:50%就是圆的)

例 div{ width:100px;

height:100px;

background-color:yellow;

box-shadow:#F00 10px 20px 20px;

border-radius:100px 50px;}

==== border-image边框图片学的差的学基础部分(下面) 学的好的学这个链接的https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/

.v{border:solid;

width:250px;

height:250px;

border-image:url(border.png) 27 /30px round;}

/*必须设置border属性才有效果参数url为图片的地址参数27为切片上右下左四个值都为27没有单位(切片默认为切开81px盒子的距离上右下左的数) 参数30px为上右下左边框宽度/是隔开参数的意思,如果不加px单位就是边框宽度的倍数 round围绕还有拉伸stretch*/

第七天

====文本阴影 text-shadow:10px 10px 2px red; 参数分别是XY偏移阴影扩散度颜色

例 .ccc{text-shadow:red 10px 10px 2px;}

====下载的自定义字体样式 @font-face 注url地址不能是中文

<style>

@font-face{

font-family:my;/* my是随便取得名字 */

src:url(daiMengWaWaTi.ttf)} /* 字体样式保存路径 */

p{font-family:my;}

</style>

====渐变 gradient 不同颜色(至少两种)之间过渡

====线性渐变background:linear-gradient(方向,颜色)

p{background:linear-gradient(45deg, yellow,blue,white,skyblue);}

参数:第一个参数是方向:两种表示(1.角度:0deg指从下到上角度增加逆时针旋转 2.单词:to top(向上), to bottom(向下),to right(向右), to left(向左),to bottom right(向右下),to top left(向左上)...)

第二个参数是颜色:至少写两种颜色

====径向渐变background:radial-gradient(颜色)

p{background:radial-gradient(yellow,blue,white,skyblue);}

参数:颜色(至少两种)

====颜色用rgba(255,255,255,1)表示 :red green blue alpha(三原色值和透明度范围0-255 0-1)

p{background:radial-gradient(rgba(100,100,20,0.5),rgba(255,10,20,0.5));}

====//不同浏览器对渐变的支持和方法和其他参数

比如火狐:background: -moz-linear-gradient(top, #0065B5,#fff )

//你的这套代码要很多浏览器都支持,就写上对应浏览器的代码,注:原生的写在最后面:

例 p{background: -webkit-linear-gradient(red,blue,); /* Safari 5.1 - 6.0新版本浏览器中可以不配置兼容性 */

background: -webkit-linear-gradient(red,blue)

background: -o-linear-gradient(red,blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red,blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to left, red, blue); /* 标准的语法（必须放在最后） */

}

基础好的学这个:http://www.runoob.com/css3/css3-gradients.html

====过渡transition hover从一种样式到另外一种样式(属性)的转变

学的好的网站内容学会http://www.cnblogs.com/xiaohuochai/p/5347930.html

===1

transition-property: 过渡属性(默认值为all)

transition-duration: 过渡持续时间(默认值为0s)

transiton-timing-function: 过渡函数( linear匀速，ease-in加速，ease-out减速，ease-in-out加速然后减速,ease小幅度的加速后减速,默认值 )

transition-delay: 过渡延迟时间(默认值为0s)

例子:div {height: 100px;

background-color:#C09;

transition-property:height;/* 过渡属性(默认值为all)*/

transition-duration:2s;/*过渡持续时间(默认值为0s)*/

transiton-timing-function: ease-in;/* 过渡函数( linear匀速，ease-in加速，ease-out减速，ease-in-out加速然后减速,ease小幅度的加速后减速,默认值 )*/

transition-delay:5s/* 过渡延迟时间(默认值为0s)*/

}

div:hover {height:500px;}

===2复合属性 transiton:property或duration或timing-function或delay

例子:div {height: 100px;

background-color:#C09;

transition: height 2s ease-in; 5s}

div:hover {height:500px;}

/*改变高度5秒后执行2秒内完成加速(如果有两个时间,默认第一个时间是持续时间)*/

====动画animation --在时间段内样式一直在做改变的现象

例:

<style>

/*动画:1.关键帧:就是下面的百分之多少的时候 2.空间上动必须设置定位属性,外观动可以不用设置*/

.test{

width:100px;height:100px;background-color:red;position:relative;

animation-timing-function: linear;/*动画过程如何完成一个周期参数:ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束linear关键帧的变化速度一样*/

animation-delay:1s;/* 动画开始时间参数:1秒后开始动画*/

animation-direction:alternate;/*是否循环,交替,反向,播放动画,如果动画被设置为只播放一次，该属性不起作用参数:(normal默认值。按正常播放 reverse动画反向播放 alternate动画在奇数次正向播放，在偶数次反向播放 alternate-reverse动画在奇数次反向播放，在偶数次正向播放)*/

animation-duration:3s;/* 完成一个周期需要多少时间参数:默认为0,就是没有动画效果*/

animation-iteration-count:50;/* 播放多少次参数:填infinite就是无限次*/

animation-name:myAnimation;/* 动画名称参数:与下面的@keyframes函数绑定的(自己取得)名称一致 */

animation-play-state:running;/* 动画是否执行参数:设置为paused停止动画设置为running 开始动画*/

}

/* @keyframes关键字后是自己取的动画的名字百分号是进度大括号里面是动的过程中变化的样式下面的例子有5个关键帧:假设只有2个关键帧可以写成:from{}to{} */

@keyframes myAnimation

{

0% {top:0px;}

25% {top:100px;}

75% {top:150px}

100% {top:200px;}