HTML
HTML
HTML 定义
HTML超文本标记语言--HyperText Markup Language。
- 超文本是什么? 链接
- 标记是什么? 标记也叫标签，带尖括号的文本
标签语法
-
需要加粗的文字
- 标签成对出现，中间包裹内容
- <>里面放英文字母(标签名)
- 结束标签比开始标签多/
<strong>需要加粗的文字</strong>
HTML 基本骨架
HTML 基本骨架是 网页模板。
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
网页主题
</body>
</html>
- html:整个网页
- head:网页头部，存放给浏览器看的代码，例如 CSS
- body:网页主体，存放给用户看的代码，例如 图片、文字
- title:网页标题
标签的关系
作用:明确代码的书写位置
- 父子关系(嵌套关系)
- 兄弟关系(并列关系)
注释
注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。
在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码进行修改。
学习和工作中，关键代码都要加注释
注释标签用来在源文档中插入注释，注释不会在浏览器中显示。快捷键 ctrl + /标题标签
标签名 : h1 ~h6 (双标签)
显示特点:
- 文字加粗
- 字号逐渐减小
- 独占一行(换行)
经验分享： h1 标签一个网页中只能用一次，用来放新闻标题或网页的 logo。
段落标签
一般用在新闻段落、文章段落、产品描述信息等等
标签名：p (双标签)
显示特点:
- 独占一行
- 段落之间存在间隙
<p>已学完，这个老师讲的真他妈的，什么叫抽丝剥茧，循循渐进，不像有的老师一上来就搞最终过程，根本听不懂，而且老师那还有很多面试题，笔试题我都买了，经过一个月的猛肝，
终于在美团面试的时候一把过，美团的福利我就不多说了，免费换电瓶和充电，不说了老板叫我出餐了。</p>
换行与水平线标签
- 换行(单标签):
- 水平线(单标签):
文本格式化标签
作用:为文本添加特殊格式，以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
标签的主要部分有:
开始标签(Opening tag):包含元素的名称(本例为 p)，被左、右角括号所包围。表示元素从这里开始或者开始起作用 -- 在本例中即段落由此开始。
结束标签(Closing tag):与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 --- 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容(Content): 元素的内容，本例中就是所输入的文本本身。
下面的写法：（推荐）
strong、em、ins、del标签自带强调含义(语义)
| 标签名 | 效果 |
|---|---|
| strong | 加粗 |
| em | 倾斜 |
| ins | 下划线 |
| del | 删除线 |
不推荐：
| 标签名 | 效果 |
|---|---|
| b | 加粗 |
| i | 倾斜 |
| u | 下划线 |
| s | 删除线 |
图像标签-基本使用
作用:在网页中插入图片。
<img src="./index.png">
图像标签-属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
<img src="./index.png" alt="这是一个风景图片" title="1234" width="200" height="200">
- 属性名="属性值"
- 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
路径
路径指的是查找文件时，从起点到终点经历的路线，
路径分类:
- 相对路径:从当前文件位置出发查找目标文件
- 绝对路径:从盘符出发查找目标文件
文件的在线网址:https://www.baidu.com/images/logo.png
绝对路径的应用场景: 友情链接
超链接
作用: 点击跳转到其他页面。
<a href="https://www.baidu.com" >跳转到百度</a>
<!-- 跳转到本地文件，相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./index.png" target="_blank" >跳转到本地图片</a>
<!-- 开发初期，不知道跳转地址，href填写# 表示空链接 -->
<a href="#">空链接</a>
音频标签
<audio src="音频的 URL"></audio>
常见属性
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src(必须属性) | 音频 URL | 支持格式:MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
<!-- 在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="音频的 URL" controls loop></audio>
视频标签
<video src="视频的 URL"></video>
常见属性
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src(必须属性) | 视频 URL | 支持格式:MP4、WebM、Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音状态自动播放 |
<!-- 在浏览器中，想要自动播放，必须有muted属性 -->
<video src="index.mp4" controls muted loop autoplay></video>
浙公网安备 33010602011771号