前端HTML学习

---

一、列表标签

1、无序列表

• 列表的每一项默认显示圆点标识
• ul标签表示无序列表的整体，只允许包含li标签
• li标签表示无序列表的每一项，可以包含任意内容

    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>橘子</li>
        <li>火龙果</li>
    </ul>

代码运行效果：

2、有序列表

• 列表的每一项默认显示序号标识
• ol标签表示有序列表的整体，只允许包含li标签
• li标签表示有序列表的每一项，可以包含任意内容

    <ol>
        <li>香蕉</li>
        <li>苹果</li>
        <li>橘子</li>
        <li>火龙果</li>
    </ol>

代码运行效果：

3、自定义列表

标签名	说明
dl	表示自定义列表的整体，只允许包含dt/dd标签
dt	表示自定义列表的主题
dd	表示定义列表针对主题的每一项内容，默认显示缩进效果

	 <dl>
	     <dt>帮助中心</dt>
	     <dd>账户管理</dd>
	     <dd>购物指南</dd>
	     <dt>服务支持</dt>
	     <dd>售后中心</dd>
	     <dd>自助服务</dd>
	 </dl>

代码运行效果：

二、表格标签

• 嵌套关系：table > tr > td

标签名	说明
table	表格整体，用于包裹多个tr
tr	表格每行，用于包裹td
td	表格单元格，可包裹内容
caption	表格大标题，默认在表格整体顶部居中位置显示 【位于table标签内部】
th	表头单元格，表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示【位于tr标签内部，用于替换td标签】
thead	表格头部，包裹tr标签【结构标签，了解】
tbody	表格主体，tr标签 【结构标签，了解】
tfoot	表格底部，tr标签【结构标签，了解】

• 相关属性：

属性名	说明
border	边框宽度
width	表格宽度
height	表格高度
rowspan	合并单元格的个数， 跨行合并（垂直合并）
colspan	合并单元格的个数， 跨行合并（水列合并）

• 合并单元格原则：上下合并保留上，左右合并保留左
• 不能跨结构标签合并（即不能跨：thead、tbody、tfoot）

      <table border="1" width="400" height="200">
        <caption>学生成绩单</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>
            <tr>
                <td>小白</td>
                <td>90</td>
                <td>不错</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2"> 大家都是最棒的！</td>
            </tr>
        </tfoot>
    </table>

代码运行效果：

三、表单标签

1、input系列标签

• input标签根据type属性值的不同，展示不同效果
• type属性值：

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
chekbox	多选框，用于多选多
file	文件选择，用于上传文件
submit	提交按钮，用于提交数据给后端服务器，需配合form标签使用，
reset	重置按钮，用于重置（恢复表单默认值），需配合form标签使用
button	普通按钮，默认无功能，之后配合JS添加功能

• placeholder属性：占位符，提示用户输入内容的文本
• name属性：对单选框有分组功能，相同name属性值的单选框为一组，一组只能同时选一个
• checked属性：默认选中
• multiple属性：多文件选择
• value属性：按钮上的文字
• form使用方法：用form标签把表单标签包裹起来

    <form action="">
        单选框：<input type="text" placeholder="输入昵称">
        <br>
        密码框：<input type="password" placeholder="输入密码">
        <br>
        单选框： <input type="radio" name="sex" checked>男<input type="radio" name="sex" >女
        <br>
        多选框：<input type="checkbox"  checked>篮球<input type="checkbox" >足球<input type="checkbox">羽毛球
        <br>
        上传文件：<input type="file" multiple>       
        <br><br>
        <input type="submit" value="注册"> 
        <input type="reset" >
        <input type="button" value="普通按钮">
    </form>

代码运行效果：

2、button按钮标签

• button标签根据type属性值的不同，展示不同作用
• 谷歌浏览器中，默认是提交按钮
• 双标签，便于包裹其他内容：文字、图片等
• type属性值(同input按钮系列)：

type属性值	说明
submit	提交按钮，用于提交数据给后端服务器
reset	重置按钮，用于重置（恢复表单默认值）
button	普通按钮，默认无功能，之后配合JS添加功能

    <form action="">
        账户：<input type="text" placeholder="输入昵称">
        <br>
        密码：<input type="password" placeholder="输入密码">             
        <br><br>
        <button>我是按钮</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>

代码运行效果：

3、select下拉菜单标签

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项
• selected下拉菜单的默认选中，没有此属性时，默认选中第一个

    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <option>澳门</option>
    </select>

代码运行效果：

4、textarea文本域标签

• cols属性：规定文本域的可见宽度
• rows属性：规定文本域的可见行数
• 右下角可以拖拽改变大小

    <textarea></textarea>
    <textarea  cols="30" rows="10"></textarea>

代码运行效果：

5、label标签

使用方法一

1. 使用label标签把内容（如：文本）包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的id属性值

使用方法二

1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可

    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label><!-- 方法一 -->
    <label><input type="radio" name="sex">女</label><!-- 方法二 -->

四、语义化标签

1、没有语义的布局标签

• div标签：一行只显示一个
• span标签：一行可以显示多个

    普通文本
    <div>我是div标签</div>
    <div>我是div标签</div>
    <span>我是span标签</span>
    <span>我是span标签</span>

代码运行效果：

2、有语义的布局标签（了解）

• 多用于移动端，html5推出
• 显示特点与div一致，但比div多了不同的语义

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

五、字符实体

• 对大小写敏感

描述	实体名称
空格【最常用】	 
< 小于号	&lt;
> 大于号	&gt;
& 和号	&amp;
" 引号	&quot;
’ 撇号	&apos;(IE不支持)
￠ 分（cent）	&cent;
£ 镑（pound）	&pound;
¥ 元（yen）	&yen;
€ 欧元（euro）	&euro;
§ 小节	&sect;
© 版权（copyright）	&copy;
® 注册商标	&reg;
™ 商标	&trade;
× 乘号	&times;
÷ 除号	&divide;