Html 5 简介

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。


1.了解html及简单编写。

<!DOCTYPE html>
<!--声明     html
   
-->
<html>
    <head>
       <!--定义网页中的一些基本的信息-->
       <meta charset="UTF-8">
       <!--charset   编码字符集-->
       <!--UTF-8    万国码
      
       gb2312   中国标准第2312条      中文,韩文....大部分的亚裔语言(繁体字不支持)
       GBK    在上面的基础之上扩展 可以支持繁体字
       unicode   使内存变大
       UTF-8-->
       <title></title>
    </head>
    <body>
    </body>
</html>

<!--   注释的内容

    注释是给开发人员看的,不是给用户看的。在浏览器中,碰到注释会跳过,不会去解析他

    注释里面不要嵌套注释

-->
 
<!--双标签-->
<!--<html 属性名="属性值 " 属性名2="属性值2"></html>
<html>
    <head></head>
</html>-->
<!--单标签-->
<!--<meta  属性名="属性值 " 属性名2="属性值2"/>-->


2.了解浏览器

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>开始学习html标签</title>
    </head>
    <body>
       <!--注释的快捷键
           选择内容   ctrl+/
       -->
      
       <!--所有的连在一起的空格和换行都只会被解析成一个空格-->
      
       <!--转义字符
                空格
           <     <
           >     >
           ©   版权符
          
           <br />    单标签  表示换行
       -->
      
       <!--今      天  天   气     真
      
       <br />
       <br />
       好,非常适
       <br />
       <br />
       <br />合学习!!!-->
      
       <!--现在开始学习<br />标签!!!©-->

      

      

       常见浏览器有哪些?

       IE

       谷歌

       火狐

       搜狐

       搜狗

       UC

       QQ

       360

       欧朋

       hao123

       金山毒霸

       ...

      

       浏览器只有5个

       IE

       谷歌

       火狐

       苹果

       欧朋

      

       浏览器   内核(引擎)

       汽车:

       汽油/柴油         -->     动能

       可移植性

      

       浏览器内核做的事情

       写的代码      -->     机器码/字节码      01010101

       可移植性

      

       360:高效,安全,双核(谷歌。急速模式,IE。兼容模式)

      

      

    </body>

</html>


3.了解标签(行内标签和块级标签)

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>

       行内标签(标记,元素,节点(js中的叫法))

       在一行中显示,只有当这一行显示不下的时候才会出现换行

       不能设置元素的宽和高,宽和高由内容来撑起来的

       行内块标签:在一行中显示,并且可以设置宽和高

      

       块级标签

       自己独占一行

       可以宽和高

      

      

   

<i>这是一段文本</i>
       <s>这是一段文本</s>
       <u>这是一段文本</u>
       <b>这是一段文本</b>
       <font color="green" size="7">文字标签</font>
       <i><s><u><b><font color="red" size="7">这是一个多样式的文本</font></b></u></s></i>
      
      
       <div>这个是div标签</div>
       <p>这个是段落标签</p>
       <h1>标题标签1</h1>
       <h2>标题标签2</h2>
       <h6>标题标签6</h6>
      
      
       <h1>这个是一段文本</h1>
       <b><font size="6">这个是一段文本</font></b>
      
      
       SEO    搜索引擎优化
       百度搜索   百度小蜘蛛   关键字 
       关键的内容   span,div   百度小蜘蛛不会去碰
      
       1-999   元   /次
       百度竞价
       时间锁定
       IP锁定
      
      
    </body>
</html>

4.了解表格(创建与表格属性)

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>表格</title>
    </head>
    <body>
       <!--表格一定是工整的-->
       <table border="1px" width="700px" height="500px" align="center">
           <!--写了一个tr就表示一行-->
           <tr align="center">
              <!--写了一个td就表示一个单元格,第一行有多少个单元格,第二行就必须有多少个-->
              <td><b>姓名</b></td>
              <th>性别</th>
              <td>年龄</td>
              <td>爱好</td>
              <td>婚否</td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
           </tr>
       </table>
      
<table border="1px" width="500px" height="400px">
           <!--表格的标题   可省略-->
           <caption>女朋友表</caption>
           <!--表格的头部   可省略-->
           <thead>
              <tr>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>身高</th>
                  <th bgcolor="aqua">体重</th>
              </tr>
           </thead>
           <!--表格的主体  可省略-->
           <tbody>
              <tr align="center" bgcolor="bisque">
                  <td valign="top">翠花</td>
                  <td>18</td>
                  <td>165CM</td>
                  <td>100KG</td>
              </tr>
              <tr align="center">
                  <td>如花</td>
                  <td>20</td>
                  <td>170CM</td>
                  <td>80KG</td>
              </tr>
           </tbody>
    </body>
</html>

5.表格中单元格的内外边距,及行、列消除。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
    </head>
    <body>
       <table border="1px" cellspacing="0" cellpadding="30">
<!--cellpadding     这个是单元格里面的内容距离单元格边框的距离-->
           <!--cellspacing     这个是单元格与单元格之间的距离-->
           <!--一般情况下设置了这两个属性以后就不会去设置table的width和height-->
           <tr>
              <td colspan="2" rowspan="2"></td>
              <!--<td></td>-->
              <td></td>
              <td></td>
              <td rowspan="2"></td>
              <td></td>
           </tr>
           <tr>
              <!--<td></td>-->
              <!--<td></td>-->
              <td></td>
              <td></td>
              <!--<td></td>-->
              <td></td>
           </tr>
           <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
           </tr>
           <tr>
              <td rowspan="2" colspan="4"></td>
              <!--<td></td>-->
              <!--<td></td>-->
              <!--<td></td>-->
              <td></td>
              <td></td>
           </tr>
           <tr>
              <!--<td></td>-->
              <!--<td></td>-->
              <!--<td></td>-->
              <!--<td></td>-->
              <td colspan="2"></td>
              <!--<td></td>-->
           </tr>      </table>
    </body>
</html>