HTML笔记（5）

HTML笔记（5） 列表标签：

表格是用来显示数据的，那么列表就是用来布局的，列表最大的特点就是整齐，根据使用场景的不同，列表可以分成三大列：

无序列表、有序列表和自定义列表。

无序列表（重点）

<ul>(unordered lists)标签表示HTML页面中项目的无序列表，一般以项目符号呈现列表项，而列表项使用<li>(list item)标签定义。

无序列表的基本格式如下：

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ul>

示例：

    <h4>我最喜欢的食物</h4>
    <ul>
        <li>西瓜</li>
        <li>肉</li>
        <li>奶茶</li>
        <li>零食</li>
    </ul>

注意：

无序列表的各个列表项之间是没有顺序级别之分，是并列的。

<ul></ul>中只能嵌套<li></li>，输入其他标签或文字的做法是不被允许的。

<li>与</li>之间相当于一个容器，可以容纳所有元素。

有序列表（理解）

有序列表即有排列顺序的列表，其各个列表项之间会按照一定的顺序排列定义。

在HTML中，<ol>(ordered lists)标签用于定义有序列表，列表排序以数字显示，并且用<li>标签来定义列表项.

有序列表的基本语法格式：

<ol>

<li></li>

<li></li>

<li></li>

</ol>

示例：

    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>

    </ol>

注意：

<ol></ol>中只能嵌套<li></li>，输入其他标签或文字的做法是不被允许的。

<li>与</li>之间相当于一个容器，可以容纳所有元素。

自定义列表

在HTML中，<dl>（definition lists）标签用于定义描述列表（或定义列表），该标签会与<dt>（definition term)(定义项目/名字)和<dd>（definition description)(描述每一个项目/名字)一起使用。

基本语法格式：

<dl>

<dt>名词1</dt>

<dd>名词1解释1</dd>

<dd>名词2解释2</dd>

</dl>

示例：

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

表单标签

在网页中我们经常会看到表单，用于填写资料，接下来就来学习表单的知识，学完差不多就要到CSS啦，激动！

为什么要使用表单：

使用表单的目的是为了收集用户信息。

在我们的网页中，我们需要和用户交互，手机用户资料，此时就需要表单。

表单的组成：

• 表单域
• 表单控件（也叫做表单元素）
• 提示信息

表单域：

表单域是一个包含表单元素的区域

在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

基本语法格式：

<form action="url地址" method="提交方式" name="表单域名称">

各种表单元素控件

</form>

常用属性

表单控件（表单元素）

• input输入表单元素
• select下拉表单元素
• textarea文本域元素

1.input表单元素：

<input type="属性值" /> （<input/>为单标签）

type属性

运用：

   <form>
    username：<input type="text"><br>
    password: <input type="password"><br>

    性别：男<input type="radio"> 女 <input type="radio"> <br>

    喜欢的水果：
    西瓜 <input type="checkbox"> 香蕉 <input type="checkbox"> 
    哈密瓜 <input type="checkbox"> 菠萝 <input type="checkbox">
    </form>

结果：

这个时候发现，radio设置的是单选框，但还是男女两个选项都可以选，此时的解决办法是添加name属性。

除了type属性以外，input还有其他属性：

只要我们将代码改成这样即可。

性别：男<input type="radio" name="gender"> 女 <input type="radio" name="gender"> <br>

有时候我们在输入一些信息时，文本框里会出现文字提示作为背景，如下

有两种方式可以实现：

1.value (占用字符，在输入信息前需手动删除，主要给后台人员使用)

2.placeholder (不占用字符，点击文本框时自动消失)

checked的作用就是在加载出页面时默认选中某些选项。如下：

<input type="checkbox" name="agree" checked> 我同意该条约

效果：

每次刷新后都是默认勾选上的，不过现在这样默认勾选同意注册条款好像是违法的hhh。

嘿嘿，现在要去运动了，中午吃的好饱呀，超级开心，感觉热量很高hhh毕竟有芝士，现在要去把他消耗掉！晚上回来继续学习，也可能是学python。