尺寸单位

  • html 中只有一种单位： px

    • px 是一个相对单位， 原因：相同屏幕，dpi 不同 px 代表的实际长度不同

Table 表格

<table>

  • border="2" attribute 边界
  • cellpadding="10" attribute 单元格内边距，单元格框线与内容间距

  • cellspacing="10" attribute 单元格外边距，单元格框线与框线间距

     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
50
51
52
53
54
55
56
57
58
59

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>

    <h4>没有单元格间距:</h4>
    <table border="1">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>

    <h4>单元格间距="0":</h4>
    <table border="1" cellspacing="0">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>

    <h4>单元格间距="10":</h4>
    <table border="1" cellspacing="10">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>

    <h4>border="2", cellspacing="10":</h4>

    <table border="2" cellspacing="10">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
    </table>

  </body>
</html>

<caption>

<tr>行

<td> and <th> 单元格，标题

  • colspan="2" attribute 跨列单元格
  • rowspan="2" attribute 跨行单元格

List 列表

<ul> 无序列表

  • style="list-style-type:circle" attribute 无序列表前面的“符号形状”

    1. circle 空心圆，白圈
    2. disc 实心圆，碟子，黑圆点
    3. square 实心正方形，黑正方形

<ol> 有序列表

  • type="A" attribute

    1. "A"
    2. "a"
    3. "I"
    4. "i"
    5. 没有 type 属性，默认的，1,2,3 标记

<li> 列表条目 list item

<dl> 自定义列表 Defined List

  • <dt> 列表条目 defined term
  • <dd> 条目解释 defined definition
1
2
3
4
5
6

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

区块 block

块级元素区块<div> and 内联元素区块<span>

  • 没有特定意义，用于划分区块，便于编辑格式

内联元素

  • 结尾不解释成换行
  • eg：<span>, <b>, <a>, <img>, <td>, <th>

块级元素

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
  • eg: <div>, <h1>, <p>, <ul>, <table>

布局

  • <div> and <table>
  • <table>不建议作为布局工具
  • css
  • 网站模版，省力

form and input 表单与输入

<form> 表单

<input> 输入

  • 内联元素，默认不换行
  • type="text"
  • name="car"
  • value="audi"

文本域 text fields

  • type="text" 属性
  • name="lastname"
1
2
3
4

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

  • type="password" 属性
  • name="pwd"
1
2
3

<form>
  Password: <input type="password" name="pwd">
</form>

Radio Buttons 单选按钮（相当于单选题）

  • type="radio" 属性
  • name="sex" 单选，所以 name 都一样
  • value="male"
1
2
3
4

<form>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</form>

Check Boxes 复选框（相当于多选题）

  • type="checkbox" 属性
  • name="vehicle"

  • value="bike"

    1
2
3
4

    <form>
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Submit Button 提交按钮

  • type="submit"
  • value="Submit 提交" 显示按钮上的文字
1
2
3
4

<form name="input" action="html_form_action.php" method="get">
  Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

下拉选择框 Combo Boxes

<select> <—-> <input>

  • action=""

<option>

  • value="Audi car" 注意：value 不同，（单选，所以。。。）
  • selected 属性，用于预选（预先选定选择内容）<—- <—-
1
2
3
4
5
6
7
8

<form action="">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi" selected>Audi</option>
  </select>
</form>

按钮 Buttons <— <input> 标签

简单普通按钮

1
2
3

<form action="">
<input type="button" value="Hello world!">
</form>
  • type="button" 属性
  • value="Press it,按呀！" 按钮显示的文字

Submit Button 提交按钮

  • type="submit"
  • value="Submit 提交" 显示按钮上的文字
1
2
3
4

<form name="input" action="html_form_action.php" method="get">
  Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

重置按钮 Reset Button

  • type="reset"
  • value="reset values"
  • 点击后，表单输入内容，清空，恢复成默认值
1
2
3
4
5
6

<form action="demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

带边框的表单 Form with border

<fieldset> 设置边框

<legend> 设置边框上的文字

1
2
3
4
5
6
7
8

<form action="">
  <fieldset>
    <legend>Personal information:</legend>
    Name: <input type="text" size="30"><br>
    E-mail: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

<textarea> 文本域

  • 大文本框，可以多行编辑
  • rows="5" 文本域，行数
  • cols="30" 文本域，列数

框架 <iframe>

  • 相当于在网页内，再插入一个网页

  • Attributes

    • src="www.baidu.com" 插入内容
    • width="200"
    • height="200"
    • frameborder="0" 取消边框，默认 iframe 是有边框的
  • 注意：插入的应当是，本地网页，在线的似乎不行
  • –> 再注：我的错误，在线链接，应当把协议也写上，不然不能正常显示
  • <ioframe>iframe 之间的内容</iframe>， 用于不支持 iframe 的浏览器，来显示

使用 iframe 来显示，目标链接页面

1
2

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

  • Attributes

    • name="iframe_a" <— <iframe> 标签
    • target="iframe_a" <— <a> address 标签

Character Entities 字符实体

  • 目的：通过特殊的格式，来显示 html 不能显示的特殊字符

  • 格式：

    1
2
3

    &entity_name;  --> 实体名称
或
&#entity_number; --> 实体编号

  • 常用字符实体

    • 不间断空格 Non-Breaking Space

      • 实体名称：&nbsp

    • 音标字符，用于国外字母上带一个符号的语言，如：西班牙语，等等

      • 发音符号：字形(glyph)

  • 表格

    符号中文名称实体名称实体编号
    空格&nbsp&#160
    <小于号&lt&#60
    >大于号&gt&#62
    &和号&amp&#38
    "引号&quot&#34
    '撇号&apos(IE 不支持)&#39
    ￠分&cent&#162
    £镑&pound&#163
    ¥人民币/日元&yen&#165
    €欧元&euro&#8364
    §小节&sect&#167
    ©版权&copy&#169
    ®注册商标&reg&#174
    ™商标&trade&#8482
    ×乘号&times&#215
    ÷除号&divide&#247