前端开发----HTML3

前端开发之HTML

HTML常用标签

1、列表

• 列表，用于制作HTML页面汇总的一系列项目
• 一般开发者会将内容相关、结构相似、样式近似的内容使用列表结构进行搭建
• 根据项目内容不同，可使用三种语义的列表结构：无序列表、有序列表、自定义列表

1、无序列表 ul

1、说明：无序列表需要两个标签参与，ul和li

• ul：unordered list，用来定义一个无序列表的大结构
• li：list item，列表项，用来定义无序列表中的某一项

注意：ul和li为嵌套关系，一个列表中刻意有任意个列表项

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

2、注意事项

• 1、ul内部只能嵌套li，li标签不能脱离ul单独书写
• 2、li标签是一个容器级标签，其内部可放置任意内容，甚至刻意放一组ul>li的无序列表结构
• 3、无序列表的列表项li之间，没有顺序先后之分，各列表项之间的重要程度是相同的
• 4、无需列表的作用只是搭建列表结构，没有添加样式前缀功能，样式是由css负责

2、有序列表 ol

1、说明：有序列表语法与无序列表相似，只是语义有差异，需要ol和li这两个标签参与

• ol：ordered list，用来定义一个有序列表的大结构
• il：list item，用来定义有序列表的每一项

注意：ol和li为嵌套关系，一个ol标签内部可嵌套任意多个li标签

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

2、注意事项

• 1、ol内部只能嵌套li标签，而li标签不能脱离ol标签单独书写
• 2、li标签是一个容器级标签，内部可放置任意内容，甚至可放ol>li的有序列表
• 3、有序列表的列表项li之间，存在先后顺序之分，根据内容的顺序需要合理调整书写位置
• 4、有序列表的作用只是搭建有顺序的列表结构，样式由css负责

3、自定义列表 dl

1、说明：自行一列表不仅是一列项目，而且还是项目及其注释的组合；自定义列表由三个标签组成完成结构，分别是dl、dt和dd

• dl：definition list，用来定义一个自定义列表的大结构
• dt：definition term，用来定义自定义列表中的一个主题或者术语
• dd：definition description，用来定义解释项，表示描述或解释前面的定义主题

注意：dl内部只能嵌套dthedd，dt与dd是同级关系

<dl>
	<dt>主题</dt>
	<dd>解释项</dd>
</dl>

2、注意事项

• 1、dl内部只能嵌套dt和dd，dt与dd不能脱离dl单独书写
• 2、dl内部可放多组dt和dd，每个dd解释说明的是前面距离最近的一个dt
• 3、每个dt侯爱民可有0个或多个解释项dd，每个dd解释的都是前面距离最近的一个dt
• 4、dt和dd标签也是容器级标签，内部可反之任意内容
• 5、定义列表中的缩进样式由css负责，标签只负责搭建语义结构
• 配合这css布局效果，最好每个dl中只添加一组dt和dd，这样有利于后期代码管理

2、布局标签

说明：div和span标签常用做布局工具，俗称盒子，后面HTML5也添加了更多布局标签，div和span标签都是没有具体明确语义的

1、div标签

1、说明：div，全程division，分隔、区域、跨度，俗称大盒子，该标签为双标签，是最经典的容器级标签，内部可反之任意内容
2、作用：通常用于划分网页区域，进行结构布局，一般将相关内容使用div标签包裹起来，整体设置大的布局效果

2、span标签

1、说明：span，小区域、小跨度，俗称小盒子，该标签为双标签，是一个容器级标签
2、作用：在不改变整体效果情况下，可富足进行局部调整

3、表格

1、表格基础

1、说明：创建一个简单的表格至少需要三个标签组成，分别是table、tr和td标签

• table：表格，用来定义整个表格的大结构
• tr：table rows，表格行，用来定义这个表格由多少行组成
• td：table data，表格数据，也叫表格单元格，用来定义每个行内部的单元格
• 三者关系：table>tr>td，一个表格中有多个行，每个行中有多个单元格

2、table标签常用属性
table标签可添加border边框属性，属性值为数字，表示像素

注意：表格单元格之间会有默认空隙，会导致双线边框
解决方法：设置标签样式属性style，border-collapse: collapse; （表示边框塌陷）

3、表头单元格

• 如果用户需要绘制表头，可使用th标签添加（th，table head data，表头单元格）
• 在表格中绘制时，替换的是td的位置
• th标签中自带默认css样式效果，文字呈粗体居中显示

2、合并单元格

1、单元格属性

• 表格的单元格可进行合并，通过th和td的来个呢过属性可进行合并设置
• rowspan：跨行合并，上下合并
• colspan：跨列合并，左右合并
• 属性值：数字，数字是几表示跨几行或跨几列

案例

<table border="1">
        <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>

2、制作技巧

• 1、列出所有行tr，以最小单元格为标准
• 2、添加每一行的td或th单元格
• 3、划分单元格所在行时，顶边对齐的属于同一行
• 4、将所有行和列写完后，再检查哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格

3、表格分区

1、说明：一个完整的表格分为四个大区域：表格标题、表格头部、表格主体、表格页脚
2、分区标签

• table内部最直接的子集包含四个分区标签，它们都是双标签
• caption：表格标题，内部书写标题文字
• thead：table head，表格头部，内部嵌套tr>th
• tbody：table body，表格主体，内部嵌套tr>td
• tfoot：table foot，表格页脚，内部嵌套tr>td
• 四个分区可选择性进行组合
• 注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行
  

<table border="1">
        <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>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>全国</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
</table>

3、制作技巧

• 1、先书写大分区标签结构
• 2、填充每个分区的内部内容
• 3、如果有合并单元格内容，进行单元格合并

4、表单

1、说明：表单主要用于收集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件；在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也成为表单元素）这三个部分构成
2、功能说明

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

1、表单域标签 form

1）说明
1、HTML表单域使用form标签定义，该标签为双标签，容器级标签
2、form标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个form标签之内
2）表单域标签属性
说明：form标签对应属性规定提交数据的方法和提交位置

<form action="xxx.php" method="post/get" name="message">
	提示信息及表单控件书写位置
</form>

2、表单元素

1、input标签 input

1、说明

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

2、input标签常用属性

type属性的值不同，决定input标签的形态不同

• 单行文本输入框 text，input标签的type属性值设置为text，定义提供用户输入的单行文本输入框，不能输入多行文字，常用value属性定义默认的输入文字（< input type=“text” value=“默认输入文本” />）
• 密码输入框 password，input标签的type属性值设置为password，定义提供用户输入的密码框，passowrd字段中的字符会被做掩码处理（显示为星号或实心圆）（< input type=“password” />）
• 单选框 radio，input标签的type属性值设置为radio，定义提供用户点击选择的单选框，单选框一般是成组出现，多个单选框组成一组选择情况，同一组单选框之间必须是互斥关系，通过给同一组单选框都设置相同name属性值来实现（< input type=“radio” name=“sex” /> 男
  < input type=“radio” name=“sex” /> 女
  ）
• 复选框 checkbox，input标签的type属性值设置为checkbox，定义提供用户点击选择的多选框，复选框允许用户在有限数量的选项中选择零个或多个选项，同一组复选框最好也设置相同的name属性（< input type=“checkbox” name=“hobby” /> 唱歌
  < input type=“checkbox” name=“hobby” /> 代码
  < input type=“checkbox” name=“hobby” /> 运动）

默认选中设置
单选框和复选框都可提前设置默认选中项
input标签有一个checked属性，如果不设置表示默认没有选中，如果属性值设置checked，表示该项默认被选中
< input type=“radio” name=“sex” checked=“checked” /> 男
< input type=“checkbox” name=“hobby” checked=“checked” /> 唱

• 按钮，input标签有四种形式按钮
  

• 文件上传 file，input标签的type属性值设置为file，定义文件上传按钮，可提供用户选择本地文件进行上传服务器（< input type=“file”>）；使用input的multiple属性，可决定是否可选择多个文件（< input type=“file” multiple=“multiple” />
  ）

2、文本域 textarea

1、说明：文本域使用textarea标签定义，制作可输入多行文本的区域，该标签为双标签，本身相当于一个特殊文字，文本域可设置默认输入文字，在双标签之间书写默认文字
2、textarea属性：该标签有两个属性值，可设置显示区域大小

• rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条
• cols：列，属性值是数字，数字是几，代表出现滚动条后每一行显示的最大字节数（一个汉字按2字节计算）
  （< textarea cols=“30” rows=“10”>默认输入文字< /textarea>）

3、下拉菜单

1、说明：HTML中下拉菜单提前设置一些选项，然后可通过点击选择其中一项
2、标签
下拉菜单需要至少两个标签完成结构：

• select：选择，用来定义下拉菜单整体结构
• option：选项，用来定义下拉菜单的每一项
  这两个标签都是双标签，文本级标签，select>option，option可有任意多项

<select>
	<option>广州</option>
	<option>深圳</option>
	<option>上海</option>
	<option>重庆</option>
</select>

3、默认选中项
默认情况下，选中的是第一项，下拉菜单可通过option标签设置select属性，属性值为selected，更改默认选中项（< option selected=“selected”>深圳< /option>）

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

<select>
	<optgroup label="国内">
		<option>广州</option>
		<option selected="selected">北京</option>
	</optgroup>
	<optgroup label="国外">
		<option>伦敦</option>
		<option>巴黎</option>
	</optgroup>
</select>

4、label标签

1、说明：所有的表单元素都可通过绑定其他内容去扩大触发点击范围，这个时候就需要使用到label标签
2、label标签作用是帮表单元素定义标注（标记），如果将表单控件与提示内容使用label进行绑定后，当用户鼠标点击label内的提示内容时，浏览器就会自动将焦点转移到标签相关的表单控件上
3、绑定方法
1）方法1

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

<input type="checkbox" name="hobby" id="sport" />
<label for="sport">运动</label>

2）方法2

• 如果绑定内容和表单元素写一起，可化简绑定写法，直接使用label标签将绑定内容与表单元素一起进行嵌套

<input type="radio" name="sex" />男</label>