HTML基础

1.列表标签

无序列表

<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

有序列表

<ol>
    <li>张三:100</li>
    <li>李四:80</li>
    <li>王五:60</li>
</ol>

自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>      
</dl>

2.表格标签

border->表格边框粗细    <caption>表格标题

<thead>表格头部    <tbody>表格主体    <tfoot>表格底部

<td rowspan="2">跨行合并2个单元格    <td colspan="2">跨列合并2个单元格

<table border="2" width="600" height="100">
    <caption><strong>学生成绩单</strong></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>男</td>
            <td rowspan="2">100分</td>
            <td>真帅气</td>
        </tr>
        <tr>
            <td>女</td>
            <td>真漂亮</td>
        </tr>
    </tbody>
    <tfoot>
        <td>总结</td>
        <td colspan="2">郎才女貌</td>
    </tfoot>
</table>

3.表单标签

name="sex"同一个名字只能选一个单选框        checked默认选中该控件

multiple支持多文件选择        value按钮名称

<form action="">
    文本框：<input type="text" placeholder="请输入用户名">
    <br>    
    密码框<input type="password" placeholder="请输入密码">
    <br>
    单选框<input type="radio" name="sex">男  <input type="radio" name="sex" checked>女
    <br>
    多选框<input type="checkbox">
    <br>
    文件选择<input type="file" multiple>
    <br>
    提交按钮<input type="submit">
    <br>
    重置按钮<input type="reset">
    <br>
    普通按钮<input type="button" value="普通按钮">
    <br>
    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
</form>

下拉菜单

 selected 下拉菜单默认选中该选项

<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">广州</option>
    <option value="" selected>深圳</option>
</select>

 文本域标签

<textarea name="" id="" cols="30" rows="10">
    文本域标签
</textarea>

label标签

实现功能：点击文字也可以选中单选框

<input type="radio" name="sex2" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex2">女</label>

4.语义化标签

无语义标签

普通文字

<div>这是div标签</div>
<div>这是div标签</div>

<span>这是span标签</span>
<span>这是span标签</span>

有语义标签-手机端

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>

5.字符实体

<!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;习字符实体.