文章目录
本文是基于课程 前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程 P5-20节的笔记总结，便于前端零基础小白（我）学习查找。
一、HTML 的概念
HTML (Hyper Text Markup Language) 超文本标记语言
专门用于网页开发的语言，主要通过 HTML标签 对网页中的文本、图片、音频等内容进行描述
二、基本语法
开始结束标签<></>
开始：< >
结束：</ >
例：< strong > strong可以加粗字体 < /strong >
HTML页面基本固定结构
<html> // 整体开始
<head> // 头部
<title>网页的标题</title> //浏览器网页名称
</head> // 头部结束
<body> // 主体开始
网页主体内容
</body> // 主题结束
</html> // 整体结束
Tips: VScode 的html文件中，输入英文叹号" ! "自动填充基本结构。
注释< !-- – >
<!-- --> // <>中的内容不会出现在网页上
Tips：VScode 中可用 Ctrl + / 快速注释
三、排版标签
标题标签< h1 > < /h1 >
<h1>一级标签</h1>
<h2>二级标签</h2>
...
<h6>六级标签</h6>
Warning：标题仅到六级
Tips：
复制该行：光标放该行 Shift + Alt + ↑/↓
删改重复字：Ctrl + D
段落标签< p > < /p >
<p>一段内容</p>
换行标签< br >
一段内容<br>
换行标签< hr >
// 标题内容
<hr>
// 主体内容
四、文本格式化标签（表格）
一般标签：一般情况下使用
重要标签：内容更重要情况下使用
| 一般标签 | 重要标签 | 说明 |
|---|---|---|
| < b > | < strong > | 加粗 |
| < u > | < ins > | 下划线 |
| < i > | < em > | 倾斜 |
| < s > | < del > | 删除线 |
Tips:一般标签和重要标签的页面效果相同
五、媒体标签
图片标签< img src=" " alt=" " >
标签属性语法：属性名=属性值(“”)
// 语法：
<img src="(路径)" alt="(文案)">
<img src=" " alt=" " title="(文案)"> // 增加悬停
<img src=" " alt=" " width="(值)" height="(值)"> // 改变尺寸
| 属性名 | 功能 |
|---|---|
| src | 根据路径找到文件 |
| alt | 替换文本 |
| title | 悬停提示文本 |
| width | 改变宽度 |
| height | 改变高度 |
Tips：width 和 height 一般仅设一个即可，因另一个会随之变化（等比例变化），若同时设置可能会使图片变形。
路径
分类：
- 绝对路径（了解）
目录下的绝对路径，可直接到达目标位置，通常从盘符开始的路径
缺点：另一浏览者在对应路径可能没有相关资料，导致加载失败。
例如：
盘符：D:\data\picture\1.png
网页：https://www.itcast.cn\logo.gif
- 相对路径（常用）
从当前文件(.htlm)开始出发，找目标文件的过程。
分类：- 同级路径：当前文件与目标文件在同一目录下
插入方法：可直接填写 文件名 或 ./文件名法一： < img src=“(目标文件名).gif” >
法二： < img src=“./(目标文件名).gif” >
其中 ./ 表示在当前目录 - 下级路径：目标文件在下级目录下
插入方法： 文件夹名字 / 文件名方法： < img src=“(文件夹名) / (目标文件名.后缀)” >
- 上级路径：目标文件在上级目录下
插入方法： …/ 文件夹名字 / 文件名方法： < img src=“… / (文件夹名) / (目标文件名.后缀)” >
./ 返回一级增加一个 " . " 如：…/ 打开上二级
- 同级路径：当前文件与目标文件在同一目录下
音频标签< audio src=" " > < /audio >
// 语法：
<audio src="></audio>
<audio src=" " controls></audio> // 增加播放控件
<audio src=" " autoplay loop></audio> // 自动播放 单曲循环
| 属性名 | 功能 |
|---|---|
| src | 根据路径找到文件 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
视频标签< video src=" " > < /video >
// 语法：
<video src="></video>
<video src=" controls muted></video> //实现自动静音播放
<video src=" loop></video> //循环播放
| 属性名 | 功能 |
|---|---|
| src | 根据路径找到文件 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器需配合muted实现静音播放） |
| loop | 循环播放 |
六、链接标签< a href=“” >(链接名)< /a >
// 语法：
<a href="">(链接名)</a>
<a href="" target="_blank">(链接名)</a> //在新窗口跳转
| 属性名 | 功能 |
|---|---|
| href | 跳转地址 |
| target | 目标网页的打开方式 |
| target取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口跳转(覆盖原网页) |
| _blank | 在新窗口跳转(保留原网页) |
当开发网站初期，暂不知跳转地址时，href的值可设为"#"(空连接)
附：示例页面图
若对本文有任何建议或意见欢迎在评论区提出~十分感谢！
Ending
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
