HTML5快速入门

最新推荐文章于 2024-04-24 18:49:11 发布

m0_58982887

最新推荐文章于 2024-04-24 18:49:11 发布

阅读量841

点赞数 19

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_58982887/article/details/136762535

版权

简介

HTML5是HTML的新标准，对于日益发展的科技，人类对于信息的获取更加便捷，传统的HTML只能对文字、图片、图标进行展示，HTML5新增音视频的展示，推动了短视频时代的发展！

如今的网页不再是旧时代的报纸！

HTML属于前端技术，即呈现在用户面前的编程语言。

每日豪言壮语

学习，不能强迫，必须是自发的，

自己对这个东西感兴趣，就去做，

不管眼下能否用到，终有一天你会感谢曾经努力的自己！

工具

教程：HTML 教程 | 菜鸟教程

工具：HTML/CSS/JS 在线工具 | 菜鸟工具

工具效果：实时展示网页样式，缺点不会代码补全。

正文（学习笔记）

课程笔记要点

HTML是一种标记语言，对于数据的处理并不着重，所以字符不再需要引号来包裹。

给标签属性赋值是需要用引号包裹的，路径使用 / 。

在使用VS code编辑时可以安装Live Preview插件来实时看到网页效果（如下图所示）。

标签，用来声明标签里元素的等级或位置，比如有 h1 h2 h3 其中h1在排列时会高于其它两个，h1的字体在没有给定属性时会大于h2

可以存在相同标签，相同标签样式、大小一样。

浏览器是将HTML标签解释，展示给用户，达到信息的传递。

该标记语言不区分大小写，推荐用小写来编写。

当我们遇到不懂得语法，不知道如何显示图片，最简单得办法就是抄，打开浏览器，随便找个和自己需求一致的网页，鼠标右键检查，查看该网页的代码结构，通过学习，我们可以让自己如虎添翼！快速成长！

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

段落和换行是不一样的，段落会比换行的间隙要大

注释

写什么语言肯定不能少了注释啊

文件格式

两种文件格式，后缀分别为HTML和HTM，两种文件通用，并无编码上的区别。

文件编写框架

一个正确的HTML文件应包含以下格式

第一句声明文档为HTML5格式，

声明文档的起始和结束，

头部元素包含文件的编码格式，标题等，

下面就是要呈现的元素。

图形化展示

其中body中的内容会图形化的展示在用户眼前，其它的用于告诉浏览器一些信息。

标签介绍

<h1>

标题标签用<h1>来表示，不能超过h6，数字越大标签会越来越小；

标题很重要，搜索引擎会根据标题来搜索（<h1>），会在标题下显示网页的内容（<h2>）

当我们熟悉了之后会发现，h1标题是6号字体，h6标题是1号字体。

<p>

段落用<p>来表示，段落可以用来区分多个文章，或用来分行，可以理解为回车。

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

在段落标签内，元素中如果存在换行或空格会被解释为1个空格，并不会按照编写时的样式呈现给用户。

从蓝色光标可以看出来，逗号后面只存在一个空格。

<a>

链接可以用<a>表示，用于跳转网页，最常用的标签，我们的网站就是通过多个网页组成在一起，每个用户根据需求跳转不同的网页，完成信息的传递。

给a标签的href属性赋值，来指定跳转的网址，注意网址是需要用双引号包裹的。

使用实例

可以跳转外部链接，也可以是自己电脑的文件，本地文件注意地址间的 / 要是反斜杠。

显示效果

默认情况下，未被点击的链接是蓝色文本带下划线；

被访问过的呈紫色文本带下划线；

点击时呈现红色文本加下划线。

如果超链接设置了CSS样式，以CSS为准。

在a标签内输入文本，可替代原来的网址，呈现文字描述。

链接不一定是文本，在我们浏览网页时，图片也可以是链接，在a标签内，创建img标签，以显示图片。

属性（红色必填）

href ：要指向的网址；

target ：选择当前页面打开（给定 _self ），开始新标签打开（给定 _blank ）；

title ：鼠标悬浮时出现的提示文字；

rel ：如果链接目标不可信，则设置noreferrer，防止该链接目标对本页面进行操作。

nofollow具体参考noopener, noreferrer 及 nofollow 的用法

id ：每个标签都可以拥有id，我们也可以通过a标签引用其它标签的id，使网页跳转到指定标签的位置（可以理解为书签or目录）。比如我们刷淘宝时，浏览了很多商品，右下角有个返回顶部的按钮，功能类似。

还可以在网址后面加上id，直接跳转对应标签。

<a href="#tips">访问有用的提示部分</a>
<a id="tips" href="https://fanyi-cdn.cdn.bcebos.com/static/cat/asset/logo.2481f256.png">有用的提示部分 </a>
<a href="https://www.runoob.com/html/html-links.html#tips">
    访问有用的提示部分</a>

调用邮箱

点击链接可以唤醒邮箱程序。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

<img>

图片用<img>表示，通过给src属性赋图片链接，路径要使用 / 并用双引号包裹。

可以给width、height赋值改变图片的大小

属性

alt ：在图片未被加载时的替代文本。

border ：给图片加上黑色边框，输入边框的大小，如：border = "10"；

根据点击图片位置指向不同的地址（链接）

map标签里的坐标对应鼠标点击的位置

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

测试网址

自闭合标签

某些标签不需要 / 来表示闭合，这种属于自闭合标签，比如<br>，该元素达到换行的效果。

即使有些标签可以自闭合，我们也要养成闭合的习惯，防止遗漏和不兼容导致不必要的排查。

<br>

在标签中的元素间使用

<hr>用于添加水平线

在标签中的元素间使用，也可以单独在标签外使用

元素

元素定义

<h1>标签内被叫做元素</h1>

某些元素可以为空

元素中可以嵌套元素，就像Python中多个IF嵌套一样。

属性

每个标签都有属性，属性决定了他的展示效果，比如图片的大小，文字的大小、阴影、颜色、加粗等一系列的效果。属性一般描述在开始标签内部，即<img src = "图片路径" > </img>

class可以定义一些基本属性，比如我先声明一个class类其它元素去使用时可以继承该类的样式，可继承多种样式（class）。

id 定义元素唯一的id，全局唯一。

style 规定元素的行内样式。

title 描述元素的额外信息，比如你将鼠标悬浮在网页图片上，会出现一行描述文字，就是title属性的值。

文本格式化

我们可以通过代码使文本呈现不同的效果，以达到突出重点，或让废话不那么夺人眼球。

strong 加粗

b 加粗

em 字体倾斜

i 字体倾斜

cite 字体倾斜

sup 文字上标

sub 文字下标

pre 标签内的元素，写出来什么样就呈现出来什么样，浏览器不会将原来的空格和换行忽略掉。

address

专门用于写地址的标签，如邮箱的后面都会带发件人信息。

蓝色字体指向的就是标签a的地址。

title

这路的title并不是指的网站的title，而是标签的属性，当我们的网页元素使用缩写时，有些人可能无法理解，当用户将鼠标悬浮在该元素上时会显示标签的title属性。

当鼠标悬浮在www上面时出现提示！

bdo

改变dir属性的值，可以改变文字方向

<q>

引用标签，在元素内使用后被q标签包裹的元素会被打上双引号，以增加突出感。

我们观看原代码并没有发现引号，是q标签的作用。

del & ins

删除线和下划线

HTML头部

base ：我们可以在文件头部声明一些默认值，比如网页链接的相同部分，避免我们在程序中写多余的地址信息。还可以写一些标签的默认属性，如果没有在标签内声明，会去base里面找。

meta ：

在里面存储一些网站的信息，如网站作者、网站功能、网站介绍。可以指定网页30s刷新一次。

<meta http-equiv="refresh" content="30">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>
</html>

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

CSS

使用CSS层叠样式表，可以达到多种背景叠加在一起，达到美观的效果。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>Look! Styles and colors</h3>

<div style="letter-spacing:12px;">Manipulate Text</div>

<div style="color:#40B3DF;">Colors
<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
</div>

<div style="color:#000000;">and more...</div>

</div>

</body>
</html>

以上面的代码为例，会绘制处带有样式、文字重叠的画面，如下图。

我们可以在上面的代码进行修改，并在VS code中打开实时预览，来查看修改后的变化。

当我们将opacity属性将原来的0.2改成5后，发现右侧的画面从原来的透明变成了非透明，是因为我们将不透明度放大了。

可以自己动手测试一下，每个属性都有对应的相应。

对标签进行指定样式

对于CSS我们还有一种方式来控制样式，在下面的代码中，我们在head结尾前声明了一个style标签，在里面通过名称来指定标签的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
	background-color:#d0e4fe;
}
h1 {
	color:orange;
	text-align:center;
}
p {
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

</body>
</html>

效果

通过上方代码我们指定了body的background-color（背景色）属性为#d0e4fe；

h1标题为颜色为orange，文字步距为居中；

p标签字体样式为Times New Roman，字体大小为20.

两种方式都可以达到修改画面呈现的效果。

当然如下代码，每个标签都有style属性，可以按需设置。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>

外部样式CSS

我们可以将CSS单独写一份文件，来使工作更加适应对应的人员，我们只要在文件内引用即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

上面这个代码是抄的菜鸟教程的代码，引用的是服务器的文件，在本地跑是显示不出来的。

效果图

看完上面的代码，我们如果要实现自己的样式，可以通过搜索style的帮助文档来查看都可以修改哪些属性。

表格

在网页上绘制表格，单元格会自动适应文本长度。

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

border是单元格的边框，不声明或将border设为0，可实现无边框；

每个table代表一个工作表；

tr标签是table row 代表单元格行，每个tr代表一行；

td标签是table data 代表单元格内数据，多个td标签等于多个单元格。

效果如下

tr内还可以使用th来声明标题；一般浏览器会将标题加粗后居中；

在td或th标签属性中给colspan赋值可以改变单元格的宽度，2即是将两个单元格合并；

rowspan是上下合并。

表格套表格

表格里面也是可以嵌套表格的。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

效果

边距设定

通过在table标签内声明属性cellpadding="10"，来控制单元格边距。

单元格间距

在table的属性中将cellspacing="10"即可调整边距。

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚