网页开发基础-内容分组
网页开发基础–内容分组
一、网页分组元素
1.分组选择器
1 | <style> |
第3-5行，定义了一个分组选择器。
分组选择器和普通的CSS选择器用法一致。只是使用时，需要以英文逗号,将多个选择器间隔开。
2.div元素
<div>是一个块级元素，它可以对网页中的元素进行布局。
1 | <html> |
第13-16行，定义了一个div元素。
第6-9行，使用标签选择器，设置div元素的背景颜色为#5E80F4，对齐方式为居中对齐。
在HTML文档中，<div>标签需要放在<body>标签内，<div>标签本身没有什么特殊的显示效果，可以将它理解为网页的一个板块
<div>标签内可以有很多不同的元素。
<div>标签标签选择器，用于设置div元素的样式。
3.宽度和高度
因为div元素用于将网页进行分块，并完成布局。所以，除了设置颜色和文本对齐属性外，我们常常还需要设置高度和宽度属性。高度和宽度属性的值，一般使用数值和长度单位或百分比来表示。例如：
1 | <style> |
这里的height: 80px;表示高度为80像素;
这里的width: 50%;表示宽度为页面的50%。
4.span元素
span是一个行内元素，可以对HTML文档中的内容进行局部布局。例如：
1 | <style> |
<span>标签也没有什么特殊的显示效果。当它结合CSS设置样式时，其中的内容才会有视觉上的变化。
<span>是一个行内元素，可以直接在段落元素p的内部对一些内容进行标记。
5.后代选择器
1 | <style> |
第3-6行，定义一个后代选择器。
后代选择器使用时，需要以空格将多个选择器间隔开。
比如，这里p span，表示只设置p元素内，span元素的样式。
这里的空格，用于区分多个选择器的先后顺序。后代选择器有严格的先后顺序，后代元素必须在空格后面。也就是说，span p这种写法在这里是错误的。
6.div和span的区别
div一般用于排版布局，即把内容放到一个矩形的区块中，随意移动会影响布局，结合CSS用于设置网页中一个版块的样式。span只是把一部分内容定义成一个整体，结合CSS用于设置网页中的局部样式。div属于块级元素，会独占一行；span属于行内元素，不会独占一行。
本节总结：
二、列表
1.什么是列表结构
列表结构是指网页中的相关数据或信息都按照行的方式整齐排列。
按照不同的应用场景，列表结构可分为3种，分别是有序列表、无序列表和定义列表。
2.有序列表
有序列表之间的内容有先后顺序之分，即每个列表项前有数字或某种表示一系列项目的编号标记来表示顺序。例如，有序列表可以从数字1开始，并继续到2、3、4等；也可以从字母A开始，到B、C、D等。例如：
1 | <p>游戏畅销榜</p> |
第2、6行，用<ol>定义了一个有序列表。第3-5行，使用<li>对有序列表添加了三个列表项。
<ol>标签：ol是ordered list的缩写，表示有序列表。<ol>标签一般和<li>标签配合使用，不会单独出现
<li>标签：li是list item的缩写，表示列表项，即列表里的条目。默认情况下，有序列表中的每一项都会按序标记一个数字。<li>标签嵌套在<ol>标签中，有多少个<li>标签就表示有多少条列表项。
可以通过CSS，设置
list-style-type属性的值，指定序号类型。1
2
3
4
5<style>
ol {
list-style-type: upper-alpha;
}
</style>第2-4行，创建了一个标签选择器ol，并其将
list-style-type的属性值设置为了upper-alpha，指定大写字母为序号类型
| list-style-type | 描述 |
|---|---|
| deciaml | 默认，表示按数字顺序排列 |
| upper-alpha | 表示按大写字母顺序排列 |
| lower-alpha | 表示按小写字母顺序排列 |
| upper-roman | 表示按大写罗马数字顺序排列 |
| lower-roman | 表示按小写罗马数字顺序排列 |
3.无序列表
当各个列表项之间不再有顺序级别之分，为并列关系时使用。
例如，新闻栏目各列表项（新闻）之间排序不分先后，就可以看作是一个无序列表；又或者是一个TODO清单。
1 | <p>今日菜单</p> |
这几行代码构建了一个无序列表。
第2、6行，使用<ul>标签对定义了一个无序列表。
第3-5行，使用<li>标签对为无序列表添加了三个列表项。
ul是unordered list的缩写，表示无序列表。
和<ol>标签一样，<ul>标签一般和<li>标签配合使用，不会单独出现。
<li>标签表示列表项，其中可以包含文本、图片、链接等，甚至还可以是另外一个列表；
默认情况下，无序列表的每个列表项前面都有一个实心黑色圆点。
和有序列表一样，我们可以通过CSS样式属性
list-style-type来设置无序列表中的序号样式。list-sytle-type属性 显示效果 disc（默认值） 黑色实心圆点 circle 黑色空心圆点 square 黑色实心方块 none 不会出现任何符号
4.定义列表
除了有序和无序列表，还有一种HTML列表类型，被称为定义列表。该列表的应用场景为对某个术语或内容进行解释和描述，所以由标题和描述两部分组成，描述是对标题的解释和说明，标题是对描述的总结和提炼。比如，一些网站顶部或底部的相关信息。例如：
1 | <dl> |
这几行代码定义了一个自定义列表。
第1-6行，使用<dl>标签对定义了一个定义列表。
第2行，使用 <dt>标签对定义了一个术语，也就是标题。
第3-5行，使用<dd>标签对为该标题添加了三个描述。
定义列表中每一项都有一个 标签，分别用于定义术语（标题）和对术语（标题）进行解释与描述。
<dl>标签。dl是definition list的缩写 ，表示定义列表。
<dt>标签。dt是definition term的缩写，表示术语，也就是我们说的标题。
<dd>标签。dd是definition description的缩写，表示一个术语（标题）的描述。
定义列表的列表项前没有任何项目符号。<dt>标签和<dd>标签虽然是同级标签，但是它们的默认样式不同：<dt>顶格显示，而<dd>带有一段缩进，这样层次更加分明。
本节总结：
三、表格
1.表格结构
在制作网页的过程中，有时需要在一个区域呈现大量的内容。为了对这些内容进行分类、排版，可以使用表格结构。例如某影视网站提供的【剧集播出时间表】，通过它可以快速地订阅自己喜欢的剧集。
通常，我们会用行、列、单元格等词汇来描述一个表格的组成。
2.表格元素
在HTML中表格是一行一行进行录入的。
1 | <table> |
<table>标签：用来创建一个表格元素。表格的所有内容需要写在<table>和<\table>之间。
<tr>标签：tr是table row的简称，表示表格的行。表格中有多少个<tr>标签对，就表示有多少行数据。
<th>标签：th是table head的简称，表示表格的表头单元格。<th>标签一般位于表格的第一行，充当每一列的标题，且该标签通常只会出现在 tr 元素中。默认情况下，大多数的浏览器会把表头文本显示为粗体居中。
<td>标签：td是table datacell的简称，表示存放表格数据的表格单元格。默认情况下，大多数的浏览器会把`标签中的内容左对齐显示。
<th>与<td>的区别：
- <th>标签是表头单元格，用来存储标题，该标签中的文字会在网页中默认粗体居中显示。
- <td>普通的表格单元格，用来存储对应标题下的数据，该标签中的内容会在网页中默认左对齐显示。
3.设定表格边框
在默认情况下，制作的表格是没有边框的。可以通过CSS设定表格的样式结构，为其添加边框。
1 | <style> |
- 使用分组选择器，同时为table、th、td三个标签设置样式。
- 使用
border-style属性，设置元素的四个边框的样式，即上、下、左、右边框的样式。 - 上例设置边框样式为
solid，表示表格、表头及单元格的上、下、左、右边框均是实线。 - 使用
border-collapse属性，设置单元格间的间距。默认情况下，border-collapse属性的值为separate，表示边框间会存在间距，展示出来的效果即是双层边框。要想取消单元格之间的间距，可以将CSS中的border-collapse属性的值设为collapse，即可把表格中的边框合并为单一边框。
4.合并单元格
1 |
|
第22行，通过<td>元素的rowspan属性，合并表格第1列的第2、3行单元格（跨行合并）；
第23行，通过<td>元素的colspan属性，合并表格第2行的第2、3列单元格（跨列合并）。
效果如下：
本节总结：
四、网页中的输入框
1.文本输入框
1 | <form> |
上述代码创建了一个简单的表单，它包含一个文本输入框与描述它的文本。
表单：每个表单都以<form>标签开始，</form>标签结束。
输入：使用<input>表示一个输入元素，它是一个单标签元素，也是一个行内元素。
输入类型：type 属性用来设置 input 元素的类型。当设置为”text”时，input 会展示为一个文本输入框。
为输入内容设置名称：name 属性为输入框设置一个名称。
预留提示内容：placeholder 属性为输入框预留一段提示信息，它只在用户没有输入内容时显示。
输入状态：输入框在网页中的样式分为两种状态：
- 未聚焦——未点击输入的状态；
- 聚焦——点击后等待输入的状态（出现光标的状态）
联想补全输入的内容:为输入框设置name属性的一个常见作用是实现内容补全。即用户在为相同名称的表单中填写内容时，浏览器会自动显示之前输入过的内容供他选择。
不同的文本输入框:
- 设置
type="password"时，得到一个密码输入框，输入的内容会被隐藏。 - 设置
type=“number”时，得到一个数字输入框，只接受用户输入的数字内容。
- 设置
2.提交按钮
通常我们会在表单中至少设定一个按钮，用来触发提交事件。所谓的提交事件，就是指表单填写结束后，网页要执行的动作。例如：
1 | <form action="javascript:alert('登录成功！')"> |
创建表单：使用<form>创建一个表单，并为它设置action 属性。
设置提交后的动作:action 属性用来设置提交表单后执行的动作。它的属性值一般设为用来接受数据的服务器地址或某行JavaScript语句。
设置提交按钮:设置输入类型为“submit”。
按钮上的文字:value 属性设定按钮上显示的文字。
强制输入：默认情况下，用户即使没有输入内容，也可以点击提交按钮。若要强制用户必须为某个输入框填写内容，你可以使用 required 属性。
1
2
3
4<form action="">
<input placeholder="输入你的电子邮件：" name="email" required>
<input type="submit" value="不输入内容直接提交试试">
</form>
本节总结：
五、网页中的选项
1.单选按钮
单选按钮的工作方式和老式收音机（radio）一样，一次只能按下一个按钮。因此，在HTML中，我们把<inpu>标签的type属性设置为radio，即可创建一个单选按钮。例如：
1 | <form> |
创建表单：每个表单都以<form>标签开始，</form>标签结束。
定义单选按钮控件:将<input>标签的type属性设置为radio，表示单选按钮。
为单选按钮设置名称：
name属性设置单选按钮控件的名称。name属性的值不会显示在页面中，但会与表单数据一起提交至服务器，用于在收集数据时对数据进行识别。需要特别注意的是，同一组单选按钮的name属性的值必须相同，这样才能生成一组互斥的选项、实现单选效果。
为单选按钮设置唯一标识：通过标签的
id属性，为每个单选按钮分配一个唯一的标识符。设置id属性一般有以下两种用途：- 配合<label>标签使用，为单选按钮添加文本描述；
- 用作单选按钮元素的CSS选择器，为单选按钮添加样式。
添加文本描述:
<input>标签只负责创建单选按钮控件，没有对应的文本描述.直接在<input>元素前后写入单选按钮的文本描述。
还有一种方法，使用<label>标签对，在其中写入文本描述。注意：<label>标签属于行内元素，不会独占一行。
指定文本描述的关联元素：
<label>标签的
for属性用于绑定文本描述与对应的按钮控件。例如：1
2
3
4
5
6<form>
<input type="radio" name="type" id="a">
<label for="a">个人</label>
<input type="radio" name="type" id="b">
<label for="b">企业</label>
</form>
2.复选框
1 | <form> |
定义复选框控件:将<input>标签的type属性设置为checkbox，表示复选框。
为复选框设置名称：可以使用<input>标签的
name属性，设置复选框控件的名称。相关的复选框元素的name属性应该使用相同的值，这样便能形成一个组。为复选框设置唯一标识:和单选按钮一样，复选框中<input>标签的
id属性为每个复选框分配一个唯一的标识符。为复选框添加文本描述:和单选按钮相同，除了直接在<input>元素前后写入文本描述外，还可以使用 <label>标签对。
指定文本描述的关联元素:当要绑定文本描述与对应的复选框时，需要保证<label>标签中的for属性值和对应的中的id属性值一样。这样点击<label>标签的文本描述时，<input>元素的控件也会有相应变化。例如：
1
2
3
4
5
6<form>
<input type="checkbox" name="type" id="a">
<label for="a">健身</label>
<input type="checkbox" name="type" id="b">
<label for="b">旅游</label>
</form>
3.单选按钮和复选框的通用属性
创建单选按钮和复选框时，除了<input>元素的name属性和id属性外，还有一个通用属性value，用于设置控件的值。单选按钮和复选框的name属性值和value属性值都不会显示在页面上。在提交数据时，它们俩会以名字/值对的形式，随表单一起被提交至服务器。
value属性:同一组单选按钮或复选框中，每个选项应设置不同的
value属性值，这样服务器才能辨别提交的是哪一项。1
2
3
4
5
6
7
8
9
10
11
12
13<form>
为一组单选按钮设置value属性：
<input type="radio" name="type" id="a" value="personal">
<label for="a">个人</label>
<input type="radio" name="type" id="b" value="business">
<label for="b">企业</label>
为一组复选框设置value属性：
<input type="checkbox" name="type" id="c" value="fit">
<label for="c">健身</label>
<input type="checkbox" name="type" id="d" value="tour">
<label for="d">旅游</label>
</form>
4.下拉菜单
1 | <form> |
示例中的代码，在表单中创建了一个表示【店铺类型】的下拉菜单。
定义下拉菜单控件:<select>标签对用来创建一个下拉菜单元素。
设置名称与唯一标识:同所有其它表单元素一样，<select>元素也有
name属性，且不会显示在页面上，但会与表单数据一起提交至服务器。定义下拉菜单中的选项:下拉菜单里的每个选项都由<select>中的一个 <option>元素定义。
为下拉菜单添加文本描述:与单选按钮和复选框相同，除了直接在、<select>元素前后写入文本描述外，还可以使用 <label>标签对。
指定文本描述的关联元素:通过
for属性，将<label>元素与<select>元素关联在一起，提高了控件的可及性。
本节总结：
5.项目实战：注册界面设计
5.1注册页面骨架
1 |
|
5.2 css添加样式
1 | <head> |
完成后的效果：
本节总结：