zoukankan      html  css  js  c++  java
  • 实训的第一天0527

    复习html,熟悉<html>的相关标签。

    01.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"/>-->

    02.HT<!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
    谷歌
    火狐
    苹果
    欧朋
    </body>
    </html>

    03.HTML

    <!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>

    </body>
    </html>

    04.HTML

    <!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>

    </body>
    </html>

    05.HTML(表格)

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <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>
    </table>
    </body>
    </html>

    06.html(表格)

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

    (难点)07.HTML(表单)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <table border="1px" cellspacing="0" cellpadding="30">
    <tr>
    <td rowspan="2" colspan="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 colspan="2"></td>
    <!--<td></td>-->
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td colspan="2"></td>
    <!--<td></td>-->
    <td></td>
    <td></td>
    <td rowspan="2"></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <!--<td></td>-->
    </tr>
    </table>
    </body>
    </html>

  • 相关阅读:
    算法训练 表达式计算
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    基础练习 十六进制转十进制
    New ways to verify that Multipath TCP works through your network
    TCP的拥塞控制 (Tahoe Reno NewReno SACK)
    Multipath TCP Port for Android 4.1.2
    How to enable ping response in windows 7?
    NS3
    Multipath TCP Port for Android
  • 原文地址:https://www.cnblogs.com/zmz970903/p/10932055.html
Copyright © 2011-2022 走看看