hooyantsing's Blog

第16次课程

字数统计: 1.5k阅读时长: 7 min
2019/05/18

源辰74班

第16次课程

05.18.2019

**内容    **

HTML

1.基本块级标签



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>    <!--告诉系统这是个html文档-->
<html>
    <head>    
        <meta charset="utf-8">    <!--指定用utf-8编码和解吗-->
        <title>无标题文档</title>
    </head>

    <body>
        <!--<h_></h_>标题标签,有六级-->
        <h1>标题</h1>
        <h2>标题</h2>
        <h3>标题</h3>
        <h4>标题</h4>
        <h5>标题</h5>
        <h6>标题</h6>
        <!--<br/>换行-->
        床头明月光,<br/>
        疑是地上霜。<br/>
        举头望明月,<br/>
        低头思故乡。<br/>
        <!--<p></p>常用文本标签-->
        <p>床头明月光,</p>
        <p>疑是地上霜。</p>
        <p>举头望明月,</p>
        <p>低头思故乡。</p>
        <!--<hr/>横线-->
        <hr/>
        
    </body>
</html>

实验:

效果图:

ea29444664669c360945a7e1607315eb.png

源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test1</title>
</head>

<body>
    <h1>唐诗三百首</h1>
    <hr>
    <h2>目录</h2>
    <h3>第一首,静夜思</h3>
    <h3>第二首,忆江南</h3>
    <h3>第三首,长恨歌</h3>
    <hr>
    <h2>静夜思</h2>
    <p>作者:李白</p>
    <p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
    <hr>
    <h3>【李白简介】</h3>
    <p>李白,字太白,号青莲居士,自称与李唐皇室同宗,祖籍陇西成纪(今甘肃天水附近),剩余暗喜碎叶(遗址在今库尔吉斯斯坦国境内的阿克别希姆)。五岁随父迁居锦州彭明县</p>
    
</body>
</html>

2.列表

有序

    ,无序

      内标签:

    • 自定义

      内标签:

      (标题)、
      (正文)

      源码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>无标题文档</title>
      </head>

      <body>
          <!--有序列表-->
          <h3>注册步骤:</h3>
          <ol type="A"> <!--默认为阿拉伯数字,type=""内可选A/a/I/i等。-->
              <li>填写信息</li>
              <li>注册邮箱</li>    
          </ol>
          <!--无序列表-->
          <h3>新人指南:</h3>
          <ul type="circle"><!--默认为圆点,type=""内可选方块/空心圆。-->
              <li>如何激活会员</li>
              <li>如何注册会员</li>
              <li>如何充钱氪金</li>
          </ul>
          <!--自定义列表-->
          <dl>
              <dt>咖啡</dt>
              <dd>一种黑色的热饮料,原料据说是咖啡豆,非洲盛产这类原料</dd>
              <dd>可以提神,刺激神经</dd>
          </dl>
      </body>
      </html>

      效果图:

      2eb9c0c8ce90250044aec22d98345868.png

      3.表格框

      表格框

      **   

      标题**

      **   

      表头**

      **       

      **

      ******   

      **

      **   

      **

      **   

      表体**

      **       

      行**

      **           

      列**

      **           

      **

      **   

      **

      >/td>**

      **        

      源码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      <!doctype html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>无标题文档</title>
      </head>
          
      <body>
          <table border="1px" cellpadding="0" cellspacing="0" width="500px" align="center"> <!--边框为1px,cellpadding+cellspacing="0"用于消除边框间隔,框宽500px,居中。-->
              <caption>年终工资报表</caption> <!--<caption></caption>表格标题-->
              <thead> <!--<thead></thead>表头,字体加粗-->
                  <th>区域办事处</th>
                  <th>岗位</th>
                  <th>姓名</th>
                  <th>工资</th>
              </thead>
              <tbody> <!--<tbody></tbody>表体-->
                  <tr> <!--<tr></tr>行,<td></td>列。-->
                      <td rowspan="3">华东区</td> <!--rowspan="_"向下合并框-->
                      <td rowspan="2">人事专员</td>
                      <td>张民</td>
                      <td>1500</td>
                  </tr>
                  <tr>
                      <td>王洪</td>
                      <td>1500</td>
                  </tr>
                  <tr>
                      <td rowspan="3">软件开发工程师</td>
                      <td>李开元</td>
                      <td>6000</td>
                  </tr>
                  <tr>
                      <td rowspan="2">中南区</td>
                      <td>杨桃</td>
                      <td>5000</td>
                  </tr>
                  <tr>
                      <td>梁朝</td>
                      <td>5000</td>
                  </tr>
                  <tr>
                      <td colspan="3">总计</td> <!--colspan="_"向右边合并框-->
                      <td>19000</td>
                  </tr>
              </tbody>
          </table>
      </body>
      </html>

      效果图:

      c0da75be76c49bd5f9e5f02cd86c2d1f.png

      4.标签

      type=”text”

      **%!(EXTRA markdown.ResourceType=, string=, string=)

      **

      1
      姓名:<input type="text" name="username" value="匿名">

      type=”password”

      **%!(EXTRA markdown.ResourceType=, string=, string=)

      **

      1
      密码:<input type="password" name="password" value="admin">

      type=”radio”

      **%!(EXTRA markdown.ResourceType=, string=, string=)

      **

      1
      2
      性别:<input type="radio" name="sex" value="man">男生
           <input type="radio" name="sex" value="woman">女生

      type=”checkbox”

      **.png

      **

      1
      2
      爱好:<input type="checkbox" name="hobby" value="football">足球
           <input type="checkbox" name="hobby" value="basketball">篮球

      **bf10ab5fdff100f15a8c8c46164fd645.png

      **

      1
      2
      3
      4
      5
      班级:
          <select name="class">
              <option value="wl1701">网络1701</option>
              <option value="wl1702">网络1702</option>
          </select>

      92ba8682511875bf6ca0836a301227ba.png

      1
      2
      3
      4
      协议:
          <textarea rows="10" cols="10" name="xy">
              测试代码/测试代码/测试代码/测试代码/测试代码/测试代码/测试代码/测试代码/测试代码/测试代码/
          </textarea>
      CATALOG