HTML详解（1）
1.HTML定义
- HTML：超文本标记语言。
- 超文本：通过链接可以把多个网页链接到一起
- 标记：标签，带括号的文本
- 后缀：.html
标签语法：<strong>需加粗文字</strong>
- 成对出现，中间包裹内容
- <>里面放字母，小写
- 结束标签比开始标签多/
双标签：成对出现
单标签：只有开始（<br>：换行；<hr>：水平线）
2.HTML基本骨架
<html> ->整个网页
<head> ->网页头部，用来存放给浏览器看的信息，如CSS
<title> </title> ->网页标题
</head>
<body> ->网页主体，用来存放给用户看的信息，如图片、文字
</body>
</html>
VS code快速生成骨架：
在HTML文件（.html）中，！（英文的）配合Enter/Tab键。
3.标题的关系
作用：明确标签书写位置，让代码格式更整齐。
1.嵌套关系（换行且缩进）
<html>
<head> </head>
</html>
2.并列关系（换行要对其）
<head> </head>
<body> </body>
4.注释
对代码的解释和说明，让人们更加轻松地了解代码，提高代码的可读性。
<!-- --> 快捷键：ctry+/
5.标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等。
标签名：h1～h6（双标签）
<h1> …… </h1>
特点：
- 文字加粗
- 字号逐渐减小
- 独占一行（换行）
- 一共6级
6.段落标签
一般用在新闻段落、文章段落、产品描述信息等。
标签名：p（双标签）
<p> </p>
特点：
- 独占一行
- 段落之间存在间隙
7.换行与水平线标签
换行：<br>（单标签） 在想换行的地方加一个<br>
水平线：<hr>（单标签）
8.文本格式化标签
作用：为文本添加特殊格式，以突出特点。
常见的文本格式：加粗、倾斜、下划线、删除线等。
新写法：
| 标签名 | 效果 |
| strong | 加粗 |
| em | 倾斜 |
| ins | 下划线 |
| del | 删除线 |
旧写法：
| 标签名 | 效果 |
| b | 加粗 |
| i | 倾斜 |
| u | 下划线 |
| s | 删除线 |
strong、em、ins、del标签自带强调含义（语义）。
9.图像标签
图像标签作用
作用：在网页中插入图片（和html代码文件放在一起）
<img src="图片的URL">
- img（单标签）
- src用于指定图像的位置和名称，是<img>的必须属性
- 在src的""中，以./开头就能选择文件中的图片
图像标签的属性
| 属性 | 作用 | 说明 |
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
多个属性之间用空格隔开。
<img scr="./cat.jpg" alt="替换文本" title="提示文本">
src：属性名。 ./cat.jpg:属性值
- 属性名="属性值"
- 属性写在简括号里，标签名和属性之间用空格隔开，不区分先后顺序。
10.路径
路径指的是查找文件时，从起点到终点经历的路线
路径分类：
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件
相对路径：
- ./表示当前文件所在文件夹
- 文件夹名字/ 进入下一级文件夹
绝对路径：
- windows电脑从盘符出发
- mac电脑从根目录（/）出发
11.超链接
作用：点击跳转到其他页面
<a href="……">跳转到百度</a>
href属性值是跳转地均是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加target="_blank"实现新窗口打开页面。
开发初期，不确定跳转地址，可用#号代替。
12.音频标签
<audio src="音频用的URL"></audio>
常见属性：
| 属性 | 作用 | 特殊说明 |
| src | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用播放功能 |
属性名和属性值相同可以简写成一个单词。
13.视频标签
<video src="视频的URL"></video>
常见属性：
| 属性 | 作用 | 特殊说明 |
| src（必须属性） | 视频URL | 支持格式：MP4、webm、Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autopiay | 自动播放 | 为了提升用户体验，浏览器支持在静音状态自动播放 |
练习：
练习1：
<!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>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
<p>2016年07月27日 10:58:26 来源： <a href="http://www.xinhuanet.com/" target="_blank">新华网</a> </p>
<hr>
<p>新华网上海7月26日电（记者李荣）26日13时36分至47分这一时间段，上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录，打破了此前1934年创下的40.2摄氏度的历史极值。
</p>
<p>上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制"实在太稳定了"，整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份 <strong>"第四高"</strong> 的高温值，这使得26日的"基础"气温就很高，超过了30摄氏度，然后不断地升温。此外，26日白天风小又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温"直线飙升"，一举冲破历史极值，出现了"创纪录"的极端酷暑天。
</p>
<p>在上海历史上，出现40摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站140年来仅出现了5次记录，除了这一次的新纪录，还有就是1934年7月12日的40.2摄氏度；1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。
</p>
<p>由于气温实在太高，上海26日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到15时05分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。
</p>
</body>
</html>
在这里使用了标题标签、段落标签、水平线、加粗、超链接
练习2：
<!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>
<img src="./800.jpg" alt="尤雨溪" title="尤雨溪">
<h3>尤雨溪简介</h3>
<p>尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs 和Meteor Development Group。由于工作中大量接触开源的JavaScript 项目，最后自己也走上了开源之路，现全职开发和维护Vue.js。
</p>
<h3>学习经历</h3>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
</p>
<h3>主要成就</h3>
<p>尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。
2014年2月，开发了一个前端开发库Vue.js。Vue js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。
</p>
<h3>社会任职</h3>
<p>2016年9月3日，在南京的JSConf 上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。
</p>
</body>
</html>