• 学习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>

     

  • 相关阅读:
    Java8 新特性 (七)
    Java8 新特性 (六)Optional 类
    Java8 新特性 (四)方法引用与构造器引用
    使用Postman做接口测试(一)
    使用unittest方法写登录接口,调用cookie
    python的简单实用二(封装/继承/多态)
    学习进度条46
    学习进度条104
    学习进度条103
    学习进度条102
  • 原文地址:https://www.cnblogs.com/wangdongwei/p/10932112.html
Copyright © 2020-2023  润新知