您的位置：360文档中心› 黑马程序员web前端教程：02-HTML-内容标签笔记(下)

黑马程序员web前端教程：02-HTML-内容标签笔记(下)

黑马程序员web前端教程：02-HTML-内容标签笔记(下)
黑马程序员web前端教程：02-HTML-内容标签笔记(下)

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,
HTMML5 基础课程—HTML-高级标签
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
1
页

目录
目录 ........................................................................................................ 2 1.1 列表标签.................................................................................... 3 1.2 表格标签 table ........................................................................... 5 1.3 关于表格的合并单元格 .............................................................. 8 1.4 Div 和 span 标签 ......................................................................... 9 1.5 表单标签.................................................................................. 10 1.5.1 Form 标签 ....................................................................... 10 1.5.2 Input 标签 ....................................................................... 10 1.5.3 Select 标签 ..................................................................... 11 1.5.4 文本域标签 ..................................................................... 12 1.5.5 Fieldset 标签 ................................................................... 12 1.5.6 Lable 标签....................................................................... 13 1.5.7 表单总结 ........................................................................ 13 1.6 Iframe 标签............................................................................... 15 1.6.1 Mate 标签的补充 ............................................................. 15 1.7 字符实体.................................................................................. 16

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,
1.1 列表标签
表示：传智播客在全国开设分校的顺序列表： ① 北京 ② 上海 ③ 深圳 ④ 广州 ⑤ 郑州 ⑥ 武汉
表示：我的个人爱好，无序的列表。 ? 足球 ? 篮球 ? 乒乓球 ? 学习

  • 北 京 你 好
  • 上 海
  • 成 都

    • 传智播客 前端与移动开发学院
    https://www.360docs.net/doc/3c18575129.html,
    第
    3
    页

  • 武 汉

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


传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,
自定义列表

关 于 我 们
传 智 简 介
联 系 方 式
诚 聘 英 才
人 才 服 务

1.2 表格标签 table
快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
5
页




传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,

基 本 参 数 1.4t 帕 萨 特 1.8t 帕 萨 特
基 本 参 数 1.4t 帕 萨 特 1.8t 帕 萨 特

姓 名 年 龄 成 绩
传 智 播 客 14 已 经 培 养 10 几 万 人 的 it 人 才
黑 马 程 序 员 6 几 万 人 的 it 人 才
< ！ - 表 格 头 部 --->
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
7
页

1.3 关于表格的合并单元格
Rowspan 行方向上合并单元格 Column 列方向合并单元格

14 -->


传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,

姓 名 年 龄 成 绩
传 智 播 客 已 经 培 养 10 几 万 人 的 it 人 才
6 几 万 人 的 it 人 才

1.4 Div 和 span 标签
Div 标签:
Span 标签: 块级标签:独占行。 行级标签：可以跟其他的行内标签共用一行。 块：p，div，ul，ol，dl，li，dt，h1-h6 行：span，strong，em，文本相关的标签都是行内标签。
Div 多用于表示文档中的一个块或者是整个结构的小节。 Span 标签，多用于文本的一小节。
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
9
页

1.5 表单标签
1.5.1 Form 标签 Form 标签，表单的域标签，用于包裹整个表单的内容。 表单就是用户提交数据到后台的一个虚拟单子。 表单一般由 文本框、下拉列表、单选、多选、文本域等组成。 Action 属性，用于指定当前表单 提交的时候指向后台的地址。 1.5.2 Input 标签 Input 标签是文本框、单选、多选、按钮等。 Type 属性不同的取值决定了 input 标签的作用。 文本框：text 密码框：password 单选：radio 多选：checkbox 按钮：button 提交按钮：submit 重置按钮： reset Demo ：

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,

Input 标签的 checked 属性，属性值只有一个 checked，可以省略属性值，在 单选按钮和多选按钮中表示 此按钮被选中。 1.5.3 Select 标签 Select 标签用于下拉列表，或者列表标签。
选项用 option 标签来设置，value 值只有在后台有用。Option 包裹的内容是 显示的选项的文本。例如：
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
11
页

Multipe:也是一个单属性。值只有一个 multiple。设置了此属性表示 select 标签表现为 列表标签。否则表示下拉列表标签。 1.5.4 文本域标签 Textarea 文本域标签， 用来输入大量文本的的标签。 文本域标签的 cols 表示 可以容纳多少列字符。Rows 容纳多少行数据。一般用于输入大量文本时才用这 个，其他情况用 input 就可以 了。

1.5.5 Fieldset 标签 表单组合标签，仅仅用于表单的组合。只是语义层面的事情。 可以影响到 reset 按钮的效果。 Legend 标签用于组合标签的标题。

用 户 组 2 用 户 名 2 ：

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,

密 码 2 ：


1.5.6 Lable 标签 Lable 标签可以让 标签文本点击的时候让 label 指向的标签表单标签获得焦 点。 两种方式，使用 for 属性指向 表单标签。 用 lable 标签包裹表单标签。 案例：
1.5.7 表单总结 Form：包裹标签，action：#
Input：文本框、单选按钮、多选按钮 type:checkbox、提交的按钮、按钮、 重置的按钮。
传智播客 前端与移动开发学院 https://www.360docs.net/doc/3c18575129.html, 第
13
页

Type:radio ,单选 Checked 属性：标识单选或者多选按钮是否被选中。单属性。
Lable 标签，for 属性指向要提供服务的 标签的 id 值。 Lable 直接包裹标签， 可以实现点击标签的文字内容， 让包裹的表单标签 标 签获得焦点。
Select：下拉列表，列表。 Multiple，单属性。 Option 设置我们的列表的选项。
Textarea 文本域标签：当输入大量的文本的时候需要使用文本域标签。 Cols 设置文本域可以输入多少列 字符。宽度。 Rows 设置文本域的可以输入的行 字符数，高度。
Fildset 标签 Legend，组合标签的标题。

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,
1.6 Iframe 标签
iframe 标签，元素会创建包含另外一个文档的内联框架（即行内框架）。 可以设置高度和宽度（height，width） 去掉边框：frameborder 设置为 0；
不建议使用了。
1.6.1 Mate 标签的补充
上面代表如果是用 ie 打开的当前页面， 那么就使用最新的 ie 版本打开此页面。 SEO 优化的设置:

传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
15
页


Base 标签可以让当前页面中的所有的 a 标签都拥有相同 的属性，比如 targent 属性。
1.7 字符实体
怎么才能实现在 HTML 页面中显示 HTML 的代码呢？ 比如说：要在页面中显示：

这是 p 标签的写法


HMTL： 1、网页结构：HTML Div、span、strong、em、table、tr、td Ul、li、ol、dl、dt、dd Input select textarea lable form fielset
2、CSS，描述样式

传智播客 前端与移动开发学院
前端开发工程师、移动 HTML5 开发工程师、全栈开发培训
https://www.360docs.net/doc/3c18575129.html,
3、JavaScript，实现页面交互的效果。
传智播客 前端与移动开发学院
https://www.360docs.net/doc/3c18575129.html,
第
17
页

相关主题
相关文档
最新文档