渡一教育,html+css 公开课

1、html标签【结构】

hyperText markup language 超文本标记语言

<html lang="en">
   <head>
         <meta charset="utf-8">
         <title></title>
         <meta content="qishui" name="keywords">
         <meta content="学html" name="description">
   </head>


   <body>

      <p>123456</p>

      <p>123456</p>

      <h1></h1>
      <h2></h2>
      <h3></h3>
      <h4></h4>
      <h5></h5>
      <h6></h6>

      <strong></strong>
      <em></em>


      <strong><em></em></strong>


      <del></del>

      <address></address>

      <span><span>

      <div><div>

        中文1  中文2                    中文3

      中文4  


      sssssssssssssssssssssssss22222222222222222


      sssssssss sssssssss sssssssssssssss

      中文1&nbsp;&nbsp;&nbsp;中文2中文&nbsp;&nbsp;&nbsp;1中文1

      学习&lt;div&gt;

      <br>

      <br>

      <br/>

      <br/>


      <ol type="1" reversed="reversed" strat="2">
         <li>apple</li>
          <li>orange</li>
           <li>banana</li>
      </ol>

       <ul type="disc" id="select_list">
         <li>apple</li>
          <li>orange</li>
           <li>banana</li>
      </ul>


      <img src="" alt="" title=""></img>


      <a href="http://www.baidu.com" target="_blank">百度</a>

       <a href="#select_list" target="_blank">百度</a>


       <from method="get/post" action="#">

               <p>
             用户名：  <input type="text" name="userName"/>

             </p>
             <p>
              密码：   <input type="password" name="password"/>
             </p>

    <p>
                <input type="submit" value="login"/>
                </p>

                   <p>

         苹果：<input type="radio" name="food" value="1" check="check"/>
         香蕉：<input type="radio" name="food" value="2"/>
         梨子：<input type="radio" name="food" value="3"/>
   </p>

    <p>

         苹果：<input type="check" name="food" value="1" checked="checked"/>
         香蕉：<input type="check" name="food" value="2"/>
         梨子：<input type="check" name="food" value="3"/>
   </p>

       </from>


       <select name="province">

             <option value="bj" selected="selected">北京<option>
             <option value="sz">深圳<option>
             <option value="sh">上海<option>

       </select>

       <!--  注释，表明作用，调试  //-->


   </body>

</html>

lang: 告诉爬虫，网站关于什么的，en,zh

meta：单标签，charset=”utf-8” 防止乱码;keywords关键词，description描述。

title: 标题

head：网页不可见，浏览器识别作用

body:网页显示

p：段落标签

h: 标题标签，独自一段，字体加大，加粗；h1最大，依次减小，h6最小

strong: 加粗

em: 斜体

del: 删除线

address: 地址标签，成段，加粗

span: 行级元素，分块，结构化，方便维护，可以操作内部元素一起改变；

div: 块级元素，分块，结构化，方便维护，以操作内部元素一起改变；

空格：文字分隔符，切割，多个，换行空格将合并在一起，保留一个空格

空格

< 小于

> 大于

br：单个即可，单标签

hr: 单标签

ol: 有序列表,type 默认 1，按1,2,3,4，方式；可选，a,A,i,I 类型；reversed 倒序；序号以第2个开始标序号。

ul: 无序列表，只有一个type属性，默认实心圆disc； square 方形；circle 圆圈。常常用来作为导航栏功能。

img:显示图片,src，加载地址，网络url地址, 相对地址，绝对路径,alt 描述文字，加载不出来显示,title,图片提示符。

a: 超链接，href,链接地址，可以放图片，css，文字,target为_blank时，在新开页面打开链接，默认本页面;
href,#id,在页面内滑动。可用于打电话，tel： ,发邮件 mailto:,协议限定符，javascript：

from：表单，get,post方式提交，action，提交地方。
input: 输入框，type=”text”内容，type=”password”密码框，type=”submit”,提交数据；
radio，name一致构成单选框功能,value 实际值，type=”check” 多选框, checked=”checked” 默认选择。

select：下拉框，option,选项值,默认选择selected。

行级元素 inline：内容决定元素所在位置，不可以通过css改变宽高；

span em strong  a del

块级元素 block ：独占一行，可以通过css改变宽高

div p from ul li address

行级块元素 inline-block：内容决定元素所在位置，可以通过css改变宽高

img

可通过css display修改属性

2、css 【样式】

1、引入css

行间样式，放在标签里面

页面级样式,在head里

外部文件，,在head里引入css文件,异步执行，边下载，变渲染

2、定位元素，选择器

<style>

  *{

  }
   #one{

   }

   .china{

   }
   .usa{

   }
   span{

   }

   [one]{}

   div span{

   }

   div->em{

   }

   <!--中间不分割-->
   div.test{
   }


 </style>

id选择器，唯一性

类选择器,可以选择多个类

标签选择器,针对于所有同类便签

通配器 *，针对所有标签，all

属性选择器(放入ID名)

[one]{

}

父子选择器，派生选择器,中间可用其他选择器替代，间接也可作用

直接子元素选择器,间接无效

并列选择器

div.test{

}

分组选择器，对相同元素分组;可用来功能组装

em,
span{

}

伪类选择器

a::hover{

}

p::hover{

}

权重,越大，优先级越高。

！important > 行间样式>id > class|属性选择器| > 标签|伪元素 > 通配器

无限大，1000,100,10，1，0

3、css内容

font-size 字体大小，默认16px,高。

font-weight: bolder ; 字体加粗，100 200 ... 900 没有单位

font-style: italic ; 字体样式，斜体

font-family: arial; 字体

color: red; #ff0000; rgb(255,255,255,0);

border: 1px solid black; 边框宽度，样式实线，dotted dashed ;边框颜色;

text-align: left right center;内容对其方式

line-height:200px ;单行文本高度，容器高度等于line-height，垂直居中

text-indent: 2em;首行缩进,两个字体大小，相对单位。

text-decoration: none; 删除线，underline,显示下划线 ，overline 上面

cursor: 鼠标样式，point,help等，鼠标移动到元素显示

display: inline block inline-block

盒模型

TODO: 待总结

JavaScript【行为】

TODO: 待学习

a作为锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接应用之锚点</title>

    <style>
    *{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
      #content1{
          height: 1000px;
          background-color: #99CC00;
      }

    #content2{
        height: 1500px;
        background-color: #11CC00;
    }

    #test{
        position: fixed;
        right: 5%;
        bottom: 5%;
        background-color: #90a2bc;
        color: red;
    }
    ul{
        padding: 20px;
    }
    ul li{
        margin: 10px;
    }

    a:hover{
        color: yellow;
    }

    </style>

</head>
<body>

<h2>超链接应用之锚点</h2>
<p id="one">第一章节</p>
哈哈哈哈哈哈哈哈哈哈或或或或或或或或
<div id="content1"></div>
<p id="two">第二章节</p>
呃呃呃呃呃呃呃呃呃呃呃呃鹅鹅鹅鹅鹅鹅饿
<div id="content2"></div>

<div id="test">
    <ul>
    <li><a href="#one">第一章节</a></li>
    <li><a href="#two">第二章节</a></li>
    </ul>
</div>

</body>
</html>

ul 作为导航栏例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul导航</title>

    <style>
    *{
        margin: 0;
        padding: 0;
    }

    ul{
        list-style: none;
    }
    ul li{
        float: left;
        margin: 10px;

    }
    a{
        text-decoration: none;
        color: #f42;
    }

    a:hover{
        color: #fff;
        background: #f42;
        padding: 5px 10px;
        border-radius: 10px;
    }

    </style>

</head>

<body>


<ul>
    <li><a href="#">新款连衣裙</a></li>
    <li><a href="#">四件套</a></li>
    <li><a href="#">潮流T恤</a></li>
    <li><a href="#">时尚女鞋</a></li>
    <li><a href="#">短裤</a></li>
    <li><a href="#">半身裙</a></li>
    <li><a href="#">男士外套</a></li>
    <li><a href="#">墙纸</a></li>
    <li><a href="#">行车记录仪</a></li>
</ul>

</body>
</html>


border应用，三角形处理，圆形
---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 0;
        height: 0;
        border: 150px solid black;
        border-bottom-color: red;
        border-top-color: #99CC00;
        border-left-color: #00a4ac;
        border-right-color: #555555;
    }

    p{
        width: 300px;
        height:300px;
        border-radius: 150px;
        background-color: red;
    }

    </style>
</head>
<body>
<div></div>

<p></p>
</body>
</html>

1、html标签 【结构】

2、css 【样式】

盒模型

JavaScript【行为】

a作为锚点

ul 作为导航栏例子

1、html标签【结构】