tongsiying

阅读|运动|自律

0%

HTML5

发表于 更新于 分类于
本文字数： 30k 阅读时长 ≈ 27 分钟

第一章 HTML5 + CSS3课前导学

  • 学习HTML5+CSS3阶段的作用是什么
  • 阶段学习目标
  • 阶段课程内容基本信息
  • 阶段中知识的重难点
  • 阶段包含案例/项目展示
  • 阶段模块与学习方法建议
  • 阶段中技术点之间的联系

1.学习本阶段的作用

  • 了解什么是网页
  • 了解浏览器和浏览器内核
  • 能够使用Photoshop来量取设计图和相关操作
  • 具备网页开发的能力
  • 对于后面阶段的知识能够起到启下作用

2.本阶段学习目标

掌握HTML/HTML5
掌握css/css
能够基本使用Photoshop
掌握HTML+CSS布局（网页布局）

3.阶段课程内容基本信息

阶段名称 总时长 模块个数 小节个数 难易程度 建议学习天数
HTML5+CSS3 32.9h 4个 40个 ⭐⭐ 24天（每天2小时）

4.阶段中知识的重难点

1
2
3
4
5
6
7
8
CSS选择器
盒模型
CSS三大特性
浮动和清除浮动
CSS四种定位
CSS进阶
CSS3
案例/项目网页布局

5.阶段包含案例/项目展示

1
2
学成在线项目
品优购

6.阶段模块与学习方法建议

模块名称 模块难度 掌握程度 学习方法建议
HTML ⭐ 掌握 代码多敲多练，从而记住常用HTML标签
CSS ⭐⭐ 掌握 代码多敲多练，从而记住常用CSS标签
HTML5+CSS3 ⭐⭐ 掌握 代码多敲多练，理解用法
平优购电商项目 ⭐⭐⭐ 熟练 1、培养网页布局分析能力
2、代码至少敲一遍及以上
3、必须熟练使用HTML+CSS进行网页布局

7.阶段中技术点之间的联系

第二章 VSCode编辑器的使用【v6.5】

1.vs code软件

1
2
3
4
VS Code简介
VS Code安装
VS Code使用
vs Code插件安装

2.Vs Code简介

1
2
3
4
5
6
7
8
9
10
Visual Studio Code（简称VS Code/VSC）是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮智能代码补、GIT等特性，支持插件扩展等等.

推荐理由：
比sublime开源，比webstorm更轻
智能提示很强大
自带emmet
插件安装非常方便
自带强大的调试功能
软件跨平台支持Win，Mac以及Linux。
...

3.VS Code安装

官网下载地址：https://code.visualstudio.com/

4.VS Code使用

文件目录管理

File（文件）—open floder（打开文件夹）

颜色主题

设置首选项按钮-color Theme

其他操作

  • 放大缩小视图：ctrl+ +和ctrl+-

  • 向上复制一行：alt+shift+⬆

  • 向下复制一行：alt+shift+⬇

  • 当光标点击到某一行时，默认选中全行，可以直接复制剪切

  • 新建文件test.html，输入!然后TAB键会自动补全html的框架，输入div,然后TAB键自动补全<div>123</div>

Vs Code 使总结

  • VS Code是微软公式推出的一款非常轻量级、好用的编辑神器
  • 能去官网下载安装这款软件
  • 学会目录管理文件功能：File（文件）–open floder（打开文件夹）
  • 学会更改颜色主题：设置首选项按钮 color Theme
  • 能记住最常用的几个操作快捷方式

5.VSCode 插件安装

安装方法

点击左侧《扩展》图标，在搜索框输入需要安装的插件名称，点击install进行安装即可。安装完毕，需要重新加载软件使插件生效。

推荐安装的插件

插件 作用
Chinese (Simplified) Language Pack for VS Code 中文（简体）语言包
Open in Browser 右击选择浏览器打开html文件
JS-CSS-HTML Formatter 每次保存，都会自动格式化js css 和html 代码
Auto Rename Tag 自动重命名配对的HTML / XML标签
CSS Peek 追踪至样式
escook-theme 黑马刘龙彬老师主题
Community Material Theme 设置颜色主题
Live Server 自动监测代码修改并在浏览器响应
vscode-icons 设置文件图标作主题

注意：插件安装需要联网。

禁用或卸载已安装的插件

在扩展界面，点击“更多操作”（三个点），选择“显示安装的扩展”，在列表中找到需要禁用的插件，点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。

第三章 HTML【v6.5】

3-1 HTML初识

01-基础班学习路线

基础班目标：

基础班主要学习PC端网站布局。
最终网站：品优购静志网站。
目的：精通网页布局，也是我们的端人员的必备技能，为后面学习JavaScript打下坚实基础。

02-HTML简介导读

目标：

1
2
3
4
能够说出网页的基本组成
能够说出什么是HTML
能够说出常用的浏览器
能够说出Web标准的三大组成部分

目录：

1
2
3
网页
常用浏览器
Web标准

03-网页的相关概念

1.什么是网页？

1
2
3
4
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页"，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页常见以.htm或.html后级结尾的文件，因此将其俗称为HTML文件。

2.什么是HTML？（重点）

1
2
3
4
5
6
7
HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language）.
标记语言是一套标记标签（markup tag）。

所谓超文本有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

3.网页的形成？

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

前端人员开发代码 >浏览器显示代码（解析、渲染）生成最后的Web页面

4.网页总结

1
2
网页是图片、链接、文字、声音、视频等元素组成其实就是一个html文件（后缀名为html）
网页生成制作：有前端人员书写HTML文件，然后浏览器打开就能看到了网页

04-常用浏览器以及内核

网页是通过浏览器来展示的，关于浏览器我们要介绍以下两点

1.常用的浏览器
2.浏览器内核

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有E、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等.
平时称为五大浏览器。

查看浏览器市场份额：http://tongi.baidu.com/data/browser

浏览器内核
浏览器内核（渲染引岸）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

image-20210731073702850

目前国内一般浏览器都会采用Webkit/Blink内核，如360，UC，QQ、搜等.

05-web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织.

接下来围绕web标准，我们学习以下两点：

1.为什么需要web标准

浏览器不同，它们显示页面或者排版就有些许差异

1
2
3
4
5
6
7
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
1.让Web的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。

2.Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要为HTML
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
行为 行为是指网页模型的定义及交互的编写，现阶段主要为Javascript

Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

06-HTML标签导读

目标

1
2
3
4
5
能够说出标签的书写注意规范
能够写出HTML骨架标签
能够写出超链接标签
能够写出图片标签并说出alt和title的区别
能够说出相对路径的三种形式

目录

1
2
3
4
5
HTML语法规范
HTML基本结构标签
开发工具
HTML常用标签
HTML中的注释和特殊字符

07-HTML语法规范

基本语法概述

1
2
3
1.HTML标签是由尖括号包围的关键词，例如<html>
2.HTML标签通常是成对出现的，例dchtml>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签.
3.有些特殊的标签必须是单个标签（极少情况），例 <br/>，我们称为单标签。

标签关系
双标签关系可以分为两类：包含关系和并列关系。

包含关系：

1
2
3
<head>
	<title> </title>
</head

并列关系：

1
2
3
4
5
6
7
8
9
下面的
<head> </head>
<body> </body>
为并列关系

<html>
	<head></head>
	<body></body>
</html>

08-HTML 基本结构标签

第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

1
2
3
4
5
6
7
8
<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		你我之间，黑马洗练，月薪过万，一飞冲天
	</body>
</html>
标题名 定义 说明
<html></html> HTML标签 页面中最大的标签，根标签
<head></head> 文档头部 注意在head标签中我们必须要设置的标签是title
<title></title> 文档标题 网页标题
<body></body> 文档主体 元素包含文档所有内容

HTML文档的的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个两页，我们就可以预览我们写的第一个HTML文件了。

基本结构标签总结

09-VSCode工具创建页面

1
2
3
4
5
2.新建文件（Ctrl+N）.
3.保存（Ctrl+S），注意移动要保存为.html文件
4.Ctrl +加号键，Ctrl +减号键可以放大缩小视图
5·生成页面骨架结构。输入！按下Tab键。
6.利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击"Open In Default Browser"

10-DOCTYPE和lang以及字符集的作用

文档类型声明标签

1
2
3
4
5
6
7
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

表示：当前页面采用HTML5版本显示网页

注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型【声明标签】。

lang 语言种类

1
2
3
4
5
6
7
8
<html lang="en">
用来定义当前文档显示的语言。

en 定义语言为英文
zh-CN 定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

字符集

1
2
3
4
5
6
7
8
 <meta charset="UTF-8">
字符集（Characher set）是多个字符的集合。以便计算机能够死别和存储各种文字。

在 <head> 标签内，可以通过 <meta> 标签的 charest 属性来规定HTMAL文档应该使用那种字符编码。

charset 常用值有：GB2312、BIG5、和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家长要用到的字符。

注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用"UTF-8"编码，尽量统一写成标准的"UTF-8"，不要写成"utf8"或"UTF8"。

总结

1
2
3
4
1，以上三个代码vscode自动生成基本不需要我们重写。
2.<!DOCTYPE html> 文档类型声明标签，告诉浏览器这个页面采取htm15版本来显示页面。
3，<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站本页面采取英文来显示。
4.<meta charset="UTF-8"/>必须写，采取UTF-8来保存文字，如果不写就会乱码.具体原理后面分析。

11-标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

12-标题标签（重要）

标题标签：<hl>-<h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<hl>-<h6>。

1
2
3
4
5
6
7
8
9
10
11
<h1>这是一级标题<h1>
	···
<h6>这是六级标题<h6>
    
<h1>标题标签</h1>
<hi>标题一共六级选,</h1>
<h2>问句子加粗一行显,</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之,</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>

单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点：
1.加了标题的文字会变的加粗，字号也会依次变大。
2.一个标题独占一行。

13-段落标签和换行标签(重要)

段落标签<p></p>

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。

1
<p>我是一个段落标签</p>

单词paragraph[ˈpærəɡrɑːf] 的缩写，意为段落。

标签语义：可以把HTML文档分割为若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。

换行标签<br />

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />

1
<br /> 或 <br>

单词break的缩写，意为打断、换行。
标签语义：强制换行。

特点：
1.<br/>是个单标签。
2.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的问距。

14-体育新闻案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻</title>
</head>

<body>
    <h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
    <h4> 数据统计：水花兄弟合砍61分</h4>
    <p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯 和杜兰特。汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼 得到14分7篮板2助攻，今天勇士有7名替补出场。
    </p>
    <h4>兄弟对决升级：小库里给哥哥造成压力</h4>
    <p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻 在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥 哥库里，在防守端给库里造成了极大的困扰。
    </p>
    <p>作者：pink老师<br /> 2019-8-8
    </p>
</body>

</html>

vscode ALT+Z 自动换行

15-文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。

  • 突出重要性
语义 标签 说明
加粗 <strong></strong> 或 <b></b> 更推荐使用<strong>标签加粗语义更强烈
倾斜 <em></em> 或 <i></i> 更推荐使用<em>标签加粗语义更强烈
删除线 <del></del> 或 <s></s> 更推荐使用<del>标签加粗语义更强烈
下划线 <ins></ins> 或 <u></u> 更推荐使用<ins>标签加粗语义更强烈
引用 <q></q> 
1
2
3
4
<strong>加粗</strong>的文字
<em>倾斜</em>的文字
<del>删除</del>的文字
<ins>下划线</ins>的文字

16-div和span标签

<div> (diviision) 和 <span> 没有语义，它们就是一个盒子，用来装内容的。

1
2
<div> 这是头部 </div>
<span> 今日价格 </span>

div是division的缩写，表示分割、分区。

span意为跨度、跨距。

特点：
1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局，一行上可以多个<span>。小盒子

17-图像标签

<img> (image) 标签用于定义 HTML 页面中的图像

1
<img src="图像URL" />  #单标签

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名

所谓属性：简单理解就属于这个图像标签

图像标签的其他属性：

属性 属性值 说明
src 图片路径 必须属性
alt 文本 替换文本，图像不能显示的替换文本
title 文本 提示文本，鼠标放到图像上显示的文本
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细（基本是css指定） 
1
<img src="图片名.jpg" alt="图片显示出错" title="图片描述" width="500" height="300" border="10"/>

wigth 与 height 一般只设置一个，另外一个会自动等比例缩放

18-图像标签注意点

  • 图像标签可以拥有多个属性，必须写在标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式，即 key=”vaue”的格式，属性 =”属性值”。

重点掌握点：

请说出图像标签哪个属性是必须要写的？（src）
请说出图像标签中 alt 和 title 属性区别？（alt替换文本，title提示文本）

19-HTML初识单元测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
HTML初识单元测试
1、(单选题)
（单选）关于HTML下面说法不正确的是（A ）
A、A、HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
B、B、标记语言是一套标记标签 (markup tag)。
C、C、任何一个标签都可以是HTML的语言。
D、D、HTML 不是一种编程语言，而是一种标记语言 (markup language)。

2、(单选题)
（单选）关于浏览器的内核说法不正确的是（A）
A、A、IE的内核是Webkit
B、B、firefox的内核是Gecko
C、C、Safari的内核是Webkit
D、D、chrome/opera的内核是Blink

3、(单选题)
（单选）关于网页开发工具下列说法不正确的是（D ）
A、可以用VScode进行开发
B、可以用DW进行开发
C、可以用webstorm进行开发
D、可以用word进行开发

4、(单选题)
一个HTML页面，最基本的结构正确的是（ B）
A、<html><head><title></title><body></body></head></html>
B、<html><head></head><body><title></title></body></html>
C、<html><head><title></title></head><body></body></html>
D、<body><html><title></title><head></head></html></body>

5、(单选题)
当网页显示图片时，鼠标悬停图片显示文字描述是以下哪个属性（A ）
A、设置alt属性
B、设置title属性
C、设置href 属性
D、设置src 属性

6、(单选题)
web标准的构成描述正确的是（B）
A、结构类似动作
B、结构类似外观装饰
C、行为类似身体
D、表现类似外观装饰

3-2 HTML文件路径

20-目录文件夹和根目录

1
2
3
4
5
路径（前期铺垫知识）
目录文件夹和根目录：实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录。

路径

  • 目录文件夹和根目录
    • 目录文件夹：存放页面所需材料
    • 根目录：目录文件夹第一层

21-相对路径(上)

1
2
3
4
5
6
7
8
9
路径：
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用"路径"的方式来指定图像文件的位置。

路径可以分为：
1.相对路径
2．绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置
相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级，如 <img src="picture.jpg">
下一级路径 / 图像位于HTML文件下一级，如<img src="images/picture.jpg">
上一级路径 …/ 图像位于HTML文件上一级，如 <img src="../picture.jpg">

相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

22-绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

1
2
3
例如："D:webyimglogo.gif"
或
完整的网络地址："http://www.itcast.cn/images/ogo.gif"

23-链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

1.链接的语法格式

1
<a href="跳转目标"target="目标窗口的弹出方式"> 文本或图像</a>

<a></a>(anchor) “锚”

两个属性的作用如下：

属性 作用
href 必须属性 指定链接目标的 url 地址
target 指定链接页面的打开方式，_self 为默认值，_blank 为在新窗口打开

2.链接的分类

1.外部链接，例如：< a href="http://www.baidu.com">百度</a>。

1
2
<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://www.itcast.cn" target="_blank">传智播客</a>

2.内部链接网站内部页面之间的相互链接，直接链接内部页面名称即可，例如< a href="index.html">首页</a>。

1
<a href="gongsijianjie.html" target="_blank">公司简介</a>

3.空链接：如果当时没有确定链接目标时，<a href="#">首页</a>。

4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

1
2
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
#点击图片转到百度

6.锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。

1
2
在链接文本的href属性中，设置属性值为#名字的形式，如：<a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第2集介绍</h3>
链接分类 解释 样式
外部链接 <a href="http://www.baidu.com">百度</a>
内部链接 网站内部页面之间的相互链接 <a href="index.html">首页</a>
空连接 暂时没有确定链接目标时 <a href="#">待加入超链接的内容</a>
下载链接 如果 href 里面的地址指向一个文件或者压缩包，点击就会进行下载操作
网页元素链接 文本、图像、表格、音频、视频等各种网页元素都可以添加超链接 <a href="http://www.baidu.com"><img src="img.jpg"/></a>
锚点链接 快速定位到同一页面中的某个位置 <a href="#chepter1">第二章</a> <h2 id="chepter1">第二章介绍</h2>

24-注释标签和特殊字符

注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注程文字，就需要使用注释标签。

HTML中的注释以”<！-“开头，以”–>”结束。

在 VSCode 中的快捷键：ctrl + /

一句话：注释标签里面的内容是给程序猿看的，这个代码是不执行不显示到页面中的。

添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

特殊字符

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符 描述 字符代码
space 空格符 &nbsp;
< 小于号 ⁢&it;
> 大于号 &gt;
& 和 &amp;
¥ 人民币 &yen;
© 版权 &copy;
® 商标 &reg;
℃ 摄氏度 &deg;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 平方（上标2） &sup2;
³ 立方（上标3） &su

25-综合案例

1
2
3
4
5
通过综合案例主要复习：
1.目录文件夹
2.今日所学标签
3.路径
4·锚点链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞节的那些事</title>
</head>
<body>
    <h1>圣诞节的那些事，你知道多少</h1>
    
    <a href="#clothes">1. 圣诞老人最初的衣服是绿色的</a> <br />
    <a href="#gifts">2. 礼物为什么要装在袜子里？</a><br />
    <a href="#merry"> 3. “圣诞节快乐”英文为何是Merry Christmas而不是Happy Christmas?</a><br />
    <a href="#dear"> 4. 圣诞老人为什么驾着驯鹿而不是雪橇犬？</a><br />
    <a href="#star">5．圣诞树顶上挂着的星星是什么星星？</a>

    <h2 id="clothes">1. 圣诞老人最初的衣服是绿色的</h2>
    <img src="images/clothes.jpeg" height="200" />
    <p><a href="oldmen.html" target="_blank">圣诞老人</a>的袍子，最初并不是红色的，而是绿色的。17世纪早期，人们会在冬至这天用绿色植物装饰家里，因为大家相信绿色植物拥有抵御寒冷的魔力，因此，同样被认为拥有魔法的圣诞老人的衣服也是绿色的。1931年，艺术家海顿·珊布为可口可乐圣诞广告创作海报，为节日营销创造了一个喝可乐的圣诞老人的形象，因此，红衣红帽，白须慈祥的老人形象就被流传了下来。</p>
    
    <h2 id="gifts">2．礼物为什么要装在袜子里？</h2>
    <img src="images/gifts.jpeg" height="200" />
    <p>圣诞老人并非要把礼物放在袜子里，来源于一个古老的传说。传说有个心地善良的没落贵族，生活非常艰难。家有三个女儿，因为快要出嫁了但是买不起嫁妆而难过，圣尼古拉斯（圣诞老人的原型）想帮助他们，就从他家烟筒里丢下了三袋金子。金子掉进了挂在壁炉边的袜子里。于是，圣诞节的礼物放在袜子中就这样流传了下来。</p>
    
    <h2 id="merry">3．“圣诞节快乐”英文为何是Merry Christmas而不是Happy Christmas?</h2>
    <img src="images/merry.jpeg" height="200"/>
    <p>据说Merry Christmas 最早出现在1565年，来自一名海军元帅写在信里的祝福。但是Merry Christmas在英语圈流行，是由于英国大文豪狄更斯的大力推广。1843年，狄更斯的中篇小说《圣诞颂歌》发行后，变立刻成为了畅销书，书中就有Merry Christmas 一词，当时的商人顺势推出印有Merry Christmas 的圣诞卡，引发抢购潮。因此，Merry Christmas 的说法便随着圣诞卡传遍全世界。</p> 
    <p>有趣的是，英国女王伊丽莎白从来不说Merry Christmas，只说Happy Christmas,因为Merry 直译为天性活泼，有些微醉的意思，在维多利亚时期，这个词主要混迹在社会底层，意思是以酗酒为乐。Merry Christmas 如果按照字面意思理解的话，就是“圣诞喝到嗨”！对于高贵的女王来说，Happy Christmas更符合女王的身份。</p>
    
    <h2 id="dear">4.圣诞老人为什么驾着驯鹿而不是雪橇犬？</h2>
    <img src="images/dear.jpeg" height="200"/>
    <p>据说圣诞老人生活在北极，那里有一种特殊的鹿叫驯鹿。驯鹿适应雪地生活，他们有夸大的蹄子，可以避免陷入雪中，还能拨开雪堆找食物吃，他们的眼睛可以变色，避免雪地反射的强光刺伤眼睛。他们性格温顺，易于驯养，能够轻松穿越马匹难以穿越的雪地，沼泽和森林，因为，圣诞老人选择了驯鹿拉雪橇。</p>
    
    <h2 id="star">5．圣诞树顶上挂着的星星是什么星星？</h2>
    <img src="images/star.jpeg" height="200"/>
    <p>圣诞树顶上的那颗星星叫伯利恒之星，是耶稣出生时头顶上冒出来的超新星。</p>

    <p>想了解更多，可以<a href="https://vd3.bdstatic.com/mda-jmphrb5pkhyzdb3w/mda-jmphrb5pkhyzdb3w.mp4?playlist=%5B%22hd%22%5D" target="_blank">点击此处</a></p>
    
</body>
</html>

网页效果：

26-单元测试

1
2
3
4
5
6
1、(单选题)
表示路径的方法有哪两种【 B 】
A、相对路径、文件路径
B、相对路径、绝对路径
C、相对路径、目录路径
D、相对路径、硬盘路径

3-3 HTML表格和列表

27-HTML标签(下)导读

目标：

1
2
3
4
5
6
能够书写表格
能够写出无序列表
能够写出3-4个常用input表单类型
能够写出下拉列表表单
能够使用表单元素实现注册页面
能够独立查阅W3C文档

目录：

1
2
3
4
5
表格标签
列表标签
表单标签
综合案例
查阅文档

28-表格标签基本使用

表格是实际开发中非常常用的标签：
1.格的主作用
2.表格的基本语法

表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结：表格不是用来布局页面的，而是用来展示数据的。

表格的基本用法

1
2
3
4
5
6
7
8
<table>
    <tr>
        <td>单元格信息1</td>
        <td>单元格信息2</td>
        ···
    </tr>
    ···
</table>

1.<table> </table>是用于定义表格的标签。
2.<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指表格数据（table data），即数据单元格的内容。

1
2
3
4
5
6
7
8
<body>
    <table>
        <tr>  <td>姓名</td>     <td>性别</td>    <td>年龄</td>        </tr>
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>  
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>        
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>                 
    </table>
</body>

29-表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加湘居中显示
<th>标签表示HTML表格的表头部分（table head的缩写）

1
2
3
4
5
6
7
<table>
	<tr>
		<th>姓名</th>
		...
		</tr>
		...
</table>

1
2
3
4
5
6
7
8
<body>
    <table>
        <tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr>
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>  
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>        
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>                 
    </table>
</body>

Pink老师总结：表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示。

30-表格相关属性

表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。

目的有2个：
1记住这些英语单词，后面CSS会使用.
2.直观感受表格的外观形态

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
borden 1 或 “” 规定表格单元是否拥有边框，默认为” “，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

这些属性要写到表格标签table里面去

1
2
3
4
5
6
7
8
9
10
11
12
13
<table align="center" borden="1" cellpadding="0" cellspacing="0" width="500" heigth="300">
    <!--表格居中，边框宽度为1，文字与边框距离为0，边框与边框距离为0，表格宽500，高300-->
    <tr>
        <th>表头单元格信息1</th>
        <th>表头单元格信息2</th>
    </tr>
    <tr>
        <td>单元格信息1</td>
        <td>单元格信息2</td>
        ···
    </tr>
    ···
</table>

31-小说排行榜案例

案例分析

1
2
3
4
5
6
7
8
先书制作表格的结构:
1.第一行里面是th表头单元格
2.第二行开始里面是td普通单元格
3.单元格里面可以放任何元素文字链接图片等都可以

后书写表格属性:
1.用到宽度高度边框cellpadding即cellspacing
2.表格浏览器中对齐align
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍排名</title>
</head>
<body>
    <table align="center" border="1" cellpadding="4" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>      
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg" width="10"></td>
            <td>345</td>
            <td>236988</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>西游记</td>
            <td><img src="images/up.jpg" width="10"></td>
            <td>235</td>
            <td>123555</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="images/down.jpg" width="10"></td>
            <td>124</td>
            <td>23455</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
    </table>
    
</body>
</html>

表格（table）–行（tr）–单元格（td）

32-表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：<thead>标签 表格的头部区域，<tbody>标签 表格的主体区域。这样可以更好的分清表格结构。

<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般位于第一行。
<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
以上标签都是放在<table></table>标签中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
    <thead>
    <tr>
        <th>表头单元格信息1</th>
        <th>表头单元格信息2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>单元格信息1</td>
        <td>单元格信息2</td>
        ···
    </tr>
    <tbody>    
    ···
</table>

33-合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，这里同学们会最简单的合并单元格即可.

1.合并单元格方式
2.目标单元格
3.合并单元格的步骤

合并单元格方式：
跨行合并：rowspan=”合并单元格的个数”
跨列合并：colspan=”合并单元格的个数”

目标单元格：（写合并代码）

  • 跨行：最上侧单元格为目标单元格，写合并代码
  • 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：
1.先确定是跨行还串跨列合并。
2.找到目标单元格写上合并方式=合并的单元格数量。比如：<td colspan= "2" ></td>
3.删除多余的单元格。

1
2
<td rowspan="2"> </td>
<td colspan="2"> </td>

34-表格总结

表格学习整体可以分为三大部分：
1.表格的相关标签
2.表格的相关属性
3.合并单元格

1.表格的相关标签
我们学习了 table 标签 tr行 标签 td单元格 标签 thead表格头部区域标签

2.表格相关属性

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
borden 1 或 “” 规定表格单元是否拥有边框，默认为” “，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

3.合并单元格

35-无序列表

表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序列表（重点）

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。
无序列表的基本语法格式如下：

1
2
3
4
5
6
7
8
9
<ul>
	<li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>
    	<p> </p>
    </li>
    ···
</ul>

1，无序列表的各个列表项之间没有顺序级别之分，是并列的。
2，<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

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

4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

36-有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

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

1
2
3
4
5
6
7
8
9
<ol>
	<li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>
    	<p> </p>
    </li>
    ···
</ol>

1.<ol></ol>中只能嵌套<li></li>，直接在<ol> </ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

37-自定义列表

自定义列表的使用场景
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和
<dd>（描述每一个项目/名字）一起使用。
其基本语法如下：

1
2
3
4
5
6
<dl>
	<dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    ···
</dl>
1
2
3
4
5
6
7
8
9
10
<dl>
	<dt>关注我们</dt>
	<dd>新浪微博</dd>
	<dd>官方微信</dd>
	<dd>联系我们</dd>
	<dt>关注我们</dt>
	<dd>新浪微博</dd>
	<dd>官方微信</dd>
	<dd>联系我们</dd>
</dl>

1.<dl></dl>里面只能包含<dt>和<dd>.
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>.

38-列表总结

标签名 定义 说明
<ul></ul> 无序标签 里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签
<ol></ol> 有序标签 里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签
<dl></dl> 自定义列表 里面只能包含dt和dd，dt和dd里面可以放任何标签

注意：
1.学会什么时候用无序列表，什么时候用自定义列表。

2.无序列表和自定义列表代码怎么写？

3.列表布局在学习完CSS后再来完成。

39-单元测试

1
2
3
4
5
6
1、(单选题)
设置表格的高度为600的HTML代码是【 C 】
A、<table height="500" width="600">
B、<table vspace="600" hspace="500">
C、<table height="600" width="500">
D、<table vspacet="500" hspace="600">

3-4 HTML表单

40-表单使用场景以及分类

现实中的表单，我们去银行办理信用卡填写的单子。

网页中的表单展示

网页中的表单展示
1.为什么需要表单

1
2
使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

2.表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

41-表单域

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

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

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

1
2
3
<form action="url地址" method="提交方式" name="表单域名称">
	各种表单控件元素
</form>

常用属性：

属性 属性值 作用
action url 地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单名称，以区分同一个页面下的多个表单域

基础班来说，我们暂时不用表单域提交数据，只需要写上form标签即可，就业班等学习服务器编程阶段会重新讲解。

这里只需要记住两点：

1
2
1.在我们写表单元素之前，应该有个表单域把他们进行包含。
2.表单域是form标签。

42-input标签

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

1
2
3
1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、接钮等）。

1
<input type="属性值"/>
  • <input/>标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
属性值 描述
text 定义单行输入字段，默认宽度为 20 个字符
password 定义密码字段，该字段字符被掩码
radio 定义单选按钮
checkbox 定义复选框
button 定义可点击按钮（一般通过 Javascript 启动脚本）
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
file 定义输入字段和“浏览”按钮，供文件上传
reset 定义重置按钮，清楚表单中所有数据
submit 定义提交按钮，把表单数据发送到服务器

1.input之type属性文本框和密码框

1
2
3
4
5
6
7
8
<form>
        用户名：<input type="text"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        性别：男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
</form>

除type属性外，<input>标签还有其他很多属性，其常用属性如下：

属性 属性值 描述
name 用户自定义 定义 input 元素的名称
value 用户自定义 定义 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符最大长度 
1
2
3
4
5
6
7
8
9
<form>
    	用户名：<input type="text" name="username" value="请输入用户名" maxlength="6">	<br>
        密码：<input type="password" name="password"> <br> 
        <!-- radio是单选框，可以多选一 -->
        <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
        性别：男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox" name="habby" value="吃饭">  睡觉<input type="checkbox" name="habby" value="睡觉">   打游戏<input type="checkbox" name="habby" value="打游戏" checked="checked"> 
</form>
  • name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
  • name 表单元素的名字，要求单个按钮和复选框 name 值相同
  • checked 属性主要针对单按钮和复选框，主要作用于打开页面默认选中某个表单元素
  • maxlength 定义表单元素输入的最大字符数

2.input表单元素四个属性使用场景课堂问答

1.有些表单元素想刚打开页面就默认显示几个文字怎么做？
答：可以给这些表单元素设置value属性=”值”

1
用户名：<input type="text" value="请输入用户名"/>

2.页面中的表单元素很多，如何区别不同的表单元素？

答：name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是用于区别不同的表单。

1
用户名：<input type="text" value="请输入用户名" name="username" />

name属性后面的值，是自定义的
radio（或者checkbox）如果是一组，我们必须给他们命名相同的名字

1
2
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

3.如果页面一打开就让某个单选按钮或者复选框是选中状态？

答：checked属性：表示默认选中状态。用于单选按钮和复选按钮。

1
2
3
性别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

4.如何让input表单元素展示不同的形态？比如单选按钮或者文本框

答：type属性：type属性可以让input表单元素设置不同的形态。

1
2
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="text" value="请输入用户名">

3.input之type属性提交和重置按钮

1
2
3
4
5
6
7
<!--点击了提交按钮，可以把表单域form里面的表单元素里面的值提交给后台服务器-->
<input type="submit">
<input type="submit" value="免费注册">

<!--重留接钮可以还原表单元素初始的默认状态-->
<input type="reset">
<input type="reset" value="重新写">

4.input之type属性普通按钮和文件域

1
2
3
4
5
<!--普通接钮button 后期结合js搭配使用-->
<input type="button"value="获取短信验证码"> <br>

<!--文件域使用场景上传文件使用的-->
上传头像：<input type="file">

43-label标签

<label>标签为input元素定义标注（标签）。

<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点（光标转到或者选择对应的表单元素上用来增加用户体验。

语法：

1
2
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心：<label>标签的for属性应当与相关元素的id属性相同。

1
2
<label for="text"> 用户名:</label> <input type="text" id="text">
<input type="radio" id="nan"> <label for="nan">男</label>

44-select下拉表单

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

语法：

1
2
3
4
5
6
<select>
    <option selected>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ···
</select>

举例：

1
2
3
4
5
6
7
8
9
<form>
籍贯：
<select>
	<option>山东</option>
	<option>北京</option>
	<option>天津</option>
	<option selected="selected">火星</option>
</select>
</form>

1.<select>中至少包含一对<option>。
2.在<option>中定义selected =”selected” 时，当前项即为默认选中项。

45-textarea文本域标签

使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

1
2
3
<form>
	<textarea rows="20" cols="5">文本内容</textarea>
</form>

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=”每行中的字符数”，rows=”显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。

46-表单元素几点总结

表单元素几个总结点
1.表单元素我们学习了三大组input输入表单元素,select下拉表单元素textarea文本域表单元素。
2.这三组表单元素都应该包含在form表单域里面并且有name属性。

1
2
3
4
5
6
7
<form>
	<input type="text" name="username">
	<select name="jiguan">
	<option>北京</option>
	</select>
	<textarea name-"message"></textarea>
</form>

3.有三个名字非常相似的标签
（1）表单域 form 使用场景：提交区域内表单元素给后台服务器
（2）文件域 file 是input type属性值使用场景：上传文件
（3）文本城 textarea 使用场景：可以输入多行文字，比如留言板网站介绍等…

47-综合案例-注册页面

综合案例主要练习今日所学标签：
1.表格标签，可以让内容排列整齐。
2.列表标签
3.表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-注册页面</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width="600" >
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>  
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
                <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                </select>
        
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京思密达"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                    <input type="radio" name="marry" checked="checked">未婚  <input type="radio" name="marry">  已婚  <input type="radio" name="marry"> 离婚
            </td>
        </tr>
         <!-- 第五行 -->
         <tr>
             <td>学历:</td>
             <td><input type="text" value="博士后"></td>
         </tr>
          <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love" > 妩媚的 
                <input type="checkbox" name="love" > 可爱的 
                <input type="checkbox" name="love" > 小鲜肉 
                <input type="checkbox" name="love" > 老腊肉 
                <input type="checkbox" name="love"  checked="checked"> 都喜欢 
            </td>
        </tr>
         <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册" >
            </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <input type="checkbox"  checked="checked">    我同意注册条款和会员加入标准
                </td>
        </tr>
        <tr>
                <td></td>
                <td>
                    <a href="#" > 我是会员，立即登录</a>
                </td>
        </tr>
        
        <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
        </tr>
           
    </table>
</body>
</html>

48-学会查阅文档

经常查阅文档是一个非常好的学习习惯。

1
2
3
4
推荐的网址：
百度：http://www.baidu.com
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/

49-资料

01-HTML简介.pdf
02-HTML标签（上）.pdf
前言-基础班学习路线.pdf
综合案例文字部分.txt
day01前端基础第一天.ppt
html第一天.xmind
作业.zip
案例.zip

02-HTML.标签（下）.pdf
作业.zip
W3CSchool.chm
W3CSchool.chw
day02前端基础第二天.ppt
html第二天.xmind
作业.zip
案例.zip

4-3课后练习.zip
4-4课后练习.zip

相关文章推荐
赞赏一下吧～