html阶段第二节

一. 列表标签

1. 无序列表标签 ul>li

语法：

• 北京
• 上海
• 武汉
• 成都

2.有序列表标签 ol>li

语法：

1. 北京
2. 上海
3. 武汉
4. 成都

3.自定义列表标签 dl>dt+dd

概念：对术语或名词的解释和描述

语法：

名词1

名词1解释1

名词2

名词2解释1

二. 表格标签table

1.创建表格

语法：

单元格内的文字

* 表头内容

* 表格数据

2. 单元格合并

rowspan：一个单元格占用行进行显示

colspan: 将一行中的一个单元格占用列进行显示

三. 节标签 (div , span)

1. 块级标签： 独占一行或多行

2. 行级标签： 与其它行内标签共用一行

3.常见块级标签：p , div, ul, ol, dl, dt, dd, h1-h6

4.常见行级标签：span, strong, em, 文本相关的标签都是行内标签

四.表单

1.构成

通常由 表单控件(包含单行文本输入框，密码输入框和提交按钮等) 提示信息 以及 表单域(容纳表单控件和提示信息) 三部分构成

图片发自App

！ 所有表单标签必须包裹在 form标签中

！form中的 action属性指向后台的一个地址

！multiple 生成一个 展开的下拉列表

！option 设置列表的选项

2. 文本域

需放置大量文本时使用

cols 设置文本域可输入多少列 字符 宽度

rows 设置文本域可输入行 字符数 高度

3. 表单组合标签

filedset : 将表单内容的一部分打包，生成一组相关表单的字段

legend : 标签为fieldset元素定义标题

图片发自App

图片发自App

4. 选框

1. 默认性别选框

checked属性：标识单选或多选按钮是否被选中。

图片发自App

2. 默认日历选框

select 属性：下拉列表

图片发自App

3. 多个复选框

图片发自App

五.字符实体

图片发自App

六 . html 部分总结

1. 网页结构：html

div ,span ,strong ,em ,table ,tr ,td

ul ,li ,ol ,dl ,dt ,dd

input ,select ,textarea , lable ,form ,fielset

2. css 描述样式

3. javascript 实现页面交互效果

---

快捷键

ctrl+{ ：左缩进

ctrl+} ：右缩进

div*3 + table ：快速生成三行div标签

span{我是span标签$}*3 + table ：快速生成三行span标签