本系列笔记为nmy专属定制修改


HTML笔记——③列表

  • 一、列表
  • 1.1 基础列表
  • 1.1.1 无序列表
  • 1.1.2 有序列表
  • 1.1.3 定义列表
  • 1.2 嵌套列表
  • 二、表格
  • 2.1 表格标签
  • 2.2 表格属性
  • 三 表单
  • 3.1 Input 标签和属性
  • 3.2 Input 属性使用规范
  • 3.2.1 `type="image"`
  • 3.2.2 `type="hidden"` 隐藏域
  • 3.3 下拉菜单
  • 3.4 文本域
  • 3.5 label 标签
  • 3.5.1 label 标签只包裹内容
  • 3.5.2 label 标签包裹文字和表单控件
  • 3.6 button按钮控件
  • 四 布局标签
  • 4.1 无语义布局标签
  • 4.2 有语义的布局标签


一、列表

布局是常常使用列表。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

1.1 基础列表

  1. 无序列表 -> <ul> <li> 符合嵌套的规范，中间不允许有其他标签
  2. 有序列表 -> <ol> <li> 一般用的比较少，可以用无序列表来实现
  3. 定义列表 -> <dl> <dt> <dd> 列表项需要添加标题和对标题进行描述的内容
    <dl>：定义列表
    <dt>：定义专业术语或名词
    <dd>：对名词进行解释和描述
    type（无序）（有序）属性 : 改变前面标记的样式( 一般都是用CSS去控制 )

1.1.1 无序列表

<body>
	<!-- 这是无序列表 -->
    <ul><!-- 若改变样式空心圆 <ul type="circle">  squart正方形 none无效果 -->
        <li>第一项</li>
        <li>第二项</li>
    </ul>
    
</body>

html5列表页模板 html 列表_html

  1. ul>li*数字快速创建无序列表
  2. ul只能包括li，li可以包括任何内容
  3. 不赞成使用 type（无序）属性，请使用 CSS 代替

ul的属性

属性

值

描述

type

disc

(默认值)实心圆

circle

空心圆

square

实心方块

1.1.2 有序列表

<body>
    <!-- 这是有序列表 -->
    <!-- 若改变样式 <ol type="1或a或A或i或I（罗马数字）"> -->
    <!-- 若改变起始 <ol start="数字">表示从第几个开始 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
</body>

html5列表页模板 html 列表_表单_02

  1. ol只能包括li，li可以包括任何内容
  2. 不赞成使用type（有序）属性，请使用 CSS 代替

ol的属性

属性

值

描述

type

1

(默认值)数字有序列表（1、2、3、4）

a/A

按字母顺序排列的有序列表（a、b、c、d）/（A、B、C、D）

i/I

罗马字母（i, ii, iii, iv）/（I, II, III, IV）

1.1.3 定义列表

<body>
    <!-- 这是定义列表 -->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>
</body>
</html>

html5列表页模板 html 列表_css_03

html5列表页模板 html 列表_html5列表页模板_04

  1. dl>dt+dd*数字快速创建定义列表
  2. dl只能包括dd/dt，dd/dt可以包括任何内容

1.2 嵌套列表

列表之间可以互相嵌套，形成多层级的列表。

<ul>
        <li>辽宁省
            <ul>
                <li>沈阳</li>
                <li>大连</li>
                <li>烟台</li>
            </ul>

        </li>
        <li>
            山东省
            <ul>
                <li>济南</li>
                <li>青岛</li>
                <li>烟台</li>
            </ul>
        </li>
    </ul>

html5列表页模板 html 列表_表单_05

二、表格

2.1 表格标签

<table>：表格的最外层容器
<tr> ： 定义表格行
<th>： 定义表头（加粗居中）
<td>： 定义表格单元
<caption>：定义表格标题
标签是有嵌套关系的，要符合嵌套规范。
语义化标签：<tHead>、<tBody>、<tFoot>在一个table中，tBody是可以出现多次的，但是tHead、tFoot只能出现一次。

快速创建表格table>tr*数字>td*数字

<table>
        <caption>天气预报</caption>      <!-- 这是表格标题 -->
        <tr>
            <th>日期</th>           <!-- 这是表头 -->
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr>
            <td>2019年1月1日</td>这是表格单元
            <td><img src="" alt="图片"></td>
            <td>天气晴朗</td>
        </tr>       
        <tr>
            <td>2019年1月2日</td>
            <td><img src="" alt="图片"></td>
            <td>有雨，出门带伞</td>
        </tr>

    </table>

html5列表页模板 html 列表_表单_06

2.2 表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置

表格属性

属性

值

描述

width/height

宽、长的像素值/相对于父元素的比例

width="10"、width="5%"

border

边框宽度的像素值

border="10"

cellpadding

单元格与内容之间的距离，

默认1（px）

cellspacing

单元格之间的空间

默认（2px）

rowspan/colspan

合并行/合并列

/

align/valign

左右对齐方式left、center、right/上下对齐方式top、middle、bottom

不赞成使用。请使用样式代替

如果一个单元格的设置宽度，影响的是这一整列的宽度
如果一个单元格的设置高度，影响的是这一整行的高度

<body>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>天气预报</caption>    
        <tr>
            <th colspan="2">日期</th>        
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
        <tr align="center" valign="bottom">
            <td rowspan="2">2019年1月1日</td>
            <td>白天</td>
            <td><img src="" alt="图片"></td>
            <td>天气晴朗</td>
        </tr>   
        <tr>
            <td>白天</td>
            <td><img src="" alt="图片"></td>
            <td>天气晴朗</td>
        </tr>       
        <tr>
            <td rowspan="2">2019年1月2日</td>
            <td>白天</td>
            <td><img src="" alt="图片"></td>  
            <td>有雨，出门带伞</td>
        </tr>
        <tr>
            <td>白天</td>
            <td><img src="" alt="图片"></td>
            <td>有雨，出门带伞</td>
        </tr>

    </table>
</body>

html5列表页模板 html 列表_表单_07

三 表单

表单的作用是为了收集用户信息。
格式：

<form action=“url地址” method=“提交方式get或者post” name=“表单域名称">
各种表单元素控件
</form>

3.1 Input 标签和属性

  1. 格式：
<input type="属性值">
  1. 属性值

Input 标签的属性

属性

作用

描述

type

submit

提交按钮

默认宽度20个字符

type="password"

密码框

该字段的字符被掩码

type="submit"

提交按钮

将数据提交，value值默认”提交“

type="button"

可点击按钮

常用于通过JS启动脚本

type="reset"

清空按钮（表单恢复到value值）

value值默认”提交“；如果表单value非空则使用button标签替代reset标签，利用js将该textarea的值置空。

type="radio"

单选按钮（圆形）

name值相同方能单选

type="checkbox"

复选按钮（方形）

name值需相同

type="image"

图像形式的提交按钮

通常网站开发中不提倡使用

type="hidden"

收集或发送对于用户是不可见的信息

确定用户身份、form里有多个提交按钮等

type="file"

用于提交文件

multiple 属性可以提交多个文件

name

自定义

元素名称

/

value

自定义

元素的初始值

默认输入

placeholder

自定义

元素的提示值

在未输入内容时显示

checked

checked="checked"/checked

此input元素首次加载被选中

单选框都被checked回选中靠后的

maxlength

maxlength="数字"

用户能输入的最大长度

较少使用，用正则表达式替代

3.2 Input 属性使用规范

3.2.1 type="image"

  1. type="image"的input会同时提交按钮点击的位置坐标x、y，支付接口MD5校验会带来很麻烦的问题，通常网站开发中不提倡使用。
  2. 解决方法：
    可以用type="submit"，图片则使用背景，文字则可以用text-indent或者line-height来隐藏。

3.2.2 type="hidden" 隐藏域

隐藏域的使用情景：

  • 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
  • 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey。
  • 有些时候一个form里有多个提交按钮，使程序确定按哪一个按钮提交。我们就可以写一个隐藏域，然后在每一个按钮处加上 οnclick=”document.form.command.value=”xx”“
  • 多个form是不能同时提交的，但form相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
  • javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。

属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
属性 value 自定义内容，譬如按钮框的内容

checked、disabled、name、for …

Form当中method的post和get的区别

  1. get是从服务器上获取数据，post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
  5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

3.3 下拉菜单

  1. select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
  2. 默认显示第一项，selected默认选中
  3. 格式：
<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

html5列表页模板 html 列表_表单_08

3.4 文本域

作用：多行输入文本的表单控件。

html5列表页模板 html 列表_表单_09

<textarea>默认提示文字</textarea>
  1. 建议 CSS 设置 文本域的尺寸
  2. 实际开发中，一般禁用右下角的拖拽功能

3.5 label 标签

作用：标签的说明文本，绑定文字和表单控件的关系，增大表单控件的点击范围。

html5列表页模板 html 列表_html5列表页模板_10

3.5.1 label 标签只包裹内容

设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

3.5.2 label 标签包裹文字和表单控件

此时不需要属性

<label><input type="radio"> 女</label>

3.6 button按钮控件

<button type="">按钮</button>

button 标签的属性

属性

属性值

作用

描述

type

type="submit"

提交按钮

提交数据到后台（默认功能）

type="reset"

重置按钮

将表单控件恢复至默认值

type="button"

按钮

与JS搭配实现具体功能

四 布局标签

4.1 无语义布局标签

作用：布局网页（划分网页区域，摆放内容）

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

4.2 有语义的布局标签

标签

语义

header

网页头部

nav

网页导航

footer

网页底部

aside

网页侧边栏

section

网页区块

article

网页文章