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>

  • 相关阅读:
    DNS 访问 Service【转】
    Service IP 原理【转】
    通过 Service 访问 Pod【转】
    定时执行 Job【转】
    并行执行 Job【转】
    Job 失败了怎么办?【转】
    用 k8s 运行一次性任务【转】
    运行自己的 DaemonSet【转】
    python之路——递归函数
    尝试加载 Oracle 客户端库时引发 BadImageFormatException
  • 原文地址:https://www.cnblogs.com/zmz970903/p/10932055.html
Copyright © 2011-2022 走看看