2020-10-16学习笔记（HTML列表——字符实体）

列表

列表用作展示HTML的一系列项目
列表分为无序列表、有序列表、定义列表

无序列表

无序列表需要两个标签参与，分别是<ul>和<li>。
ul：定义一个无序列表的大结构
li：列表项，定义的是无序列表内的某一项。
<ul>和<li>是嵌套关系，VS快捷键：ul>li。
一个列表中可以有任意个列表项。

<ul> 
  <li>目标1</li> 
  <li>目标2</li> 
  <li>目标3</li> 
  <li>目标4</li>
 </ul>

效果图

注意事项

1.<ul>内部才能嵌套<li>，<li>不能脱离<ul>单独书写。
2.<li>是一个经典的容器级标签，里面甚至可以再写一对ul>li（VS快捷键，再列出一组无序列表）
3.无序列表的<li>没有顺序的先后之分。
4.没有样式前缀的功能，样式是由CSS负责

有序列表

语法和无序列表很接近，语义上有所差异。
有序列表需要两个标签参与，<ol>，<li>
同样的，也是嵌套关系，VS快捷键：ol>li
同样可以有任意个列表项

 <ol>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
        <li>项目5</li>
    </ol>

效果图

注意事项

1.<li>不能脱离<ol>单独书写。
2.同理，<li>可以再写一对ol>li（快捷键）
3.在有序列表里是有先后顺序的，根据内容需要合理调整书写位置。
4.数字排列样式不是<ol>的作用，是css负责的，例如上图的12345序号前缀。

定义列表

定义列表不仅仅是一列项目，是项目和它的注释的组合
包含了<dl>、<dt>、<dd>，其中，<dl>定义了一个自定义列表的大结构。<dt>自定义列表的一个主题或者术语。<dd>解释定义的主题或者术语
<dl>内嵌套<dd>、<dt>，<dd>和<dt>同级

 <dl>
        <dt>主题1</dt>
        <dd>1的内容在这里</dd>
        <dt>主题2</dt>
        <dd>2的内容在这里</dd>
    </dl>

注意事项

1.<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>不能脱离<dl>单独书写。
2.dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。
3.每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。
4.dt和dd标签也是容器级标签。
5.定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
6.配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期管理。

常用布局标签div与span

布局标签

<div>，<span>标签常常用为布局工具，称之为盒子
这俩没有明确的语义

<div>标签

div，俗称大盒子
<div>，双标签，经典的容器级标签，可以放置任何内容
多用于划分网页区域，进行结构布局。我们一般将相关的内容用对应的<div>包裹起来，比如

<!-- H5内有一个语义化标签<nav>，此例只用作div解释-->
<div class="nav">导航栏部分，往里面添加内容</div>

<span>标签

小区域，俗称小盒子
双标签，容器级标签
可以进行辅助型局部调整（不改变整体效果的情况下）
比如：

<div>
        <dl>
            <dt>主题1</dt>
            <dd><p>1的内容在这里</p></dd>
            <dt>主题2</dt>
            <dd><span style="color: brown;"><p>2的内容在这里</p></span></dd>
        </dl>
    </div>

效果图

表格制作

表格基础

创造一个简单的表格至少需要三个标签，分别是<table>，<tr>，<td>标签
<table>标签：定义的整个表格的大结构
<tr>标签：表格的行，定义表格由多少行构成
<td>标签：表格数据，表格单元格，定义的是每一行内部的单元格。

<table>的属性

border边框属性
属性值：数字（像素值）

表格的单元格有默认空隙，会有双线框
解决办法：设置属性样式

<table border="1" style="border-collapse: collapse;">
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
            <td>第一行，第四列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
            <td>第二行，第四列</td>
        </tr>
        <tr>
            <td>第三行，第一列</td>
            <td>第三行，第二列</td>
            <td>第三行，第三列</td>
            <td>第三行，第四列</td>
        </tr>
    </table>

得到的单线表格

表头单元格

如果要绘制表头，使用标签<th>，表头单元格。
在表格中绘制的时候，替换的是<td>的位置。
<th>标签中自带默认的css样式效果，文字显示粗体居中。

<table border="1" style="border-collapse: collapse;">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>第一行，第一列</td>
            <td>第一行，第二列</td>
            <td>第一行，第三列</td>
            <td>第一行，第四列</td>
        </tr>
        <tr>
            <td>第二行，第一列</td>
            <td>第二行，第二列</td>
            <td>第二行，第三列</td>
            <td>第二行，第四列</td>
        </tr>
        <tr>
            <td>第三行，第一列</td>
            <td>第三行，第二列</td>
            <td>第三行，第三列</td>
            <td>第三行，第四列</td>
        </tr>
    </table>

效果图

合并单元格

单元格属性

表格中的单元格可以进行合并，通过<th>、<td>的两个属性进行合并设置。
rowspan：跨行合并（上下合并）
colspan：跨列合并（左右合并）
属性：数字n，表示跨n行或n列

合并例图

思考：要怎么才能完成这种效果？
1.先观察最小行数和列数，由图可知观看区域1、4、9、13可以得知有四行，所以先使用快捷键tr4创建四个<tr>标签
2.观察最顶端同线，比如：1,2,3共线；4,5,6,7共线；8,9,10共线；最后是11,12,13共线，于是可以据此创建td标签，第一行tr内为td3；第二行为td4；第三行为td3；第四行为td*3；
3.然后进行单元格合并，比如观察到区域1是左右合并两个单元格，2是上下合并两个单元格，以此类推：得到代码如下：

   <table border="1" style="border-collapse: collapse;">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td>4</td>
            <td rowspan="2">5</td>
            <td>6</td>
            <td rowspan="2">7</td>
        </tr>
        <tr>
            <td rowspan="2">8</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>11</td>
            <td colspan="2">12</td>
            <td>13</td>
        </tr>
    </table>

表格的分区

一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。

分区标签

<table>内部最直接的子级包含四个分区标签：
1.caption：标题，标题文字
2.thead：表格头部，内部嵌套：tr>th
3.tbody：表格的主体。内部嵌套：tr>td
4.tfoot：表格的页脚。内部嵌套：tr>td
四个分区可以选择性组合
顺序不受影响，浏览器都是按照caption，thead，tbody，tfoot来执行的。

要实现的效果

分析：
1.先书写出大分区的标签：

   <table border="1" style="border-collapse: collapse;">
        <caption></caption>
        <thead></thead>
        <tbody></tbody>
    </table>

2.填充每部分的内容，由图可知，caption为各地区固定资产投资情况
thead为地区（合并两个单元格），按总量分，一直到去年同期

头部

而主体就是显而易见的：

主体

3.有单元合并的就合并，综上所述得到的代码为：

<table border="1" style="border-collapse: collapse;">
        <!-- 先分区 -->
        <caption>各地区固定资产投资情况</caption>
        <thead>
            <tr>
                <th rowspan="2">地区</th>
                <th colspan="2">按总量分</th>
                <th colspan="2">按比重分</th>
            </tr>
            <tr>
                <th>自年初累计（亿元）</th>
                <th>比去年同期增长（％）</th>
                <th>自年初累计（％）</th>
                <th>去年同期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>全国</td>
                <td>124546.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>124546.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>124546.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>124546.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>124546.90</td>
                <td>9.6</td>
                <td>100.0</td>
                <td>100.0</td>
            </tr>
        </tbody>
    </table>

表单的了解与制作

表单是用来收集用户输入信息的

表单的组成

HTML表单用来收集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（表单元素）3个部分

一个经典的表单

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等

表单域

HTML表单域使用<form>标签进行定义。
<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内。
<form>标签为双标签，容器级标签。

表单域标签属性

表单域属性

eg：

   <form action="userLogin.php" method="POST" name="登录"></form>

表单元素

<input>标签

<input>是一个最重要的表单元素
<input>单标签，本身相当于一个特殊的文本
<input>需要通过标签属性实现各种功能。

<input>标签的属性

单行文本输入框：text

用户单行文本的输入

         <p>
            用户名：<input type="text" name="用户名" value="请输入您的用户名">
        </p>

效果如图

单行密码输入框：password

密码输入时不会显示出输入的内容

用户密码输入

<p>
            密码：<input type="password" name="密码" id="">
        </p>

效果

单选框：radio

单选框，添加了name属性才可以进行单选操作

  <p>性别：<input type="radio" name="sex">男
                <input type="radio" name="sex">女
        </p>

效果图

复选框：checkBox

定义提供用户点击选择的多选框，复选框允许用户在有限数量的选项中选择零个或多个选项，同一组复选框最好也设置相同的name属性。

 <p>
            你喜欢什么？：<input type="checkbox" name="favorite">动漫
                         <input type="checkbox" name="favorite">游戏
                         <input type="checkbox" name="favorite">音乐
        </p>

效果图

默认选中设置
单选框和复选框都可以提前设置默认选中项。 <input>标签有一个checked属性，如果不设置表示默认没有选中。属性值如果设置为"checked"，表示该项默认被选中。

<p>
   <input type="radio" name="sex" checked="checked" /> 男 
   <input type="checkbox" name="hobby" checked="checked" /> 唱歌
</p>

按钮

按钮的四种type

<form>
        <input type="button" value="按我一下">
        <input type="reset" value="清空">
        <input type="submit" value="提交">
        <input type="image" src="hello.jpg">
</form>

四个按钮

文件上传：file

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。

<input type="file">
<!--  使用input的multiple属性，可以决定是否可以选择多个文件。 -->
<input type="file" multiple="multiple" />

效果图

多选了之后

<textarea>标签

使用textarea标签可以输入多行文本
双标签
文本域可以输入默认文本，标签中间可以写默认文字。

<textarea>标签属性

rows：行，属性值为数字，数字是几文本框最大行数就是几，超过行数就会隐藏起来，出现滚动条
cols：列，属性值为数字，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数

<textarea cols="30" rows="10">默认输入文字</textarea>

下拉菜单

下拉菜单需要至少两个标签完成结构：
<select>：选择，表示定义下拉菜单整体结构。
<option>：选项，表示定义下拉菜单的每一项。
两个标签都是双标签，文本级标签。
select>option，option可以有任意多选项。
代码例子：

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

效果图

设置默认选中项

option属性selected，更改默认项。

  <option value="上海" selected="selected">上海</option>

分组管理

下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。
select>optgroup>option
<optgroup>可以设置一个label属性，表示给这一组选项添加一个分组标签名，分组标签<optgroup>是不能被点击选择的。

<select name="" id="">
            <optgroup label="国内">
                <option value="">广州</option>
                <option value="">深州</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </optgroup>
            <optgroup label="国外">
                <option value="">东京</option>
                <option value="">纽约</option>
                <option value="">北海道</option>
            </optgroup>
        </select>

效果图

label标签

提高用户体验，帮表单元素定义标注（标记）。
若将表单控件和提示内容使用<label>进行绑定，鼠标点击label内的提示内容也会自动把焦点转移到和标签相关的控件上

绑定方法一：

1.给表单元素加一个id属性
2.将需要绑定的其他内容用<label>标签包裹
3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性

      <p>性别：<input type="radio" name="sex" id="nan"><label for="nan">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv">女</label>
        </p>

绑定方法二：

直接添加使用<label>嵌套

<label><input type="checkbox" name="favorite">音乐</label>

点击label绑定的提示内容也可以选择

字符实体

在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格）,或者符号具有特殊功能也不能直接书写（例如<>符号）。
可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。
可通过w3c官网查询

字符实体部分表

建议

规则：所有的字符实体和实体编号都是以&开头，以；结尾的。
注意：实体名称对大小写敏感！
建议1：使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
建议2：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。