前端学习笔记2--HTML基础

1 列表

1.1 无序列表
ul只能包括li li可以包括任何内容

    <ul>
    	<li></li>
    </ul>

1.2 有序列表
ol只能包括li li可以包括任何内容

    <ol>
        <li></li>
    </ol>

1.3 自定义列表
dl只能包括dt/dd dt/dd可以包括任何内容

    <dl> #自定义列表的整体
        <dt>主题</dt>
        <dd>分标题</dd>
        <dd>分标题</dd>
    </dl>

2 表格

2.1 基本标签

table->tr->td

    <table>单元格表头
        <tr>
        	<td>单元格内容</td>
        	<td>单元格内容</td>
        	<td>单元格内容</td>
        </tr>
    </table>

2.2 表格属性

  <table border="边框宽度" width="表格宽度" height="表格高度">

实际开发时，样式效果一般用CSS设置

2.3 标题和表头单元格标签

<th></th>#表头单元格标签
<table>单元格表头
	<caption> 表头标题 </caption>
</table>

2.4 结构标签

没有实际作用，便于代码阅读

        <thead>#表格头部
			...
        </thead>
        <tbody>#表格主体
            ...
        </tbody>
        <tfoot>#表格头部表格尾部
            ...
        </tfoot>

2.5合并单元格

合并单元格步骤:
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他

3.给保留的单元格设置:跨行合并(rowspan）或者跨列合并(colspan)

不能跨标签合并

3 表单标签

3.1 input标签

根据type属性的不同，展示不同的效果。

单选功能

    男<input type="radio" name="gender">  
    女<input type="radio" name="gender" checked>

选中多个文件

 <input type="file" multiple>

按钮

重置功能需要添加表单域
说明按钮的作用

<input type="submit" value="免费注册">

3.2 button按钮标签

3.3 select下拉菜单标签

场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:

• select标签:下拉菜单的整体
• option标签:下拉菜单的每一项
  常见属性：
  selected:下拉菜单的默认选中

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

3.4 textarea文本域标签

场景：网页中提供可输入多行文本的表单控件
常见属性：

• cols:规定了文本域内可见宽度
• rows:规定了文本域内可见行数
  注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置

<textarea cols="40" rows="20"></textarea>

3.5 lable标签

场景:常用于绑定内容与表单标签的关系
标签名: label
使用方法：
1．使用label标签把内容（(如:文本)包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②:
1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来
2.需要把label标签的for属性删除即可

<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>

4 语义化标签

4.1 没有语义的布局标签

• div-独占一行
• span

4.2 有语义的布局标签
手机网页

5 字符实体

网页中展示特殊符号效果，用字符实体替代
&英文；