目录
学前准备
1)百度上的关于操作系统上的使⽤统计
百度统计流量研究院
2)谷歌浏览器下载
谷歌浏览器下载
3)浏览器的使⽤技巧——WEB前端助⼿(FeHelper) 前端⼈员的神器
可参考网站上的安装说明进行安装(后缀crx改为zip =》 直接拖入更多工具/拓展程序中)
4)工具介绍
SublimeText(高级记事本显示代码高亮,推荐)
Notepad++
aptana
EditPlus
VSCode(轻量级集成开发环境,推荐)
Hbuilder
WebStorm
一、HTML简介
1.1 HTML是什么
HTML 是 HyperText Mark-up Language 的⾸字⺟简写,意思是 超⽂本标记语⾔
HTML不是⼀种编程语⾔,⽽是⼀种 标记语⾔
超⽂本指的是超链接,标记指的是标签,是⼀种⽤来制作⽹⻚的语⾔,这种语⾔由⼀个个的标签组成
⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件,⽂件的扩展名为 .html 或者 .htm
html⽂档也叫 Web⻚⾯ ,其实就是⼀个⽹⻚,html⽂件⽤ 编辑器打开 显示的 是⽂本 ,可以⽤⽂本的⽅式 编辑它
如果⽤ 浏览器打开 ,浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ,显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚
1.2 HTML发展历史
1.3 HTML⽂档类型的设定
HTML在不同版本下⽂档类型的设定,即 <!Doctype > 对应的属性值
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下:
(2) XHTML ,其基本结构如下:
(3) HTML5 ,其基本格式如下
二、HTML基础语法
2.1 HTML基本结构
HTML⽂件的扩展名为 .html 或者 .htm
HTML⽂本的结构包括“头”部分(head)、和“主体”部分(body),其中“头”部提供关于⽹⻚的信息(包括标题,字符集等),“主体”部分提供⽹⻚的具体内容
HTML是由: 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体),其最外层是 <html>...</html>标签包裹
HTML标签(标记)的语法是由 < 和 > 括起来(比如head标签,body标签~)。
HTML标签有两种: 双标签 : <标签名>....</标签名> 和 单标签 : <标签名 />(双标签: <h1>....</h1>,单标签: <hr />)
HTML标签中还可以添加属性: <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>
HTML标签规范:标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错,会尽量解析,⼤不了不显示效果
2.2 注释
2.3 HTML注释
html⽂档代码中可以插⼊注释,注释是对代码的说明和解释
<!-- 这就是唯⼀的⼀种HTML注释了 -->
2.4 HTML中HEAD头部设置
head标签作⽤于⽹⻚的头部,它的内容不会在正⽂中显示出来,主要完成对当前⻚⾯的各种设置
在head中常包含如下⼦标签:
三、HTML文本标签
3.1 常用文本标签如下
<hn>...</hn> 其中n为1--6的值。 标题标签(加粗、独⽴⾏)
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗(搜索引擎会对此强调的内容进行收录,优先展示)
<cite></cite> 作品的标题(引⽤)
<sub>...</sub> 下标 <sup>...</sup> 上标
<del>...</del> 删除线
3.2 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1标题标签</h1>
<h2>H2标题标签</h2>
<h3>H3标题标签</h3>
<h4>H4标题标签</h4>
<h5>H5标题标签</h5>
<h6>H6标题标签</h6>
<u>u下划线标签</u><br/>
<del>del删除线标签</del><br/>
<b>b加粗标签</b><br/>
<strong>strong强调加粗标签</strong><br/>
<i>i斜体标签</i><br/>
<em>em强调斜体标签</em><br/>
<br/>
<cite>清明上河图</cite>是我国十大传世名画之一 <br/><br/>
水分子:H<sub>2</sub>O <br/>
2<sup>4</sup>=16
</body>
</html>
四、HTML格式化标签
4.1 常见格式化标签
<br/> 换⾏
<p>...</p> 换段
<hr /> ⽔平分割线
列表:
<ul>...</ul> ⽆序列表
<ol>...</ol> 有序列表 其中type类型值:A a I i 1 start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> ⾃定义列表
<dt>...</dt> ⾃定义列表头
<dd>...</dd> ⾃定义列表内容(会有自动缩进)
<div>...</div> 常⽤于组合块级元素,以便通过 CSS 来对这些元素进⾏格式化(两个标签之间自动换行)
<span>...</span> 常⽤于包含的⽂本,您可以使⽤ CSS 对它定义样式,或者使⽤ JavaScript 对它进⾏操作。(两个标签之间不换行,无法指定宽、高、尺寸)
4.2 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML格式化标签</h1>
<hr>
<div style="width: 600px">
<p>
据今日俄罗斯电视台(RT)援引当地媒体报道,以色列情报和特殊使命局(又称摩萨德)已获得中国新冠肺炎疫苗,并带回开始进行“研究”。
</p>
<p>
以色列媒体12频道(Channel 12)周一报道称,最近几周,摩萨德将中国疫苗带到了以色列。目前还不清楚该情报机构究竟是如何获得这种疫苗的。
</p>
</div>
我的爱好:
<ul>
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ul>
<ul type="circle">
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ul>
<ol>
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ol>
<ol type="a">
<li>看书</li>
<li>听歌</li>
<li>学习</li>
<li>运动</li>
</ol>
<dl>
<dt>问:HTML是什么</dt>
<dd>答:超文本标记语言</dd>
</dl>
<div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span>
</body>
</html>
4.3 小技巧
1)快速生成多个列表项
五、HTML图像标签
5.1 简介
在HTML⽹⻚中插⼊⼀张图⽚,使⽤img标签,他是⼀个单标签: <img />(也可以将图片作为背景,插入图片)
其中img标签中常⽤属性如下:
src: 图⽚名及url地址
alt: 图⽚加载失败时的提示信息
title:⽂字提示属性(鼠标放置上去的提示信息)
width:图⽚宽度(宽/高只指定一个的话,另一个会根据比例自适应变动)
height:图⽚⾼度
border:边框线粗细
5.2 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML图片img标签</h1>
<img src="./images/11.jpg" alt="图片1" width="600">
<img src="./images/12.jpg" alt="图片2" width="600">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下" width="200">
</body>
</html>
5.3 理解绝对路径与相对路径
绝对路径:
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径,(URL和物理路径)
例如:
C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。
相对路径:
相对与某个基准⽬录的路径。包含Web的相对路径(HTML中的相对⽬录)
例如:
在Web开发中,"/"代表Web应⽤的根⽬录。
"./" 代表当前⽬录,
"../"代表上级⽬录。这种类似的表示,也是属于相对路径。
5.4 小技巧
1)快速生成标签
六、HTML超链接标签
6.1 超级链接标签a
格式:
<a href="链接⽬标url地址">显示⽂字</a>
a标签属性
href: 必须,指的是链接跳转地址
target: 表示链接的打开⽅式:
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝(默认,点击回退可以回到上一个页面)
_top 顶级窗⼝
framename 窗⼝名
title:⽂字提示属性(鼠标放上去,可以看到详情)
锚点链接(可以通过id定位,在页面内跳转)
定义锚点: <a id="自己定义的名称"></a> 以前使⽤的是 <a name="自己定义的名称"></a>
使⽤锚点: <a href="#a1">跳到a1处</a>
6.2 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML实例-超级链接a标签</h1>
<!-- 锚点超级链接 -->
<a href="#girl1">美女1</a><br/><br/>
<a href="#girl2">美女2</a><br/><br/>
<!-- 普通超级链接 -->
<a href="https://ww.baidu.com" title="百度链接">百度(本窗口打开)</a><br/>
<a href="https://ww.baidu.com" target="_blank">百度(新窗口打开)</a> <br/><br/>
<a href="./Demo.html" target="_blank" >图片标签实例</a><br/><br/>
<a id="girl1"></a>
<h4>美女1</h4>
<img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/>
<a id="girl2"></a>
<h4>美女2</h4>
<img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/>
</body>
</html>
七、HTML表格标签
7.1 表格中的标签
th与td相比,th默认有 加粗居中 效果
7.2 举例
1)简单的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML实例-表格标签</h1>
<table>
<!-- 表头 -->
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<!-- 第一行数据 -->
<tr>
<td>1001</td>
<td>同学1</td>
<td>21</td>
<td>1班</td>
</tr>
<!-- 第二行数据 -->
<tr>
<td>1002</td>
<td>同学2</td>
<td>15</td>
<td>1班</td>
</tr>
<!-- 第三行数据 -->
<tr>
<td>1003</td>
<td>同学3</td>
<td>15</td>
<td>1班</td>
</tr>
</table>
</body>
</html>
7.3 小技巧
快速生成表格
八、HTML表单标签(重要)
8.1 form 表单标签
1)form标签常⽤属性:
- *action属性:提交的⽬标地址(URL)
- *method属性:提交⽅式:get(默认)和post
- get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
- post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
- enctype:提交类型
- target: 在何处打开⽬标 URL。
- name:属性为表单起个名字.在HTML5中使⽤ id 代替。
2)举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML实例-表单标签:form, input, select, textarea</h1>
<form action="a.html" method="GET">
姓名:<input type="text" name="uname"/> <br/><br/>
密码:<input type="password" name="upass"/> <br/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
8.2 input 表单项标签input定义输入字段
1)input常用属性
⽤户可在其中输⼊数据。在 HTML 5 中,type 属性有很多新的值。
*type属性:表示表单项的类型:值如下:
text:单⾏⽂本框
password:密码输⼊框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:⽂件上传选择框
button:普通按钮
submit:提交按钮
image:图⽚提交按钮
reset:重置按钮, 还原到开始(第⼀次打开时)的效果(如果有默认值,则会恢复默认值,而不是清空的意思)
hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
HTML5新增属性 email ⽤于应该包含 e-mail 地址的输⼊域
url ⽤于应该包含 URL 地址的输⼊域
number ⽤于应该包含数值的输⼊域
- max 规定允许的最⼤值
- min 规定允许的最⼩值
- step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
- value 规定默认值
range ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条
- max 规定允许的最⼤值
- min 规定允许的最⼩值
- step 规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
- value 规定默认值
⽇期选择器 Date pickers
- date - 选取⽇、⽉、年
- month - 选取⽉、年
- week - 选取周和年
- time - 选取时间(⼩时和分钟)
- datetime - 选取时间、⽇、⽉、年(UTC 时间)
- datetime-local - 选取时间、⽇、⽉、年(本地时间)
search ⽤于搜索域,⽐如站点搜索或 Google 搜索
color 颜⾊选择
8.3 select 标签创建下拉列表
1)常用属性
name属性:定义名称,⽤于存储下拉值的
size:定义菜单中可⻅项⽬的数⽬,html5不⽀持
disabled 当该属性为 true 时,会禁⽤该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.
2)举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML实例-表单标签:form, input, select, textarea</h1>
<form action="a.html" method="GET">
学历:<select name="education" id="">
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3" selected>硕士</option>
<option value="4">博士</option>
</select>
</form>
</body>
</html>
8.4 textarea 多行的文本输入区域
1)常用属性
name :定义名称,⽤于存储⽂本区域中的值。
cols :规定⽂本区内可⻅的列数。
rows :规定⽂本区内可⻅的⾏数。
disabled: 是否禁⽤
readonly: 只读
...
默认值是在两个标签之间
2)举例
无value属性,而是在标签开始结束中间添加内容,如图:
8.5 button 标签定义按钮
可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
8.6 fieldset 元素可将表单内的相关元素分组(圈框)
disabled属性:定义 fieldset 是否可⻅。
form属性: 定义该 fieldset 所属的⼀个或多个表单。
8.7 legend – 标签为 fieldset 、 figure 以及 details 元素定义标题
8.8 optgroup html5标签-- 定义选项组
此元素允许您组合选项,允许进行分组
8.9 datalist html5标签-- 定义可选数据的列表
与 input 元素配合使⽤,就可以制作出输⼊值的下拉列表。
九、HTML框架标签
1)常用属性:
src:规定在 iframe 中显示的⽂档的 URL
name:规定 iframe 的名称
height:规定 iframe 的⾼度。
width:定义 iframe 的宽度。
frameborder:规定是否显示框架周围的边框。
例如:<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
2)举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML框架标签:iframe</h1>
<ul>
<li><a href="f.html" target="myframe">表单标签实例</a></li>
<li><a href="e.html" target="myframe">表格标签实例</a></li>
<li><a href="c.html" target="myframe">图片标签实例</a></li>
</ul>
<iframe src="f.html" name="myframe" frameborder="1" width="80%" height="500"></iframe>
</body>
</html>
十、HTML5多媒体标签
10.1 新增布局标签
将一些标签的含义更加具体化,这样可以快速区分页面中的各个部分,提高检索内容的速度
10.2 新增的input type属性
这些新增的类型,更加细化的限定了输⼊内容,如果输⼊格式不对,在提交的时候会⾃动给出相应提示
更多新增type 参考w3c
10.3 新增的input属性
10.4 多媒体标签(了解)
<audio src="./images/beidahuang.mp3" controls="controls">
你的浏览器不⽀持播放
</audio> <br/>
<audio controls="controls">
<source src="./images/beidahuang.mp3" type="audio/mpeg" />
你的浏览器不⽀持播放
</audio> <br/><br/>
<video controls="controls" width="400" height="400">
<source src="./images/fun.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm">
你的浏览器不⽀持视频播放
</video> <video controls loop poster="tiao.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的破浏览器该扔了,不⽀持视频标签
</video> <br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />