数媒大二上HTML5速成笔记
HTML5速成笔记
0. 前言
视频教程链接:
https://www.bilibili.com/video/BV1vs411M7aT/
本笔记的作用：
可供有HTML基础的、观看过上述教程的同学快速回忆知识点达到快速复习的目的，也可以为零基础的但快考试的同学提供对HTML的快速了解。
1. 开始前的准备
- 浏览器
- Chrome
- Edge Chromium
- Mozilla Firefox
- Safari
QQ,360,IE,遨游…
- 编辑器
- Visual Studio Code
- Sublime Text
- Atom.io
- codepen.io(即时编辑并呈现效果的代码平台)
后续可能需要准备多个浏览器来测试同一个网页在不同浏览器上的显示效果
2. 什么是HTML
- HyperText Markup Language(超文本标记语言)
- 不是编程语言
- 告诉浏览器如何构造网页(需要配合CSS实现更完整美观的效果)
3.1 HTML Element
<p>Lorem ipsum dolor sit amet</p>
这整条语句叫做HTML Element,Lorem ipsum dolor sit amet是一段普通的文本, <p>叫做开始标签(Opening Tag), </p>叫做结束标签(Closing Tag).
而HTML里面又有很多的标签(Tag)，这里也会讲一些常用的Tag.在这里可以查看HTML里所有的Tag: HTML element reference
3.2 HTML 文件的组成
<html>
</html>
首先一个HTML页面会由这两个Tag来包裹，在这两个标签内，你通常会看到head和body，如下：
<html>
<head>
<!-- 存放一些不被渲染在整个网页主体页面上的东西 -->
<!--例如：搜索引擎关键字、网页的基本信息（比如通常会在标签栏上看到的标题） -->
</head>
<body>
<!-- 存放真正给用户看到的内容：标题文本、段落 -->
</body>
</html>
上面的代码块也交代了各部分的作用了，那么在网页文件的构成中第一行其实应该还有这样一行代码：
<!DOCTYPE html>
<!-- 解释文档类型 -->
这里是声明这个文档是html5文档
所以目前我们的html文档就构成了这样：
<!DOCTYPE html>
<!-- 解释文档类型 -->
<html lang="en">
<head>
<!-- 这里是头部 -->
</head>
<body>
<!-- 这里构成网页内容 -->
</body>
</html>
这里 head 和 body 的缩进根据自己喜好，缩进太多可能导致后续代码宽度太宽。
3.3 HTML 组成
3.3.1 标题
上面我们讲了，head是存储网页的信息，如果我们想在标签栏上显示我们的网页是什么（比如百度、京东、哔哩哔哩…），那么我们需要在head中添加<title><title>标签，来展示我们的标题，比如这样：
<head>
<title>HTML Crash Course For Beginner</title>
</head>
而文本标题则是使用h1到h6表示不同层级的标题。
<!-- Headings -->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Headign Three</h3>
<h4>Headign Four</h4>
<h5>Headign Five</h5>
<h6>Headign Sixa</h6>
3.3.2 注释
HTML中注释怎么写：
<!-- This is a note -->
3.3.3 VS Code中的一个快捷操作
将该行内容向下复制
Windows系统上，使用：
Alt + Shift + ↓
Mac系统上则使用：
Option + Shift + ↓
3.3.4 段落&生成语句lorem
lorem生成一段随机文字
lorem10生成10个词
段落空白——margin(边界)
F12开发者工具查看margin区域
有关margin和padding会在之后的教程中讲解
作用
随机生成语句，用于CSS样式的快速调试，相当于编写了程序之后，快速生成实验对象(可类比于调试工作中的编写json)
3.4 HTML 块级元素和内联元素
HTML元素可以分成两种元素，一种是块级元素(Block Level Element)，一种是内联元素(Inline Element)
| 块级元素 | 内联元素 |
|---|---|
| 在页面以块的形势展现 | 通常在块级元素内 |
| 出现在新的一行 | 不会导致文本换行 |
| 占全部宽度(可以使用CSS进行定义) | 只占必要的部分宽度 |
<div> <h1> <p> .. |
<a> <img> <em> <strong> .. |
如果你学过MarkDown语法，你应该快速理解这两种元素的区别。
3.4.1 内联元素
加粗
<strong>Bold Text</strong>
斜体
<i>Bold Text</i>
链接
<a href = "www.baidu.com">Click Me</a>
块引用
<blockquote>Life is a fucking movie.</blockquote>
提示
<p><abbr title="MineCraft">MC</abbr> is the best game in my mind!</p>
3.4.2 块级元素
列表 List
- 无序列表
ul<ul> <!-- Unordered List --> <li>Item 3</li> <li>Item 2</li> <li>Item 1</li> <li>Item 4</li> <li>Item 5</li> </ul> - 有序列表
ol<ol> <!-- Ordered List --> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ol>
表格 Table
<table>
<thead>
<tr>
<!-- tr: table row 行 -->
<th>Num</th>
<th>Name</th>
<th>Major</th>
<!-- th: table head 表头的内容 -->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lee</td>
<td>Internet Tech</td>
<!-- td: table data 表的数据 -->
</tr>
<tr>
<td>2</td>
<td>Chan</td>
<td>Digital Media Tech</td>
</tr>
</tbody>
</table>
表单 Form
<form action="form.js">
<div>
<!-- division -->
<label>ID Number</label>
<input type="text" name="ID" placeholder="Enter Your ID Number">
</div>
<div>
<label>Name</label>
<input type="text" name="Name" placeholder="Enter Your Full Name">
</div>
<div>
<label>Major</label>
<input type="text" name="Major" placeholder="Enter Your Major Course">
</div>
<input type="submit" name="submit" value="Submit">
</form>
我们首先要理解表单的作用：用户输入信息，并提交给后台处理数据。所以表单的组成有：要输入的信息、输入框、提交按钮、提交动作(填写在form的action里，需要学习js相关知识)
这里div的作用是划分一块区域，label是该框的标签，也就是会显示这个框是做什么的，placeholder是占位符，显示在编辑框内部，可用于提示用户输入什么内容，name作用是给该数据标记，用于后端数据处理。
input是该表单的提交按钮，type是类型，name是对该按钮的标记，用于后端处理，value是按钮显示的文字
图片 Picture
<img src="" alt="">
src是图片来源,alt是图片无法加载时显示的文字，比如我们可以这样用：
<img style="width:500px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330180105_cpfth.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670838942&t=658425296de05e8ac36908819c0062fe" alt="EDC">
这样我们就可以显示冠希哥的图片，在图片挂掉时，会显示一个裂掉的图片图标和EDC文字
内联引用
<p><cite>Life is a fucking movie! 人生如戏啊 你同我讲</cite> by EDC</p>
3.5 HTML属性 attribute
例子：超链接
一个普通的HTML元素如下：
<a>Lorem</a>
但通常它会被这样使用：
<a href="https://baidu.com">Lorem</a>
效果如下：
Lorem
想必你已经猜到这段文字的意义：给Lorem加上超链接
通常，HTML属性都是被写在前面的。
例子：标题居中
<h1 align="center">陈冠希 EDC</h1>
效果如下：
陈冠希 EDC
例子：表格边框
<table border="1">
照例，附上链接查看所有的HTML属性以供更加深入的学习:
第一个列举了特定的标签的属性，第二个列举了全局的属性。
3.5.1 实践
HTML很简单，最后的实践就不过多解释了，可以自行编辑运行一下下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML Crash Course For Beginner</title>
</head>
<body>
<!-- Headings -->
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Headign Three</h3>
<h4>Headign Four</h4>
<h5>Headign Five</h5>
<h6>Headign Sixa</h6>
<!-- Paragraph -->
<p>Lorem ipsum dolor sit <strong>@Lee</strong> amet consectetur, <em>@Lee</em> adipisicing elit. Enim, nisi.</p>
<!-- Hyper Link -->
<a href="https://baidu.com/" target="_blank">Lorem</a>
<!-- Lists -->
<br>Unorderd List:
<ul>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Ordered List
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ol>
<!-- Table 表格 -->
<table border="1">
<thead>
<tr>
<!-- tr: table row 行 -->
<th>Num</th>
<th>Name</th>
<th>Major</th>
<!-- th: table head 表头的内容 -->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lee</td>
<td>Internet Tech</td>
<!-- td: table data 表的数据 -->
</tr>
<tr>
<td>2</td>
<td>Chan</td>
<td>Digital Media Tech</td>
</tr>
</tbody>
</table>
<!-- Form 表单 -->
<br>
<!-- Line Breaker -->
<hr>
<!-- Horizon Line -->
Form:
<form action="form.js">
<div>
<!-- division -->
<label>ID Number</label>
<input type="text" name="ID" placeholder="Enter Your ID Number">
</div>
<div>
<!-- division -->
<label>Name</label>
<input type="text" name="Name" placeholder="Enter Your Full Name">
</div>
<div>
<!-- division -->
<label>Major</label>
<input type="text" name="Major" placeholder="Enter Your Major Course">
</div>
<input type="submit" name="submit" value="Submit">
</form>
<br>
<!-- Button -->
<button>Cancel</button>
<!-- CSS content -->
<div style="margin-top:50px"></div>
<!-- Image -->
<h1 align="center">陈冠希 EDC</h1>
<img style="width:500px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330180105_cpfth.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670838942&t=658425296de05e8ac36908819c0062fe" alt="EDC">
<!-- src:source alt: alternative text -->
<!-- Quotation -->
<blockquote>Life is a fucking movie.</blockquote>
<!-- Hint -->
<p><abbr title="MineCraft">MC</abbr> is the best game in my mind!</p>
<p><cite>Life is a fucking movie! 人生如戏啊 你同我讲</cite> by EDC</p>
</body>
</html>