目录
3.2 input 标签的 type 属性新增的值(新增的表单控件类型)
6.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签
Day01
一、计算机基础
1.1 计算机
计算机(computer)俗称电脑,是现代一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能。是能够按照程序运行,自动、高速处理海量数据的现代化智能电子设备。
现在的计算机被称之冯·诺依曼式计算机,由运算器、控制器、存储器、输入设备、输出设备五大部分组成。
冯·诺依曼(John von Neumann,1903年12月28日-1957年2月8日),美籍匈牙利数学家、计算机科学家、物理学家,被后人称为“现代计算机之父”、“博弈论之父”。
艾伦·图灵(Alan Mathison Turing,1912年6月23日—1954年6月7日),英国数学家、逻辑学家,被后人称为“计算机科学之父”,“人工智能之父”。
1.2 软件和硬件
计算机系统由软件和硬件组成。
硬件: 硬件是看得见、摸得着的物理部件或设备。
软件:软件是以程序和文档的形式存在,通过在计算机上运行来体现他的作用。
1.3 软件
计算机软件总体分为系统软件和应用软件两大类。
系统软件:包括各类操作系统,如windows、Linux、UNIX等,还包括操作系统的补丁程序及硬件驱动程序。
应用软件:为了某种特定的用途而被开发的软件。
1.4 应用软件
应用软件也可以称为应用程序,有很多种分类方式。
根据所实现的功能,可以分为文字处理软件、数据管理软件、图像处理软件等。
根据应用程序所运行的载体不同,可以分为服务端程序和客户端程序。
根据设计结构不同,可以分为 C/S结构程序和 B/S结构程序 。
1.5 服务端和客户端
服务端程序: 也可以称之为后端程序,指的是运行在服务器上的程序。
客户端程序: 指的是运行在客户端计算机上的程序,可以分为 WEB应用、PC桌面应用、Mac桌面应用、Linux桌面应用、IOS应用、安卓应用、小程序等。
1.6 C/S 结构和 B/S 结构
C/S结构: Client/Server(客户机/服务器)结构,客户端程序直接运行在操作系统上,需要安装。
B/S结构: Browser/Server(浏览器/服务器)结构,客户端程序运行在浏览器上,无需安装。
二、 代码编辑器和浏览器介绍
2.1 代码编辑器
代码编辑器是程序员用于编写计算机程序的文本编辑器。它通常是一个独立的应用程序,或是作为集成开发环境的一部分存在,或者是一个运行于浏览器中的网页编辑器。由于程序员的主要任务就是编写代码,因此代码编辑器也就成为了最为重要的开发工具。
VSCode (推荐) WebStorm HbuilderX Sublime Text Atom Brackets NodePad++ EditPlus Vim Dreamweaver
2.2 浏览器
主流浏览器:Chrome、FireFox、Safari、IE、Opera
其他浏览器: 360安全浏览器、360极速浏览器、搜狗浏览器、UC浏览器、猎豹浏览器、夸克浏览器、海豚浏览器、傲游浏览器、QQ浏览器、2345浏览器 等
三、HTML概述
3.1 什么是HTML?
- HTML是用来制作网页的标记语言
- HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
- HTML语言是一种标记语言,不需要编译,直接由浏览器执行
- HTML文件是一个文本文件,包含了一些HTML元素,标签等
- HTML文件必须使用.html或.htm为文件名后缀
- HTML是大小写不敏感的,HTML与html是一样的
- HTML是由W3C的维护的
- HTML 是通向 WEB 技术世界的钥匙。
- TML负责 WEB 页面的结构
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
3.2 HTML 发展历史
- HTML是从2.0版本开始的,实际上没有1.0的官方规范,在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日,W3C推荐标准
- HTML 4.0——1997年12月18日,W3C推荐标准
- HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
- HTML 5——2014年10月28日,W3C推荐标准
3.3 相关国际组织
IETF(The Internet Engineering Task Force)
国际互联网工程任务组(The Internet Engineering Task Force,简称 IETF)
互联网工程任务组,成立于1985年底,是全球互联网最具权威的技术标准化组织,主要任务是负责互联网相关技术规范的研发和制定,当前绝大多数国际互联网技术标准出自IETF。
W3C(World Wide Web Consortium)
万维网联盟(World Wide Web Consortium)
万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止,W3C已发布了200多项影响深远的Web技术标准及实施指南,如广为业界采用的超文本标记语言(标准通用标记语言下的一个应用)、可扩展标记语言(标准通用标记语言下的一个子集)以及帮助残障人士有效获得Web内容的信息无障碍指南(WCAG)等,有效促进了Web技术的互相兼容,对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
WHATWG(Web Hypertext Application Technology Working Group)
网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。
在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。
四、 Markdown 的用法
4.1 Markdown介绍
Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
Markdown是程序员写作必备神器。
为什么推崇 Markdown 写作? 而非 Word 类文档呢?
- Markdown 是一段纯文本,使用任何文本编辑器都可以打开,而要打开 Word 文档,必须要先安装 Office 软件。
- Markdown 可以很轻松的对文档进行排版,而使用 Word,排版要花费大量的精力。
- Markdown 可以很轻松的转为 Html、Word、PDF 文件以及电子书。
- 现有的大多数媒体平台都已支持 Markdown。
4.2 markdown 格式
# 一级标题 标题 ### 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 前端要学什么? 列表 * HTML 超文本标记语言 * CSS 级联样式表 * JavaScript 浏览器脚本语言 今天我们学习了**前端开发**我很开心 强调 *** 分隔线 ``` 这是代码块 代码块 ```
4.3 typora - markdown 编辑工具
可去下载typora安装至本地即可使用markdown编辑工具
五、 HTML 基本语法
5.1 HTML 文件
- 将扩展名为 .html 的文件称为 html 文件或者网页文件
- 网页文件使用代码编辑工具进行编辑,使用浏览器进行查看效果
5.2 HTML 标签
- 网页就是由 HTML 标签组成,HTML 标签可以嵌套,形成了结构
- HTML 标签具有语义,语义决定什么地方使用什么标签
- HTML 标签分为双标签和单标签 双标签由起始标签和结束标签组成 <title></title> 单标签也称为自闭和标签 <hr /> 可以省略 / 写为 <hr>
- HTML 标签不区分大小写,推荐使用小写
5.3 HTML 标签属性
- 属性是属于标签的,不同的标签具有不同的属性
- 属性由属性名和属性值组成,属性值使用单引号或双引号包裹,或者不包裹
- 一个标签可以设置多个不同的属性,多个属性直接使用空格分隔 一个标签如果设置多个相同的属性,后面的不生效
- 属性不区分大小写
-
语法格式如下:
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值"> <!– 输出内容… --> </标签名>
5.4 如何掌握一个 HTML 标签
要掌握一个 HTML 标签,我们需要记住以下几点:
- 标签的语义、功能。
- 该标签有哪些属性,属性的值是怎样的。
- 该标签是单标签还是双标签。
5.5 HTML代码格式
任何回车或空格在源代码中都是起作用的, 所以在编写HTML代码时,都可以使用回车或者空格进行代码排版, 这样可以使代码清晰,也便于团队合作。
必须保持严格的缩进规则,以Tab
键为准。
5.6 HTML 注释
<!-- 注释内容 -->
<!--
这里全是注释
都是注释
-->
注释的作用:
1. 对代码进行解释说明
2. 调试过程中,可以将不需要执行的代码暂时注释
5.7 文档声明
你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
作用:告诉浏览器使用标准模式渲染解析页面!
5.8 基本页面模板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>老年人的第一个网页</title>
</head>
<body>
</body>
</html>
六、 HTML 常用标签
6.1 主体结构标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
html | 根标签 | 双 | |
head | 页面头部 | 双 | |
body | 页面主体 | 双 |
6.2 HEAD 中的标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
meta | 设置页面元信息 | charset:设置字符串编码,推荐utf-8 | 单 |
title | 设置标题栏标题 | 双 |
6.3 格式排版标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
h1 ~ h6 | 一级标题 ~ 六级标题 | 双 | |
p | 段落 | 双 | |
hr | 分隔线 | 单 | |
br | 换行 | 单 | |
pre | 原格式显示 | 双 | |
div | 无语义 | 双 |
代码练习:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>格式排版标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- <h7>七级标题</h7> 不存在的标签-->
对比文字
<!-- 分隔线 -->
<hr>
<!-- 段落标签 -->
<p>新华社北京9月8日电 </p>
<p>新华社北京9月8日电,并在北师大建校120周年和第三十八个教师节来临之际,向该校师生员工、广大校友表示祝贺和问候,向全国广大教师致以节日的祝福。</p>
<hr>
<!-- 换行标签 br -->
静夜思 李白 <br>
床前明月光 <br>
疑是地上霜 <br>
举头望明月 <br>
低头思故乡
<hr>
<!-- 原格式显示标签 pre -->
<pre>
静夜思 李白
床前明月光
疑是地上霜
举头望明月
低头思故乡
</pre>
<hr>
<!-- HTML中最常用的标签 div 无语义-->
<div>时代路科技来看</div>
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
Day1练习:写一个自我介绍的网页
Day2
一、 文本标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
em | 表示强调,默认表现为斜体字 | 双标签 | |
strong | 表示强调,默认表现为粗体字 | 双标签 | |
del | 表示删除的内容,默认表现为加删除线 | 双标签 | |
ins | 表示增加的内容,默认表现为加下划线 | 双标签 | |
sub | 表示下标字 | 双标签 | |
sup | 表示上标字 | 双标签 | |
span | 无语义 | 双标签 |
以上为常用标签,以下文本标签仅作为了解 <cite> 用于引证、举例、(标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题)通常 为斜体字 <dfn> 定义一个定义项目 <code> 定义计算机代码文本 <samp> 定义样式文本 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来,对它们加以 强调的极少情况下,才使用这个标签。 <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 <abbr> 定义缩写 配合title属性 (IE6以上) <bdo> 来覆盖默认的文本方向 dir属性 值: lrt rtl <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 <small> 标签定义小型文本(和旁注) <b> 粗体字标签 根据 HTML 5 的规范,<b> 标签应该做为最后的选择,只有在没有其他标记比较合适时 才使用它。 <i> 斜体字标签 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。 <u> 下划线字体标签 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。 请 尽量避免使用该标签为文本加下划线,用户会把它混淆为一个超链接。 <q> 签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。(小段文字) <blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。(大段文字) (块 状元素) <address> 定义地址 通常为斜体 (注意非通讯地址) 块状元素 <font> H5已删除 字体标签,可以通过标签的属性指定文字的大小、颜色及字体等信息 <tt> H5已删除 打字机文字 <big> H5已删除 大型字体标签 <strike> H5已删除 添加删除线 <acronym> H5已删除 首字母缩写 请使用<abbr>代替
二、 图片
2.1 img 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
img | 图片 | src:设置图片文件地址。 alt:设置图片代替文字。 width:设置图片宽度。 height:设置图片高度 | 单标签 |
总结:
1. 在图片无法正常显示的会显示 alt 标签所设置的代替文字
2. 单独设置图片的宽高,另一个会根据比例自动计算; 同时设置宽和高需要计算好比例,否则图片会拉伸
2.2 常见的图片格式
jpg / jpeg png gif bmp ....
三、 相对路径和绝对路径
当前文件: 当前所书写代码的文件。
目标文件: 当前文件中要引用的文件。
3.1 绝对路径
网络绝对路径: 在互联网上的绝对地址,也称为 URL (统一资源定位符),前端开发中的绝对径路主要指网络绝对路径。如 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
本地绝对路径: 在某台电脑上的绝对地址,如 D:\Library\SH220907\Day02_HTML\课堂案例\02-图片标签\安妮私房照.jpg
,前端开发中并不建议使用。
3.2 相对路径
./ 开头的路径: 目标文件在当前文件的同级或者下级以及更下级; ./的意思是当前文件所在的目录,可以省略。 ../ 开头的路径: 目标文件在当前文件的上级或者必须通过上级才能找到; ../的意思是当前文件的上一级目录。
3.3 HTML 中使用路径的场景
1. img 标签引入图片 2. video 标签引入视频 3. audio 标签引入音频 4. iframe 标签引入多种资料 5. script 标签引入 js 文件 6. a 标签设置超链接 7. link 标签关联 css 文件 ...
四、 超链接和锚点
4.1 a 标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
a | 超链接 | href:设置目标文件的地址。 target:设置目标文件在哪个窗口打开。 | 双标签 |
总结:
1. 如果 a 标签没有 href 属性,不能被称为超链接 2. target 属性的默认值是 _self,表示目标文件在本窗口打开,如果值设置为 _blank,表示目标文件在新窗口打开
4.2 超链接
① 目标文件是网页
<a href="http://www.baidu.com/index.html">百度</a><br> <a href="../02-图片标签/01-图片标签.html" target="_blank">图片标签实例页面</a>
点击超链接直接打开目标文件
② 目标文件是网页以外的其他类型文件
<a href="resouces/小乐老师的业余生活.jpg" target="_blank">[图片]小乐老师的业余生活</a><br> <a href="resouces/小乐老师的性福生活.mp4" target="_blank">[视频]小乐老师的性福生活</a><br> <a href="resouces/小乐老师的私房照片.7z" target="_blank">[压缩文件]小乐老师的私房照片</a><br> <a href="resouces/如何拥有百亿资产.docx">[word文档]如何拥有百亿资产</a><br> <a href="resouces/如何30岁之前走上人生巅峰.pdf" target="_blank">[pdf文档]如何30岁之前走上人生巅峰</a>
1. 如果目标文件是浏览器可以打开的文件类型,点击超链接直接打开 2. 如果目标文件是浏览器无法打开的文件类型,点击超链接直接下载
③ 超链接的其他特殊功能(打开应用)
<a href="mailto:fuming@atguigu.com">发邮件</a> <br> <a href="tel:18618176338">打电话</a> <br> <a href="sms:18618176338">发短信</a> <br> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=840937370&site=qq&menu=yes">打开QQ</a>
④ href 的值是空的 点击刷新
<a href="">刷新</a>
4.3 锚点
① 如何设置锚点
给标签设置 id 属性,该标签就可以作为锚点,id 属性的值就是锚点名
② 如何跳转到锚点(通过超链接跳转到锚点)
<!-- 跳转到本页面的锚点 --> <a href="#锚点名"> </a> <!-- 跳转到指定页面的锚点 --> <a href="页面的地址#锚点名"> </a> <!-- 返回页面顶部 --> <a href="#"> </a>
Day2练习: 写一个使用多个相对路径的网页
Day3
一、 列表
1.1 无序列表
<ul>
<li>超文本标记语言</li>
<li>层叠样式表</li>
<li>JavaScript</li>
<li>Vue</li>
<li>React</li>
<li>小程序</li>
</ul>
<ul>
<li>
<a href="#">实施创新驱动发展战略</a>
</li>
<li>
<a href="#">中国跨度!“我们这十年”主题宣传片发布</a>
</li>
</ul>
无序列表可以用网页中的文章列表、新闻列表、导航条等等...
2.2 有序列表
<ol>
<li>小乐</li>
<li>马云</li>
<li>马斯克</li>
<li>马化腾</li>
</ol>
有序列表适合表示一组有顺序的列表,如各类排行榜等...
2.3 定义列表(了解)
<!-- 一个 dt 对应一个 dd -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>一种浏览器脚本语言</dd>
</dl>
<!-- 一个 dt 对应多个 dd -->
<dl>
<dt>如何掌握一个 HTML 标签?</dt>
<dd>该标签的语义和功能</dd>
<dd>该标签的属性以及属性值如何设置</dd>
<dd>该标签是双标签还是单标签</dd>
</dl>
2.4 列表标签总结
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
li | 列表项 | 双 | |
ul | 无序列表 | 双 | |
ol | 有序列表 | 双 | |
dl | 定义列表 | 双 | |
dt | 定义列表标题 | 双 | |
dd | 定义列表描述 | 双 |
建议:
1. ul、ol 中只直接包裹 li 标签; li 标签也只被 ul 标签或 ol 标签包裹。 2. li 标签就可以包裹任何标签(li 不要直接再包裹 li)
二、 表格标签
2.1 表格的结构
<table border="1">
<!-- 表格的标题 -->
<caption>用户信息表</caption>
<!-- 表格头 -->
<thead>
<!-- 行 -->
<tr>
<!-- 表头单元格 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>地址</th>
</tr>
</thead>
<!-- 表格体 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td>1</td>
<td>曹操</td>
<td>男</td>
<td>18754321349</td>
<td>纽约</td>
</tr>
<tr>
<td>2</td>
<td>刘备</td>
<td>男</td>
<td>18754321348</td>
<td>伦敦</td>
</tr>
<tr>
<td>3</td>
<td>孙权</td>
<td>男</td>
<td>18754321347</td>
<td>莫斯科</td>
</tr>
<tr>
<td>4</td>
<td>高小乐</td>
<td>男</td>
<td>18754321346</td>
<td>新德里</td>
</tr>
</tbody>
<!-- 表格脚 -->
<tfoot></tfoot>
</table>
table cpation thead tr th/td tbody tr td/th tfoot tr td/th
如果省略 thead、tbody、tfoot,table 直接包裹 tr,浏览器会自动添加一个 tbody 包裹所有的 tr
2.2 表格整体样式设置
给 table 标签设置如下属性:
width: 设置表格总宽度 height: 设置表格总高度 border: 设置边框的宽度 cellspacing: 设置单元格之间的距离 cellpadding: 设置单元格边框与里面的文本内容的距离
2.3 单元格样式设置
① 设置单元格中内容对齐方式
1. thead、tbody、tfoot、tr、th、td 这些标签可以设置 align 属性,属性的值: left、right、center,该属性可以设置单元格中内容的水平对齐方式 2. thead、tbody、tfoot、tr、th、td 这些标签可以设置 valign 属性,属性的值: top、bottom、middle,该属性可以设置单元格中内容的垂直对齐方式
② 设置单元格宽高
1. 给 td/th 设置 width 属性,可以设置所在列的列宽 2. 给 td/th 设置 height 属性, 可以设置所在行的行高; tr 也具有 height 属性可以设置行高。
2.4 单元格跨行和跨列(重要)
1. 给 td/th 设置 rowspan 属性,可以设置跨越的行数,默认值是 1,可以设置为其他数字。 2. 给 td/th 设置 colspan 属性,可以设置跨越的列数,默认值是 1,可以设置为其他数字。
2.5 表格标签总结
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
table | 表格 | width height border cellspacing cellpadding | 双标签 |
caption | 表格标题 | 双标签 | |
thead | 表格头 | align valign | 双标签 |
tbody | 表格体 | align valign | 双标签 |
tfoot | 表格脚 | align valign | 双标签 |
tr | 行 | align valign height | 双标签 |
td | 单元格 | align valign width height rowspan colspan | 双标签 |
th | 表头单元格 | align valign width height rowspan colspan | 双标签 |
三、 表单
3.1 表单总体设置
<form action="https://www.baidu.com/s" target="_blank">
<input type="text" name="wd">
<button>提交</button>
</form>
3.2 表单控件
① 文本输入框
<input type="text"> <br>
<input type="text" maxlength="6"> <!-- maxlenth 可以设置最大可输入长度 -->
<input type="text" value="高小乐...">
<input> <!-- type 的默认值是 text -->
<input type="sb"> <!-- 给 type 设置了不存在的值,相当于 text -->
② 密码输入框
<input type="password">
<input type="password" maxlength="10" value="hello"> <!-- maxlenth 可以设置最大可输入长度 -->
③ 单选框
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="else" checked>其他
1. value 的值才是真正提交到后端的数据 2. 如果想实现单选效果,必须给多个单选框 input 设置相同的 name 属性值 3. 设置 checked 属性可以默认选中,该属性不需要值
④ 复选框
<input type="checkbox" name="hobby" value="1" checked> 吃饭
<input type="checkbox" name="hobby" value="2"> 睡觉
<input type="checkbox" name="hobby" value="3"> 发呆
<input type="checkbox" name="hobby" value="4" checked> 敲代码
1. value 的值才是真正提交到后端的数据 2. 设置 checked 属性可以默认选中,该属性不需要值
⑤ 提交按钮
<!-- input 标签实现 value 属性可以设置按钮上的文字-->
<input type="submit">
<input type="submit" value="登录">
<!-- button 标签实现 , button 标签 type 属性的默认值是 submit -->
<button type="submit">免费注册</button>
<button>搜索</button>
⑥ 重置按钮
<!-- input 标签实现 -->
<input type="reset" value="重置">
<!-- button 标签实现 -->
<button type="reset">重置</button>
⑦ 普通按钮
<!-- input 标签实现 -->
<input type="button" value="按钮">
<!-- button 标签实现 -->
<button type="button">按钮</button>
⑧ 文本域
<textarea rows="10" cols="60">我是文本域...</textarea>
属性 rows 可以设置默认显示的行数,实际影响高度 属性 cols 可以设置默认显示的列数(每行的字数),实际影响宽度
⑨ 下拉选项
<select>
<option value="1">新疆维吾尔自治区</option>
<option value="2">广西壮族自治区</option>
<option value="3" selected>内蒙古自治区</option>
<option value="4">香港特别行政区</option>
</select>
1. option 的 value 属性设置的是真正提交的数据;如果没有设置 value,会将双标签所包裹的内容提交 2. option 设置 selected 属性可以默认选中,该属性不需要设置值
3.3 表单控件的属性
① name 属性
1. 为该表单控件设置一个标识,提交到后端之后使用 2. 多个单选框如果要实现单选功能,需要设置相同的 name 值 3. 下拉选项需要将 name 设置到 select 标签
② value 属性
1. 文本输入框、密码输入框可以设置默认输入的内容 2. 单选框、复选框设置真正提交的数据 3. input 标签实现的按钮,可以设置按钮上的文字 4. option 可以设置真正提交的数据 5. select、textarea 没有 value 属性
③ disabled 属性
1. 表单控件设置该属性之后,变为不可用状态 2. 该属性不需要设置值 3. 下拉选项,select 设置 disabled 属性,整个下拉选项不可用; option 设置 disabled 属性,只有该选项不可选
3.4 label 标签的使用
<!-- label 标签的 for 属性值与表单控件的 id 属性值一致 -->
<!-- 适合于文本输入框、密码输入框、文本域、下拉选项-->
<label for="usernameInp">用户名:</label>
<input type="text" id="usernameInp"> <br>
<!-- label 标签将表单控件与文字一起包裹起来 -->
<!-- 适合于单选框和复选框 -->
性别:
<label>
<input type="radio" name="gender">男
</label>
<label>
<input type="radio" name="gender">女
</label>
<label>
<input type="radio" name="gender">其他
</label>
3.5 表单标签总结
标签名 | 语义和功能 | 属性 | 单标签和双标签 |
---|---|---|---|
form | 表单 | action:设置提交地址。 target:递交地址的打开窗口。 method:提交的请求方式。 | 双标签 |
input | 多种类型的表单控件 | type:设置表单控件类型。 value:表单控件的值。 disabled:设置表单控件不可用。 maxlength: 设置最大可输入长度。 checked:设置默认选中 | 单标签 |
button | 按钮 | type:设置按钮的类型 disabled:设置表单控件不可用。 | 双标签 |
textarea | 文本域 | rows:设置默认显示的行数。 cols:默认显示的列数。 disabled:设置表单控件不可用。 | 双标签 |
select | 下拉选项框 | disabled:设置表单控件不可用。 | 双标签 |
option | 下拉选项的选项 | value: 实际提交的值。 selected:默认选中 disabled:设置表单控件不可用。 | 双标签 |
label | 关联表单控件 | for:值与表单控件的id一致 | 双标签 |
1. input 标签的 type 属性的值有 text、password、radio、checkbox、submit、reset、button,默认值是 text 2. button 标签的 type 属性的值有 submit、reset、button,默认值是 submit
Day3练习:完成以下表单的网页制作
Day4
一、 框架标签
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
iframe | 内联框架 | src:目标文件地址。 frameborder:是否有边框,值0或者1。 width:宽度。 height:高度 | 双标签 |
1. 使用 iframe 可以在当前页面中嵌入其他类型的文件,包括网页、图片、视频等 2. 使用 iframe 加广告 3. iframe 可以作为超链接和form的target值
二、 HTML 字符实体
空格 < < > > & & ¥ ¥ © © x × ÷ ÷
三、 HTML 全局属性
title 设置提示文字 name 设置名字 id 设置唯一标识,标签的id属性值必须是唯一的 class 设置类名 style 设置样式 lang 设置语言
四、 meta 元信息
<!-- 网页字符集编码 --> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!-- 网页关键字 --> <meta name="keywords" content="8-12个以英文逗号隔开的单词/词语"> <!-- 网页描述信息 --> <meta name="description" content="80字以内的一段话,与网站内容相关"> <!-- 页面刷新 --> <!-- <meta http-equiv="refresh" content="3"> --> <meta http-equiv="refresh" content="3;url=http://www.atguigu.com"> <!-- 告诉IE使用最新的引擎渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 设置完美视口,给移动端的浏览器设置的 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
五、附录 vscode 使用技巧
1. 相关设置 ① 目录结构的缩进距离: Tree:Indent ② 空目录收缩显示: Compact Folders ③ 文件图标主题 2. 相关扩展推荐 Live Server web服务器方式打开网页 Open in Browser 本地方式打开网页(与双击打开是一致的) chinese lorem 中文乱数假文扩展 3. 英文假文:lorem; lorem300(300个单词) 中文假文:jw; jw800(800个字) 4. vscode 内置 emmet 插件
Day5
一、HTML5 概述
HTML5 是下一代 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。
1.1 HTML5 的由来
- HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。
- HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
- 2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。”
- 2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。
- 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
1.2 HTML5 优势
- 提高可用性和改进用户的友好体验;
- 有几个新的标签,这将有助于开发人员定义重要的内容;
- 可以给站点带来更多的多媒体元素(视频和音频);
- 可以很好的替代FLASH和Silverlight;
- 当涉及到网站的抓取和索引的时候,对于SEO很友好;
- 将被大量应用于移动应用程序和游戏;
- 可移植性好。
1.3 两套标准
W3C 更新到了 HTML5.2 : HTML Standard
WHATWG 称之为 HTML 现行标准 (HTML Standard) HTML Standard
2019年5月28日,W3C 与 WHATWG 就共同开发 HTML 与 DOM 规范达成协议
1.4 兼容性
- chrome、Safari、opera、Firefox以及各种以wekkit(chromium)为内核的国产浏览器。
- Internet Explorer 9 以及 以上版本
二、 HTML5 新增标签
2.1 新增页面结构标签(最重要)
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
header | 页头 | 双标签 | |
footer | 页脚 | 双标签 | |
nav | 导航 | 双标签 | |
section | 页面中的一部分或文章中一段 | 双标签 | |
aside | 侧边栏 | 双标签 | |
article | 文章、新闻、博客 | 双标签 | |
main | 页面主要内容 | 双标签 |
1. aside 和 article 相当于特殊的 section 2. main 标签 whatwg 标准不支持,IE不支持,其他浏览器都可以使用 3. hgroup 表示标题(h1~h6)的包裹标签, w3c 不支持,了解,不常用
2.2 新增状态标签(了解)
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
meter | 静态度量 | max、min、value 等 | 双标签 |
progress | 动态进度 | max、value | 双标签 |
meter 和 progress 什么区别:
1. meter 表示静态的度量,如温度、湿度、磁盘容量、电池电量等 2. progress 表示动态的进度
2.3 新增注音标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
ruby | 包裹标签 | 双标签 | |
rt | 具体注音 | 双标签 |
<ruby>
饕餮
<rt>taotie</rt>
</ruby>
2.4 新增文本标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
mark | 标记 | 双标签 |
可用于搜索结果中关键字的标记!
三、 HTML5 表单新增功能
3.1 表单控件新增属性
旧标准存在的表单控件属性:
name value disabled
新标准增加的表单控件属性:
placeholder 设置文字提示(用于文本输入类) required 表示必填或必选(不需要设置值) autofocus 自动获取焦点(不需要设置值) autocomplete 设置浏览器是否记录输入历史 on:记录; off 表示不记录, 默认值是 on pattern 设置正则验证表单
3.2 input 标签的 type 属性新增的值(新增的表单控件类型)
旧标准 input 标签 type 属性的值:
text、password、radio、checkbox、submit、reset、button
① 输入框类(5个)
<!-- 邮箱 -->
<input type="email" placeholder="请输入邮箱">
<!-- 数字 -->
<input type="number" placeholder="请输入数字"> <br>
<input type="number" max="10000" min="-200" placeholder="请输入数字"> <br>
<input type="number" max="1" min="0" step="0.1" placeholder="请输入小数"> <br>
<!-- 网址 url -->
<input type="url" placeholder="请输入网址">
<!-- 电话 不会验证,移动端浏览器打开,点击会弹出数字按键-->
<input type="tel" placeholder="请输入电话号码">
<!-- 搜索框 -->
<input type="search" placeholder="搜索...">
② 范围选择框(1个)
<input type="range" class="range-input" min="0" max="10" step="0.01">
③ 颜色选择框(1个)
<input type="color">
④ 日期时间选择框类(5个)
<!-- 选择年月日 -->
<input type="date"> <br>
<!-- 选择年月 -->
<input type="month"> <br>
<!-- 选择哪一年的第几周 -->
<input type="week"> <br>
<!-- 选择时间 -->
<input type="time"><br>
<!-- 选择日期+时间 -->
<input type="datetime-local">
3.3 form 标签新增属性
novalidate 设置该属性可以阻止表单验证(不需要设置值)
四、 HTML5 音视频
4.1 音视频标签
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
video | 引入视频 | src:设置视频文件地址。 width:设置宽度。 height:设置高度。 controls:显示控制条,不需要值。 muted:默认静音,不需要值。 autoplay:自动播放,不需要值。 loop:循环播放,不需要值。 preload:预先加载,不需要值。 poster:设置封面图的地址 | 双标签 |
audio | 引入音频· | src:设置视频文件地址。 controls:显示控制条,不需要值。 muted:默认静音,不需要值。 autoplay:自动播放,不需要值。 loop:循环播放,不需要值。 preload:预先加载,不需要值。 | 双标签 |
source | 引入音频或视频 | src:音视频文件地址。 type:音视频文件类型 | 单标签 |
4.2 浏览器支持的音视频格式
① 视频格式
mp4(推荐) webm ogg② 音频格式
mp3(推荐) wav ogg
五、 HTML5 新增全局属性
旧标准中的全局属性:
name id class style title lang
HTML5 标准新增的全局属性
hidden 隐藏元素,不需要设置值
a 标签新增的属性:
download 点击下载,不需要设置值; 1. 不论文件浏览器是否能打开,点击都会下载 2. 只有与网页文件同服务器的目标文件,才能实现此功能
六、 HTML5 兼容性方案
6.1 设置元信息
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
6.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签
<!--[if lt ie 9]>
<script src="../js/html5shiv.js"></script>
<![endif]-->