HTML基础

使用sublime编辑器

创建文件 ? file > new file > save > 文件命名（加点后缀可以让系统更快的识别文件类型 如 .html .css > 保存-->

初识HTML5

<!-- html(hyperText markup language):超文本标记语言 -->

<!-- html语言是由许多双标签或单标签组成的，双标签又是由头标签和尾标签组成的,，每个标签都有自己特殊的功能，单标签有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr；可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th；可以省略全部标记元素有：html、head、body、colgroup、tbody。 -->

<!-- <html></html>:根标签，一个html文件必须且只有一个根标签，所有其他标签和文本只能写在它的头标签和尾标签之间-->

<!-- <head></head>:结构化标签，每个html文件必须有的标签，它里面编辑的内容主要是提供给浏览器看的东西，展示一种逻辑。

<body></body>:结构化标签，每个html文件必须有的标签，它里面编辑的内容只要是在页面上展示的东西。给用户看的东西写在里面。 -->

<!-- 快速生成html:输入 ！+Tab ,然后按tab键 -->

<!DOCTYPE html> 
<html lang="en"> <!-- lang属性是告诉搜索引擎爬虫，我们的网站是关于什么内容的，“en”为英文，“zh”为中文，“en，zh”为中英文相间。 -->
<head>
    <meta charset="UTF-8">  <!-- charset 为编码字符集属性，编码字符集常用有四个 utg-8（万国码升级版，最常用的一个unicode的一个版本，包含了所有国家字符集），
    gb2312（国家标准第2312条，包含了亚裔字符集，如日本，韩国等，中国提出的，但只有中文简体字符集，不能识别繁体中文），gbk（国家标准扩展版本，包含了亚裔字符集，
 繁体字符集），unicode（万国码）-->
    
    <title>Document</title> 
    <meta content="服装" name=“keywords”> <!-- content属性和name属性在<meta>是配合使用的,content属性的值为内容，name的值为某个功能如‘description’（描述） -->
    <style type="text/css">
         *{
            margin: 0;
            padding:0;
        }
        ul{
            list-style: none;

        }
        li{
            margin: 0 10px;
            float: left;
            color: #f40
            font-weight:bold;
            font-size: 14px;
            height: 25px
            line-height: 25px;
            padding: 0 5px
        }
        li:hover{
            border-radius: 15px;
            background-color: #f40;
            color: #fff
        }
        input{
            border:1px solid #999;
        }
    </style>
</head>
<body>
    Life is shit!!!美好的生活！358
    <p>this is paragraph!!!</p> <!-- <p></p>:段落标签，无论文本内容是否满足一行，该标签可使文本成段落展现，一个p标签占一行 -->
    
    <h1>标题</h1> <!-- h标签：是一组标题标签，只有<h1></h1>-<h6></h6>最多六个，可使用 h${文本内容}*6 快速生成 每个标签独占一行，自上而下文本从大到小排列，有三大功能：1.独占一行  2.更改字体的大小  3.字体加粗-->

     <strong>字体加粗展示</strong>

     <em>字体斜体展示</em>

     <strong>
         <em>字体加粗斜体展示</em> <!-- 标签之间可嵌套 -->
     </strong>

     <del style="color:#999">￥50</del> <!-- 中划线标签 -->
     <strike>￥100</strike>
    
    3<sub>2</sub><sup>2</sup> <!--上下标-->

    <address>黑龙江大学</address> <!-- 地址标签：以斜体加粗方式展示文本地址 -->

    <div>容器标签</div> <!-- 该标签充当容器功能，有分块明确，划分区间功能块，能让整个页面结构化，给页面分块展示，还有捆绑作用，对子标签可实现集体标签-->

    <span>行块级容器标签</span>
    
    
    <ol type="a" reversed="reversed"> <!-- 有序列表，与子标签为<li></li>天生父子结构，成组出现,属性type表示按什么数字排序，有五种排序分别是：a,A,1,I,i。start属性是从第几个开始排列，reversed属性是给定排列方式-->
        猜你喜欢的电影：
        <li>marvel</li>
        <li>速8</li>
        <li>返老还童</li>
    </ol> <!-- order list缩写 -->

    <ul> <!-- 无序列表，只有一个属性值可更改type属性，默认值'disc'(disciecle:实心圆)，可选值有'square'(方块)，'circle'(圈)，实例应用有：导航栏，菜单栏 -->
        <li>天猫</li>
        <li>聚划算</li>
        <li>天猫超市</li>
    </ul> <!-- unorder list缩写 -->
    
    <dl>    <!--自定义列表-->
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
    </dl>

    <img src="" alt=""> <!-- 图片标签：属性src是source的缩写，资源的意思，值为图片路径，（路径分三类：1.网上url(右击图片，在新标签页中打开，复制此时的url地址) 2.本地的绝对路径  3.本地的相对路径）属性alt：图片占位符，当图片加载出错时，展示文本概括图片内容。属性title：图片提示符，当鼠标移到图片上时，展示图片信息 -->
    
    <a href=""> <!-- a标签:anchor缩写,锚的意思,href:hypeText reference的缩写，超文本引用，值为所指向的网页地址。target="__blank":点击链接时，链接在新标签页中打开 -->
        <img src="" alt="">
    </a>

    <div id="demo1" style="width:100px;height:100px;background-color:green;">demo1</div>
    <div id="demo2" style="width:100px;height:100px;background-color:red;">demo2</div>
    <a style="display:block;position:fixed;bottom:150px;right:100px;border:1px solid black;height:50px;width:200px;background-color:#fcc;" href="#demo1">
    find demo1</a> <!-- a标签最原始的作用是锚点，在网页中在某个位置回到指定的某个位置，如置顶功能。 -->
    <a style="display:block;position:fixed;bottom:100px;right:100px;border:1px solid black;height:50px;width:200px;background-color:#ffc;" href="#demo2">
    find demo2</a>
    
    <a href="tel:13836014778" style="font-size:12rem;">给某某打电话</a> <!-- a标签三大功能：1.超链接 2.锚点 3.打电话，发邮件 4.协议限定符-->
    <a href="javascript:while(1){alert{'让你手欠'}}"></a> <!-- 协议限定符 -->
    
    <form method="get/post" action="http://www.baidu.com/123.php"> <!-- 表单标签:能发送数据，它能够把前端的数据发送给后端工程师,属性mothod:发送数据的方式，有两个值get和post；posst相对于get安全，get方式是地址栏添加参数请求，而网址的长度是有限的，action属性:发送到哪个地址；可选属性：placeholder、readonly、enctype=multipart/form-data、 -->
        <p>
            username<input type="text" name="username" value="请输入用户名" style="color:#999" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}" 
                           onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"> <!-- 组件标签:文本框，type属性的值为输入框的类型，name属性:给数据命名 value属性:-->
        </p>
        <p>
            password<input type="password" name="password"> <!-- 组件标签:密码框 -->
        </p>
        你们喜欢的明星
        <p>
            1.赵丽颖<input type="radio" name="第一题" value="赵丽颖"> <!-- 单选框：name属性的值统一才构成单选效果，才有排斥性，value属性与文本框，密码框的value不同，必须有值，才能提交成功，而且值为所选内容 -->
            2.鹿晗<input type="radio" name="第一题" value="鹿晗">
            3.关晓彤<input type="radio" name="第一题" value="关晓彤">
        </p>
        
        <input type="submit" value="登录"> <!-- 组件标签:提交框，value属性可修改框里的文本，数组必须有数据名和数据值，才能提交成功，二者缺一不可，type还有可选值：button、reset、file-->
        <input type="checkbox" checked="checked"> <!--  复选框:属性checked:默认选择-->
        
        <select name="province" id=""> <!-- 下拉标签：与<option value=""></option>是先天父子结构，能实现下拉菜单功能 -->
            <option>上海</option> <!-- 一般默认文本为值，可以通过value属性更改 -->
            <option>北京</option>
            <option>天津</option>
        </select>
    </form>
</body>
</html>

meta标签

<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->

<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->

<meta name="Author" content="作者是谁">

<meta name="Keywords" content="关键词"> <!--定义搜索的关键词-->

<meta name="Description" content="描述和简介"> <!--定义网页展示的描述文本-->

<meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--两秒后跳转到https://www.baidu.com，若不加url则是顶死刷新-->

<meta http-equiv="content-type" charset="UTF-8"> <!--相当于<meta charset="UTF-8">-->

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7"> <!--设定兼容ie7-->

设计头部栏

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">
  <meta name="Keywords" content="关键词"> <!--定义搜索的关键词-->

  <style type="text/css">
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      body{font: bold 30px/70px "";color: #fff;text-align: center;background: blue}
      body header{background: deeppink;}
      section.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 0px auto}
      section.main header{height: 60px;background: greenyellow}
  </style>
</head>
<body>
<header>header</header>
  <section class="main">
    <header>Header</header>
  </section>
</body>
</html>

设计导航栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .f_l{float: left}
        .clearfix:after{clear: both;content: "";display: block}
        body{background: blue;font:bold 22px/30px "";text-align: center}
        section.main{margin: 10px auto;background: greenyellow;width: 1200px}
        section.main nav ul li{width: 287px;height: 30px;line-height: 30px;float: left;background: deeppink;margin-left: 10px}

  </style>
</head>
<body>
  <section class="main">
    <nav>
      <ul class="clearfix">
        <li>导航栏1</li>
        <li>导航栏2</li>
        <li>导航栏3</li>
        <li>导航栏4</li>
      </ul>
    </nav>
  </section>
</body>
</html>

设计正文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      body{font: bold 20px/70px "";color: #fff;text-align: center;background: blue}
      body header{background: deeppink;}
      section.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 0px auto}

  </style>
</head>
<body>
<header>header</header>
  <section class="main">
    <article>
      <h2>兰亭集序</h2>
      永和九年， 岁在癸丑， 暮春之初， 会于会稽山阴之兰亭， 修禊事也。 群贤毕至， 少长咸集。 此地有崇山峻岭， 茂林修竹， 又有清流激湍， 映带左右， 引以为流觞曲水， 列坐其次。 虽无丝竹管弦之盛， 一觞一咏， 亦足以畅叙幽情。
    </article>
  </section>
</body>
</html>

aside侧边栏的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        section aside.left{width: 80px;height: 350px;position: absolute;top: calc(50% - 175px);left: 10px}
        section aside.right{width: 80px;height: 350px;position: absolute;top: calc(50% - 175px);right: 10px}
        section aside ul li{height: 80px;margin-top: 5px;box-shadow: 0 0 10px 0 deeppink;font: normal 16px/80px ""}

  </style>
</head>
<body>
  <section>
    <aside class="left">
      <ul>
        <li>left-nav1</li>
        <li>left-nav2</li>
        <li>left-nav3</li>
        <li>left-nav4</li>
      </ul>
    </aside>
    <aside class="right">
      <ul>
        <li>right-nav1</li>
        <li>right-nav2</li>
        <li>right-nav3</li>
        <li>right-nav4</li>
      </ul>
    </aside>
  </section>
</body>
</html>

 

补充：

<!-- 打开网页 > Ctrl+s > 鼠标右键 > Open in Browser 。 网页刷新的快快捷键：F5 -->
< <!-- 每个标签都有自己的属性,属性由 属性名="属性值" 构成,写在头标签里 -->
<!-- 编辑语言里的空格表示是字体分割符，无论编辑时字体之间个多少个空格都只能代表字体分割，html编码特殊字符集展示需要用语句 &； 如空格(&nbsp;）大于号(&gt;) 小于号(&lt;) -->
<!-- <br>:回车，换行标签 -->
<!-- <hr>:水平线标签 -->
<!-- 网安局提供的加密协议：md5，美国二战时发明，不可破解，不可逆，正向能加密，反向不可逆，不可破解 -->

html css javascript
结构 样式 行为

域名(http:www...)<--->dns解析器<--->IP地址

主流浏览器

shell 内核
IE trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto -->

html的元素(标签)分类

一.行级元素(css里属性 display:inline)

特点(feature):

1.内容决定元素所占位置

2.不可以通过css改变宽高

归类：

<span></span>，<strong></strong>,  <em></em>，<a href=""></a>，<del></del>

二.块级元素(css里属性 display:block)

特点(feature):

1.独占一行

2.可以通过css改变宽高

归类：

<div></div>，<p></p>，<ul></ul>,  <ol></ol>，<li></li>，<address></address>,  <form action=""></form>

三.行级块元素(css里属性 display:inline-block)

特点(feature):

1.内容决定元素所占位置

2.可以通过css改变宽高

归类：

<img src="" alt="">，<video src=""></video>

注意

*行级元素只能嵌套行级元素

*块级元素(除p标签外)可以嵌套任何元素

*a标签不能嵌套a标签

*行级元素和行块元素具有文本类属性，可以被空格反符和换行符分割

*一旦行级块元素有文本内容，则兄弟级的文本类元素与它的文本内容

底进行对齐可通过属性vertical-align：middle调文本水平对齐

<!-- 可以通过css改变html里元素原有的特有属性和功能 -->

<!-- 凡是带有display:inline的元素,都有文字特性-->

解决img问题

可用 <img><img><img><img> 元素个挨个解决图片连接有空隙

css基础

文件编辑写法：
1.先写结构（HTML）再写装修（css）属性

2.先写css再写html（一般使用class选择器）

css(cascading style sheet的缩写:层叠样式表，装修html的

引入css

1.行间样式

<div style="width:100px; height:100px; background-color:red;"></div>

2.页面级css

<head>
<style> type属性可选可不选，如果选，必须type="text/css"
div{
width:100px;
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div></div>
</body>

3.外部css文件（*.css)

div{
width:100px;
height:100px;
border-radius: 50px; /*圆角*/
background-color: black;
}
lear.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>taobao</title>
<link rel="stylesheet" type="text/css" href="lear.css"> <!-- 通过Link标签的href属性与外部css文件建立关系 -->
</head>
<body>
<div></div>
</body>
</html>

css的选择器如何选择html元素(标签)

a.id选择器

<!-- 一一对应，一个元素只有一个id ，一个id只对应一个相应元素-->

#only{ /*#+id名(id属性值)*/
background-color: red;
}
#only1{
background-color: green;
}
lear.css
<html lang="en">
<head>
<meta charset="UTF-8">
<title>taobao</title>
<Link rel="stylesheet" type="text/css" href="lear.css">
</head>
<body>
<div id="only">123</div>
<div id="only1">236</div>
</body>
</html>

b.class选择器

<!-- 多对多，一个元素可有多个class，一个class可对应同class名的不同元素 -->

css部分：

.demo{
background-color: yellow;
}
.demo1{
width:100px;
height:100px;
border-radius: 50px;
}

HTML部分：

<div class="demo demo1">89</div>
<div class="demo">39</div>

c.标签选择器

<!-- 作用所有同名的标签元素,通过更改属性有初始化标签的作用-->

css部分：

div{
width:100px;
height:100px;
border-radius: 50px;
}

a{ /*初始化a标签*/
text-decoration：none;
}
em{ /*初始化em标签*/
font-style:normal;
}
ul{ /*初始化ul标签*/
list-style:none;
padding:0;
margin:0;
}

HTML部分：

<body>
<div id="only">123</div>
<div id="only1">236</div>
<div class="demo demo1">89</div>
<div class="demo">39</div>
</body>

d.通配符选择器

<!-- 作用所有标签，作用整个页面，它css语法：*{ } -->

css部分：

*{ /*初始化所有标签*/
padding:0px;
margin:0px;
list-style:none;
}

e.属性选择器

<!-- 作用所有选择的属性一样的元素，同属性名(值可不同)即可，但可通过写值可进一步做唯一选择-->

css部分：

[id]{
background-color: red;
}
[id="only"]{
color:green;
}

HTML部分：

<body>
<div id="only">123</div>
<div id="only1">236</div>
</body>

f.父子选择器(派生选择器)

<!-- 只要构成父子关系，每个级别可写任何选择器,选择所有子孙元素 -->

css部分：

div span em{
color: red;
}
#wrapper .box em{
color:red;
}

HTML部分：

<body>
<div id="wrapper">
<span class="box">
<em>123</em>
</span>
</div>
<em>123</em>
</body>

g.直接子元素选择器

css部分：

div > em{
color: red;
}

HTML部分：

<body>
<section>23</section> 与div标签的功能类似
<div>
<em>1</em>
<span><em></em>2</span>
</div>
</body>

h.并列选择器

<!-- 用多个限制条件选中一个元素，并且不加空格隔开-->

css部分：

div.demo{ <!-- 若有标签选择器并列，则标签选择器必须排在前面 -->
color: red;
}
div#only{
color: green;
}

HTML部分：

<body>
<div id="only">1</div>
<div class="demo">2</div>
<p class="demo">3</p>
</body>

i.分组选择器

<!-- 需要一样装饰的元素可用分组选择器把css写在一起，从而减少代码量 -->

css部分：

div#only,
span,
strong{
color: red; /*字体的颜色,开发时值一般写颜色代码*/
color:rgb(255,255,255) /*rgb颜色函数*/
font-size: 18px; /*字体的大小,默认值为16px,一般使用12px或14px */
font-weight: bold; /*字体的粗细,可选值:lighter(细),normal(常规,
相当于400),bold(粗),bolder(更粗),值还可为整百数字，没有单位*/

font-style: italic; /*字体样式，可选值:italic(斜体);normal*/
font-family:arial; /*字体集,互联网通用字体是arial字体；可选cursive*/

border:1px solid black; /*复合属性:给元素加外边框，第一个值是边框粗细(border-width)，
第二个值是边框样式(border-style:可选值:solid(实线),dotted(点状虚线),
dashed(条状虚线))，第三个值是边框颜色(border-color);各个属性也可以分开写*/
}

HTML部分:

<body>
<div>6</div>
<div id="only">1</div>
<span>2</span>
<strong>3</strong>
</body>

css部分:

div{
width: 0px;
height: 0px;
border: 100px solid black;
border-left-color: red;
border-top-color: transparent; /*transparent:透明色*/
border-right-color: #00f;
}

html部分：

<body>
<div></div>
</body>

j.伪类选择器

<!-- 当鼠标移到元素对应的文本时才执行选择器的css代码 -->

css部分：

div{
border: 1px solid black;
text-align: center; /*文本对齐属性：默认left，可选值:center，right;*/
height: 200px;
line-height: 200px; /*行高属性：默认与font-size的值一样大，若要实现单行
文本垂直居中，设其大小与容器的高一致,也可以用em做单位,1em=1*font-size */ 

text-indent: 2em; /*缩进属性:单位为em，2em = 2 * font-size;*/
text-decoration: line-through; /*文本装饰:可选值有line-through(中划线),
none，underline(下划线),overline(上划线);*/

cursor:pointer; /*光标定位值：设置鼠标移到某个位置的变化,可选值:
help(变成问号),e-resize,copy,move.....*/
}

a{
text-decoration: none;
}

a:hover{ /*伪类选择器，当鼠标移到文本上*/
background-color:rgb(0,0,238);
border-radius: 10px; /*圆角*/
text-decoration: underline;
back
}

HTML部分：

<body>
<a href="www.baidu.com">www.baidu.com</a>
<div>
<strong>今日要闻</strong>
<p style="text-indent: 2em;">今天10月2日党中央、、、、</p>
<p>今天10月2日党中央、、、、</p>
<p>今天10月2日党中央、、、、</p>

</div>
</body>

k.伪元素选择器

每个元素天生就存在存在两个伪元素before/after，需要通过css就进行选择，它的选择语法为 标签名::before(逻辑前)/after(逻辑后) ，该选择器特有的属性是content用于添加文本内容，天生是行级元素。

选择器优先级

<!-- ！important > 行间样式 > id > class|属性|伪类 > 标签|伪元素 > 通配符 -->

css权重(256进制)

选择器 权重
！important Infinity（无穷大）
行间样式  1000
id  100
class | 属性 | 伪类 10
标签|伪元素 1
通配符 0

 

 

 

 

 

 

 

 

 

 

复杂选择器的权重等于组成它的各类选择器权重相加的总和

盒子模型

组成部分:

外边距:margin

盒子壁:border

内边距:padding

盒子内容:width + height

margin + border + padding + (content = width + height)

padding：属于复合属性，写四个个值时分别表示是 上，右，下，左；写三个值时，分别表示是 上，左右，下；写两个值时，分别代表是 上下，左右；写一个值时，表示四个方向。四个方向值也可分开写属性分别是：padding-top,padding-left,padding-right,padding-bottom.border-width：与padding属性写法一样。

css部分：

.phone{
height: 500px; 
width: 250px;
background-color: #000;
margin:50px auto;
}

.top{
background: url("image/t01e51092bdbd1608b5.jpg");
height: 300px;
width: 250px;
background-size:250px 300px;

}
.play{
background: url("image/timg (26).jpg");
height: 100px;
width: 100px;
margin:10px auto;
background-size: 100px 100px;
border: 1px solid black;
border-radius: 50px;


}
.singer{
height: 20px;
width: 200px;
line-height: 20px;
font-size: 10px;
margin: 30px auto 0px;
color: red;
border: 1px solid black;
text-align: center;
}
.title{
height: 20px;
width: 200px;
font-size: 20px;
color: green;
margin: 10px auto;
}
.rotate{
/*css3自定义动画：动画名称 时间 匀速运动 无限重复*/
animation: rot 10s linear infinite;
}
/*关键帧控制每一帧*/
@keyframes rot{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}

HTML部分：

<body>
<div class="phone">
<div class="top"></div>
<div class="title">纯音乐 - 洪荒之力 (钢琴).mp3</div>
<div class="singer">演奏者-吴志</div>
<div class="play" id="play"></div>
</div>
<audio src="amymusic/纯音乐 - 洪荒之力 (钢琴).mp3" id="Mymusic"></audio> <!--音频标签，属性autoplay表示自动播放-->
<script type="text/javascript">
// 业务需求：点击播放按钮实现音乐的播放暂停
// 1.获取点击按钮标签和音频标签
// 在ceshi（文档里面）by（通过）id（id名）get（获取）element（元素）
var oplay = document.getElementById("play");
var Mymusic = document.getElementById("Mymusic");
// 2.点击实现播放功能
var onoff = true; //做一个开关
oplay.onclick = function(){ //点击实现什么功能
if (onoff) {
Mymusic.play(); //播放音乐
onoff = false;
this.className = "play rotate";
}
else{
Mymusic.pause(); //暂停音乐
onoff = true;
this.className = "play";
}
}
var a=5;
</script> 
</body>

层模型

当一个元素被定位(position)时，该元素将脱离原来位置在另一层实现定位，这就形成了层模型，absolute值不保留原来位置，relative保留原来位置。

absolute：脱离原来位置进行定位，相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。

relative：保留原来位置进行定位，相对自己原来的位置进行定位总结两个值的特点得一般用relative定位作为absolute定位的参照物。

fixed：相对窗口定位

#fixed{
position:fixed;
left:50%;
top:50%;
margin-left: -width/2px;
margin-top: -height/2px;
z-index:第几层
}

marggin塌陷和margin合并问题

垂直方向的margin，父子margin是合并在一起的，取他们之间最大值

margin塌陷解决方法：使父级变成bfc改变父级盒子渲染规则

如何触发一个盒子的bfc(block format context)：

1.position:absolute;

2.display:inline-block;

3.float:left/right;

4.overflow:hidden <!-- 溢出部分隐藏 -->

水平方向两个元素的margin不能共用一个区域，所以出现margin合并问题

垂直方向两个元素的margin能共用区域，所以出现有合并区域margin

解决margin合并问题：

1.把兄弟元素作为bfc元素的子集（不推荐）

2.计算解决（推荐）

margin:0 auto;不能居中问题

1.首先设置成块级元素（display:block;）,设置width:N px;

2.该元素不能浮动

3.display:table-cell;的设置会导致失效

4.position：absolute;会导致此属性失效

PS：自己在敲代码时，在网上查到的只有前3条，但自己犯的是第四条的错误，看了其他网页的源码后参考修改是position:absolute;的原因，会导致margin:0 auto;无法实现居中，但position:relative；可以实现居中

浮动模型（float:left/right)

实现元素站队，可以加margin

1.浮动元素产生了浮动流，所有产生浮动流的元素，块级元素看不到他们。bfc元素和文本属性(display：inline)的元素以及文本都能看到浮动流。

块级元素父级包括浮动流元素的解决方法：

1.利用块级伪元素清除浮动流;

css部分：

div::after{
border:0 solid black; 
clear:both; (clear属性只对块级元素起作用)
}

HTML部分：

<div>
<div></div>
<div></div>
</div>

2.把父级元素变为非块级元素或触发bfc

凡是设置position:absolute或float:left/right的元素；打内部把元素换成

inline-block；

应用：

报纸布局(文字环绕图片)

文本溢出容器，要打点展示

1.处理单行文本溢出三件套(单行打点)

white-space:nowrap；
overflow:hidden；
text-overflow:ellipsis；

2.处理多行文本溢出，只做截断，不做打点

overflow:hidden；

图片代替文字的css写法

<a href="http://taobao.com";target=“_blank”>淘宝网</a>
1.元素加入三件套 

white-space:nowrap；
overflow:hidden；
text-indent:200px;

2.加入 

height:0px;
padding-top:overflow:hidden;

实现rtmp流的直播播放

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用video.js实现rtmp流的直播播放</title>
    <!--引入播放器样式-->
    <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
   <!--引入播放器js-->
    <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>
<!--vjs-big-play-centered 播放按钮居中-->
<!--poster默认的显示界面，就是还没点播放，给你显示的界面-->
<!--controls 规定浏览器应该为视频提供播放控件-->
<!--preload="auto" 是否提前加载-->
<!--autoplay 自动播放-->
<!--loop=true 自动循环-->
<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}-->

<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
       poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
    <!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
    <source src='rtmp://58.200.131.2:1935/livetv/hunantv' type='rtmp/flv'/>

</video>
<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
    var player = videojs('my-player'); //my-player为页面video元素的id
    player.play(); //播放
//    1. 播放   player.play()
//    2. 停止   player.pause()
//    3. 暂停   player.pause()
</script>
</body>
</html>

css常用属性

.rotate{
/*css3自定义动画：动画名称 时间 匀速运动 无限重复*/
animation: rot 10s linear infinite;
}
/*关键帧控制每一帧*/
@keyframes rot{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}

 

background: url("image/timg (26).jpg") 引入背景图片
background-image:url() 引入背景图片
backgtond-size:宽 高  设置背景图片的大小
background-repeat:no-repeat 是否重复图片
background-position:left/right/x(px) bottom/top/y(px) 图片定位
border:1px solid black  /*复合属性:给元素加外边框，第一个值是边框粗细(border-width)，第二个值是边框样式(border-style:可选值:solid(实线),dotted(点状虚线),dashed(条状虚线))，第三个值是边框颜色(border-color);各个属性也可以分开写*/
border-radius: 50px;  /*圆角*/
display:inline/block/inline-block； 定义元素类型
float:left/right;  浮动
opacity：（值为0--1之间） 透明度
position：absolute(绝对定位)/relative(相对定位)/fixed(广告固定定位), 该属性通常与属性left,right,top,bottom配合使用
cursor:pointer;  /*光标定位值：设置鼠标移到某个位置的变化,可选值:help(变成问号),e-resize,copy,move.....*/
color: red;  /*字体的颜色,开发时值一般写颜色代码*/
color:rgb(255,255,255)

 /*rgb颜色函数*/
clear:left/right/both;  清除周边浮动流
font-size: 18px;  /*字体的大小,默认值为16px,一般使用12px或14px */
font-weight: bold;  /*字体的粗细,可选值:lighter(细),normal(常规,相当于400),bold(粗),bolder(更粗),值还可为整百数字，没有单位*/
font-style: italic;  /*字体样式，可选值:italic(斜体);normal*/
font-family:arial;  /*字体集,互联网通用字体是arial字体；可选cursive*/
line-height: 200px;  /*行高属性：默认与font-size的值一样大，若要实现单行文本垂直居中，设其大小与容器的高一致,也可以用em做单位,1em=1*font-size */
list-style:none; 列表样式
text-align: center;  /*文本对齐属性：默认left，可选值:center，right;*/
text-indent: 2em;  /*缩进属性:单位为em，2em = 2 * font-size;*/
text-decoration: line-through;  /*文本装饰:可选值有line-through(中划线),none，underline(下划线),overline(上划线);*/
overflow:hidden  <!-- 溢出部分隐藏 -->
vertical-align：-2px  调整文本水平线对齐
posted @ 2019-07-02 18:05  码迷-wjz  阅读(420)  评论(0)    收藏  举报