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：

html 复制代码

<!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：

html 复制代码

<!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>