学习html5 附代码

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+/

       -->

      

       <!--所有的连在一起的空格和换行都只会被解析成一个空格-->

      

       <!--转义字符

           &nbsp;    空格

           &lt;     <

           &gt;     >

           &copy;   版权符

          

           <br />    单标签  表示换行

       -->

      

      

      

      

       <!--今&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天  天   气     真

      

       <br />

       <br />

       好,非常适

       <br />

       <br />

       <br />合学习!!!-->

      

       <!--现在开始学习&lt;br /&gt;标签!!!&copy;-->

      

      

       常见浏览器有哪些?

       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>

 

原文地址:https://www.cnblogs.com/wangdongwei/p/10932112.html