1 HTML
1.1 网页组成
文字、图片、链接、音频、视频等元素
1.2 WEB 前端开发流程
早期开发流程:
- 美工(PS):设计效果图
- 前端工程师(HTML、CSS、JS等前端技术):实现静态网页
- java工程师:使用动态WEB技术,将静态页面变为动态页面
主流开发流程:
前后端分离
- 美工:设计效果图
- 前端工程师:实现静态网页,同时使用mock技术,实现页面的模拟测试
- 后端工程师:开发接口
- 前、后端需要协商后端接口的开发规范
1.3 WEB 标准(重点)
不同浏览器内核不同、工作原理不同、页面解析不同,因此显示上有差异
W3C制定浏览器的WEB标准
1.3.1 WEB标准的好处
- 能被广泛设备访问
- 更容易被搜索到
- 降低网站流量费用
- 网站易于维护
- 提高页面浏览速度
1.3.2 WEB标准的构成
三个方面:结构、表现、行为
结构标准:对网页元素的分类和整理(HTML、XHTML等)
样式标准:网页元素的版式、颜色、大小等外观样式的设计(CSS)
行为标准:网页模型的定义和交互方式()
2 HTML的认识
HTML:Hyper Text Markup Lanague(超文本标记语言)
HTML是通过标签来标记要显示的网页中的各个部分,网页本身是一种文本文件,通过文本文件添加标记符,可以告诉浏览器如何显示其中的内容(文字如何处理,页面如何排版,图片如何显示等)。
2.1 网页开发工具
IDEA 记事本 VSCode HBuilder
2.2 VSCode配置
- 主体配置 在管理(齿轮图标)中选择颜色主题,可选择自己想要的颜色
- 字号的配置 在管理中选择设置,在常用设置中可设置字体大小
- 插件配置
- Chinese (Simplified) Language Pack for Visual Studio Code 汉化插件
- HTML Snippets 可以提供HTML5的片段和提示
- HTML CSS Support CSS的智能提示
- Debugger for Chrome 映射chrome的debug功能
- jQuery Code Snippets jquery的智能提示
- vscode-icons 不同的文件以不同的图标显示 跟利于区分
- Path Intellisense 自动的路径补全
- Project Manager 项目管理
- Beautify 实现代码的格式化
- Auto Rename Tag 标签的重命名
2.3 开发HTML页面
- 在本地任意盘符下创建一个vscode的工作空间
- 在vscode的工作空间下 创建一个工程目录
- 打开VSCode,在文件—选择打开文件夹 ,打开所创建的工程目录
- 创建一个HTML文件 扩展名为.html 或者.htm
- 在文件中编写HTML页面的基本框架 html:5
- 由浏览器进行解析执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.4 文档类型
<!--html4的文档类型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--html5的文档类型 -->
<!DOCTYPE html>
必须位于文档的第一行 告诉浏览器当前文档使用的是哪种HTML标准规范。
3 HTML 标签
3.1头部标签
元数据标签:meta标签
通常用于指定网页的描述 关键字 文件的最后的修改时间 作者 及其他的元数据
元数据可以被浏览器使用,搜索引擎发现其他的web服务调用。
content为必须属性,用于定义 http-equiv 或 name 属性的相关元信息
http-equiv为可选属性,把content属性关联到HTTP头部
name为可选属性,把content属性关联到一个名称
schme为可选属性,定义翻译content属性值的格式
<head>
<!-- meta标签是页面的元数据 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置网页可以自适应布局 width=device-width 适应设备的宽度 initial-scale不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='keywords' content="网上购物,网上商城">
<meta name="description" content="这是一个B2C的全品类的电商网站">
<meta name="author" content="张三">
<!-- 设置网页的自动跳转 5秒之后跳转到百度 -->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
<!-- 页面的标题 -->
<title>这是第一个HTML页面</title>
</head>
3.2 body内的标签
3.2.1 标签格式
<标签名 属性名 = 属性值,属性名 = 属性值,……>标签封装内容</标签名>
标签名大小写不敏感,推荐统一小写
属性:
- 基本属性:bgcolor=”red“ 修改元素的基本样式
- 事件属性:οnclick=“alert(‘你好’)” 点击相应标签后浏览器给出的反应
标签分类
- 单标签:<标签名/>
- 双标签:<标签名></标签名>
标签语法
- 标签不能交叉嵌套,先写后结,后写先结
- 双标签一定要记得关闭
- 属性一定要有值,属性值要有双引号
- 注释不能嵌套
4.2.2 常用标签
4.2.2.1 font 字体标签
<font color="red" face="宋体" size="22"> Hello HTML </font>
4.2.2.2 特殊符号
空格在源代码中无论写多少个,浏览器都解析成一个
可以使用特殊字符表示空格
 ; 写几个有几个
把<br/>换行标签 变成文本 转换为字符显示在页面上,将<>分别换成< 和>
<h2>这是一个换行标签<br/></h2>
4.2.2.3 标题标签
标题标签 h1 ~ h6
h1最大 h6最小
属性:align:left right center(左对齐,右对齐,居中)
<h1 align="left">大学</h1>
<h2 align="center">大学</h2>
<h3 align="right">大学</h3>
4.2.2.4 超链接
在网页中所有点击之后可以跳转的内容都是超链接
<!--
a 标签是超链接标签
href 设置链接的地址
target:
_self 表示在当前标签中打开链接地址
_blank 表示在一个新的标签中打开链接地址的页面
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
4.2.2.6 列表标签
无序列表,有序列表
<!--
ul 表示无序列表
ol表示有序列表
li 列表项
type属性 可以修改列表签的样式
有序列表:A a 1 i
无序列表:none disc square circle
-->
<ol type="i">
<li>赵四</li>
</ol>
<ul type="circle">
<li>赵四</li>
</ul>
4.2.2.5 图像标签
<!--
img 表示图像
src 文件路径
width 图片宽度(单位像素)
heigth 图片高度
border 边框宽度(单位像素)
alt 路径错误时显示的字符
-->
<img src="imgs/1.jpg" width="300px" height="200px" border="10" alt="这是一张图片">
4.2.2.6 表格标签(重点)
<!--
标签:table 表示表格
tr 表示行
td 表示单元格
thead 表示表头
tbody 表示表体
th 表头的单元格
表格属性:
border 表格的边框
align 表格相对于页面的对齐方式 left right center
width 表格的宽度
height 表格的高度
cellspacing 单元格之间的间距
单元格的属性:colspan 设置跨列 合并列
rowspan 设置跨行 行合并
-->
<table align="center" border="1" width="300px" height="300px" cellspacing="0">
<thead>
<tr >
<th colspan="4">个人基本信息</th>
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>学校</th>
</tr>
</thead>
<tbody align="center">
<tr >
<td>张三</td>
<td>男</td>
<td>21</td>
<td rowspan="2">中北大学</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
</table>
4.2.2.7 iframe 框架标签(了解)内联或内嵌框架
可在HTML页面上,单独出现一个小界面
<iframe src="index.html" width="800px" height="300px" name="abc"></iframe>
4.2.2.8 frameset(了解)
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
和不能同时使用<!-- 垂直划分 左右分别占比 25% 75 -->
<frameset cols="25%,75%">
<frame src="index.html">
<frame src="table.html">
</frameset>
<!-- 水平划分 分为上中下 分别占比 25% 50% 25%-->
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
5 表单标签
form标签 主要用于收集用户的输入数据,将数据提交到后台并保存
用表格(
)形式实现表单<body>
<form action="">
<h1 align = "center" >用户注册</h1>
<table align = "center">
<tr>
<td>用户名称:</td>
<!-- 单行文本输入框 placeholder 框内提示 -->
<td><input type="text" value="" placeholder="请输入用户名"/></td>
</tr>
<tr>
<td>用户密码:</td>
<!-- 密码框 -->
<td><input type="password" value="" placeholder="请输入密码"/></td>
</tr>
<tr>
<td>头像:</td>
<!-- 文件选择对话框 -->
<td><input type="file" value="" placeholder="请选择头像文件"/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- 单选按钮是互斥关系,name属性值要一致 这样才能互斥 -->
<input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="woman"/>女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<!-- 复选框 type=checkbox 可以同时选中多个值 默认选择用 checked=“checked/true” 表示-->
<input type="checkbox" value="跑步" checked="true"/>跑步
<input type="checkbox" value="爬山"/>爬山
<input type="checkbox" value="游泳"/>游泳
<input type="checkbox" value="骑车"/>骑车
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<!--下拉选择框 multiple表示下拉框是否可以多选 默认选择使用selected option选项 -->
<select>
<option >--请选择户籍所在地--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr>
<td>自我评价:</td>
<!-- 多行文本输入框 rows代表行数 cols代表列数 -->
<td><textarea rows="10" cols="50" placeholder="请输入自我评价"></textarea></td>
</tr>
<tr>
<td>
<!-- 提交按钮 -->
<input type="submit" value="提交"/>
<!-- 重置按钮 -->
<input type="reset" value="清空"/>
<!-- 普通按钮 -->
<input type="button" value="按钮"/>
</td>
</tr>
</table>
</form>
</body>
6 其他标签
div标签
span标签
p 段标签
<!-- div标签是独占一行 但是 标签本身不占有任何空间 依靠内容来占据空间-->
<div style="width: 100px; height: 100px; background-color: aqua;">这是一个div标签</div>
<div>这是一个div标签</div>
<!-- span标签是在同一行 本身也不占据空间 依靠内容来占有空间 -->
<span>span标签 </span><span></span> <span>span标签 </span>
<!-- p段落标签 默认会在段落的上方或下方空出一行 -->
<p>
8月6日,郑州市新冠肺炎疫情发布会回应,网传“800人婚宴”夸大其辞,当天参加婚宴者实有402名客人,60名工作人员,请大家不造谣、不信谣、不传谣。那么,这名护士在哪一天确诊?与她的接触者可否定为密接和次密接者......
</p>
<p>
8月6日,郑州市新冠肺炎疫情发布会回应,网传“800人婚宴”夸大其辞,当天参加婚宴者实有402名客人,60名工作人员,请大家不造谣、不信谣、不传谣。那么,这名护士在哪一天确诊?与她的接触者可否定为密接和次密接者......
</p>
7 文本格式化标签
<body>
<h1>文本的格式化标签</h1>
<p>
<b> b bold 加粗文本</b>
<br/>
<strong>strong 加粗文本 语义更加明确</strong>
</p>
<p>
<i> i 斜体文本</i><br/>
<em>em 斜体文本</em>
</p>
<p>
<big>放大文本</big><br/>
<small>缩小文本</small>
</p>
<p>
<!-- 上标 -->
2<sup>2</sup>
<!-- 小标 -->
2<sub>2</sub>
</p>
<p>
<ins>给文字加入下划线</ins>
<del>删除线</del>
</p>
</body>
8 ”计算机“输出标签
<!-- 计算机代码 -->
<code>
public static void main(String[] args){
System.out.println();
}
</code><br/>
<!-- 快捷键 -->
<kbd>shift+ctl</kbd><br/>
<!-- 代码样本 -->
<samp>
-- 夏天 是一个难熬的季节
</samp>
<!-- 预格式文本 原样显示 可以将行和复数的空格表示出来 -->
<pre>
<h1>这是一个 标题
标签</h1>
</pre>
9 引文 引用标签
<!-- abbr 对文字等进行注释描写 -->
<p><abbr title="Hyper Text Markup Lanague">HTML </abbr> 是超文本标记语言</abbr></p>
<!-- address 定义文档或文章的作者/拥有者的联系信息。 文本通常为斜体 -->
<address>
name:admin <br/>
addr: 天津市西青区<br/>
email:admin@126.com
</address>
<!-- blockquote 定义块引用。引用内所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进 -->
<blockquote>
文档引用: 表现形式就出现缩进
主要包括结构 表现 和行为三个方面
<!-- q 短引用 表现就是会添加双引号 -->
<q>结构标准:用于对网页元素进行整理和分类 主要包括html 和XHTML 等。</q>
样式标准:表用用于设置网页元素的版式 颜色 大小等外观样式,主要指的就是CSS
行为标准:指的是网页模型的定义以及交互的方式,主要包括 DOM ,ECMAScript和BOM三部分
</blockquote>
<div>
<!-- cite 用来表述书名 歌曲名等名称 -->
<cite>《java从入门到放弃》</cite>
<cite>《HTML从入门到精通》</cite>
</div>
10 HTML5 的新标签和特性
10.1 文档类型设定
<!DOCTYPE html>
10.2 字符集设定
<!--HTML5的推荐写法-->
<meta charset="UTF-8">
<!--HTML通用写法-->
<meta http-equiv="charset" content="utf-8"/>
10.3 常用新标签
标签 | 描述 |
---|---|
< article > | 定义文章。 |
< aside > | 定义页面内容以外的内容。 |
< details > | 定义用户能够查看或隐藏的额外细节。 |
< figcaption > | 定义 < figure > 元素的标题。 |
< figure > | 规定自包含内容,比如图示、图表、照片、代码清单等。 |
< footer > | 定义文档或节的页脚。 |
< header > | 规定文档或节的页眉。 |
< main > | 规定文档的主内容。 |
< mark > | 定义重要的或强调的文本。 |
< nav > | 定义导航链接。 |
< section > | 定义文档中的节。 |
< summary > | 定义 < details > 元素的可见标题。 |
< time > | 定义日期/时间。 |
10.4 常用新属性
<!-- action 表示表单提交的地址 -->
<form action="">
<fieldset>
<legend>注册信息</legend>
<!--required 必填项 readonly只读 hidden隐藏 -->
<label for="username">姓名</label><input type="text" name="username" readonly required hidden id=""><br/>
<label for="password">密码</label><input type="password" name="password" id=""><br/>
</fieldset>
<input type="submit" value="tijiao">
</form>
11 多媒体标签
embed 嵌入内容 可以插入各种多媒体以及插件
audio 音频
video 视频
<!--
autoplay = "autoplay" 在媒体文件就绪后自动播放
controls="controls" 展现控件,如播放按钮
loop 当媒体文件播放完毕后重新播放
-->
<embed src="imgs/movie04.ogg" width="500px" height="200px" autoplay="autoplay" >
<audio autoplay="autoplay" controls="controls" loop="-1">
<source src="imgs/music.ogg"/>
</audio>
<video autoplay="autoplay" controls="controls" >
<source src="imgs/movie04.ogg">
</video>
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。