前端三剑客之HTML入门教程

表格标签

· table标签：表示整个表格

· tr：表示表格的一行b

· td：表示一个单元格

· th：表示表头单元格，会居中加粗

· thread：表格的头部区域（注意和th区分，范围比th大）

· tboday：表格的主体区域

table包含tr，tr包含了td或者th

表格标签有一些属性，可以用于设置大小边框等，这些属性要放到table标签中

align：表格相对于周围元素的对齐方式（不是内部元素的对齐方式）

border：表示边框，1表示有边框（数字越大，边框越粗），“ ” 表示没有边框

cellpadding：内容距离边框的距离，默认1像素

cellspacing：单元格之间的距离，默认为2像素

width/height：设置尺寸

例：

 <table align="center" border="1" cellpadding="20" cellspacing="0"
     width="500px" heigth="500px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小兰</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>小花</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>

列表标签

主要用来布局

· 无序列表：ul ，li

· 有序列表：ol ，li

· 自定义列表，dl（总标签），dt（小标题），dd（围绕标题来说明）

注意：

元素之间是并列关系

ul，ol标签中，只能放li标签，dl标签中只能放dt，dd

li中可以放其他标签

示例：

 <h3>无序列表</h3>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>小学</li>
        <li>中学</li>
        <li>大学</li>
    </ol>
    <h3>自定义列表</h3>
    <dl>
        <dt>蔬菜：</dt>
        <dd>豆腐</dd>
        <dd>菠菜</dd>
        <dd>西红柿</dd>
    </dl>

表单标签

表单是让用户输入信息的重要途经

分成两个部分：

表单域：包含表单元素的区域，重点是form标签

表单控件：输入框，提交按钮，重点是input标签

form标签

 <form action="test.html">
        ...[form的内容]
 </form>

描述了要把数据按照什么格式，提交到哪个页面中，关于form需要结合服务器，网络编程，来进一步理解。

input标签

各种输入的控件，单行文本框，单选框，复选框

· type，取值种类：button，checkbox，text，file，image，password，password，radio等

· name：给input起名字，对于单选框按钮，具有相同的name才能多选一

· value：input中的默认值

· checked：默认被选中（用于单选按钮，多选按钮）

· maxlength：设定最大长度

1. 文本框

 <input type="text">

2. 密码框

 <input type="password">

3. 单选框

<input type="radio" name="aaa">男
<input type="radio" name="aaa">女

4. 复选框

<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打球
<input type="checkbox">跑步

5. 普通按钮

 <input type="button" value="按钮">

6. 提交按钮

    <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>

7. 清空按钮

 <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
        <input type="reset" value="清空">
    </form>

说明：当文本框输入内容时，点击清空即可清空文本框中输入的内容

8. 选择文件

 <input type="file">

说明：点击选择文件，即可从本地选择文件

label标签

搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验

· for属性：指定当前label和哪个相同id的input标签对应

<label for="aaa">男</label>
<input id="aaa" type="radio" name="sex">
<label for="bbb">女</label>
<input id="bbb" type="radio" name="sex">

说明：这里点击汉字也可以选中，label标签就是用来实现这个功能的

select标签

下拉菜单

option中定义selected="selected"表示默认选中

     <select>
        <option>---请选择从哪里来---</option>
        <option>北京</option>
        <option selected="selected">上海</option>
        <option>厦门</option>
     </select>

textarea标签

   <textarea rows="3" cols="50">
        众鸟高飞尽
        孤云独去闲
        相看两不厌
   </textarea>

注意：文本域中的内容，就是默认内容，注意空格也会有影响

rows和cols代表行和列

无语义标签：div & span

用于网页布局

· div标签，独占一行，是一个大盒子

· span标签，不独占一行 ，是一个小盒子

    <div>
        <span>猴哥</span>
        <span>八戒</span>
        <span>沙僧</span>
    </div>
    <div>
        <span>汽车</span>
        <span>火车</span>
        <span>地铁</span>
    </div>
    <div>
        <span>语文</span>
        <span>数学</span>
        <span>英语</span>
    </div>

4. Emment常用快捷键

· 快捷输入标签：input[tab]

· 快捷输入多个标签：div3[tab]

· 标签带id：div#sex[tab]

· 标签带类名：div.sex[tab]

· 标签带子元素：ul>li*3[tab]

· 标签带兄弟元素：span+span

· 标签带内容：div{hello}

· 标签带内容带编号：div{$.hello}

5. HTML特殊字符

有些特殊的字符在html文件中是不能直接来表示的，例：

空格：&nbsp

小于号：&lt

大于号：&gt

按位与：&amp

  <div>&nbsp</div>
  <div>&lt</div>
  <div>&gt</div>
  <div>&amp</div>

6. 小结

HTML只是描述了页面的骨架结构

使用css可以针对页面进一步美化