【HTML基础笔记】之【前端架构介绍及基础语法】

最新推荐文章于 2024-10-05 09:50:31 发布

AA8j

最新推荐文章于 2024-10-05 09:50:31 发布

阅读量705

点赞数

分类专栏： HTML+JS

本文链接：https://blog.csdn.net/qq_44874645/article/details/119186093

版权

HTML+JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 前端架构介绍

1.1 前端核心技术

网页最主要由3部分组成：结构、表现和行为。
网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
如果把网页比喻成一个人的话，HTML 就是骨架，起到支撑起整个人体框架的作用。而CSS 就是皮肉来修饰美化人体，Javascript 则是关节筋骨使得人体开始活动，实现动态的效果。
简而言之：
- HTML 是网页的结构。
- CSS 是网页的外观。
- JavaScript 是页面的行为。

1.2 HTML 简介

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言：Hyper Text Markup Language。
HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签。
HTML 使用标记标签来描述网页，在后面我们会详细的介绍多种标签来实现各式各样的网页效果。而HTML 文档也叫做 web 页面。
HTML 文档通常以htm 和html 作为后缀名。
Web 浏览器的作用是读取 HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2. HTML 基本语法

2.1 HTML 标签

HTML 使用标记标签来描述网页。
HTML 标签是由尖括号包围的关键词，比如<html>。
HTML 标签通常是成对出现的，比如<b>和</b>，这两个标签称为一个标签对。
标签对中的第一个标签是开始标签，第二个标签是结束标签。
开始和结束标签又称作开放标签和闭合标签。

2.1.1 HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素以开始标签起始，HTML 元素以结束标签终止。元素的内容是开始标签与结束标签之间的内容。而绝大多数HTML 元素可拥有属性，元素属性是直接在标签中进行定义。
大多数HTML 元素可以嵌套（可以包含其他 HTML 元素），层层嵌套达到网页排版效果。HTML 文档由嵌套的HTML 元素构成。
某些HTML 元素具有空内容，也就是没有内容，该类HTML 元素被称为空元素。空元素在开始标签中进行关闭（以开始标签的结束而结束）。<br>就是没有关闭标签的空元素，只需要开始标签而不需要结束标签即可终止（<br> 标签定义换行）。
上述HTML代码中，HTML 元素中嵌套了body 元素，Body 元素中又嵌套了a 元素和br 元素。所以，上述代码中一共有4种标签，3个标签对（<br>不需要闭合标签，在HTML标签小章节中会介绍到）。

2.1.2 HTML 常见标签

下面介绍较为常见，使用较为频繁的网页标签，下述都为开始标签，使用时都需要自行加上结束标签以作闭合。

基础标签

标签	描述
<!DOCTYPE>	定义文档类型。
<html>	定义 HTML 文档。
<body>	定义文档的主体。
<head>	定义关于文档的信息。
<meta>	定义关于 HTML 文档的元信息。
<title>	定义文档的标题。
<script>	定义客户端脚本。

多媒体标签

标签	描述
<img>	定义图像。
<audio>	定义声音内容。
<video>	定义视频。

表单标签

标签	描述
<form>	定义供用户输入的 HTML 表单。
<input>	定义输入控件。
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<fieldset>	定义围绕表单中元素的边框。
<datalist>	定义下拉列表。

链接标签

标签	描述
<a>	定义超链接，远程网站访问。
<link>	定义文档与外部资源的关系。

格式标签

标签	描述
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<br>	定义换行。
<hr>	定义水平线。
<b>	定义粗体文本。
<big>	定义大号文本。
<em>	定义强调文本。
<i>	定义斜体文本。
<pre>	定义预格式文本。
<small>	定义小号文本。

样式标签

标签	描述
<style>	定义文档的样式信息。
<div>	定义文档中的分隔区块。
<span>	定义文档中的节。

表格标签

标签	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元格。（列）

框架标签

标签	描述
<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<iframe>	定义内联框架。

2.2 HTML 注释

注释标签  用于在 HTML 插入注释。
浏览器不会显示注释，但是能够帮助记录HTML 文档。通过注释符可以在HTML中放置通知和提醒信息或者比如标注自己敲打代码的一些思路、注意事项等小提示，让你的网页代码更加清晰易懂。

2.3 HTML 属性

2.3.1 HTML 全局属性

这里介绍的全局属性是可用于为任何HTML 元素赋予意义和语境的属性，面向所有HTML 元素都可用。
而有些标签元素能规定自己的属性，这种属性称为局部属性。比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个，这六个属性只适用于link 这个标签，对于其他标签来说并不具备这六个属性。
但对于全局属性来说，它是适用配置所有元素共有的行为，可以用在任何一个元素身上。

常见全局属性

属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素进行隐藏。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

使用格式

将全局属性直接添加到开始标签内
上述图中的a 标签调用了href 和accesskey 两个全局属性，为两个a 标签（超链接标签）添加了快捷键，按h 键可以直接访问http://www.w3scool.com.cn/html/网站，按c键可直接访问http://www.w3scool.com.cn/css/网站。

2.3.2 HTML事件属性

不同于全局属性，事件型属性是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个HTML 元素时启动一段 JavaScript。
事件型属性通常可以分为以下几类：
- 全局事件属性
- 窗口事件属性
- 表单事件属性
- 键盘事件属性
- 鼠标事件属性
- 多媒体事件属性
- 其他事件属性

2.3.2.1 窗口事件属性

由窗口触发该事件 (适用于 <body> 标签):

属性	描述
onload	当文档被载入时执行脚本
onerror	当发生错误时运行脚本
onfocus	当窗口获得焦点时运行脚本

1、onload

页面结束加载之后触发
定义和用法：
- 属性在对象已加载时触发。
- 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。
可以看到上图1 中的HTML 代码在body 标签中加了onload 事件属性，意味着在body 标签中的内容加载完毕后会触发onload 事件属性中的alert 弹框，效果如图2 所示，加载完页面首先跳出的是弹框，你只有点击“确定”后才能看到原本的页面图3。

2、onerror

在错误发生时运行的脚本。
定义和用法：
- onerror 事件会在文档或图像加载过程中发生错误时被触发。
- 在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
图1 的代码中的img 标签调用了onerror 事件属性，在图片加载错误时就会弹框如图2 所示，在点击确定后就会看到加载后的页面中存在如图3 一样的加载失败的图片样式。

3、onfocus

当元素获得焦点时运行的脚本
定义和用法：
- onfocus 属性在元素获得焦点时触发。
- onfocus 常用于 <input>、<select> 以及 <a>
- 图1 代码中的input 标签引用了onfocus 事件属性，在input 输入框如图2 一样被聚焦时（用鼠标点击输入框时）就会触发onfocus 事件属性中的myFunction() 函数（在script 中进行定义的函数），导致输入框的背景色如图3 变为黄色。

2.3.2.2 表单事件属性

表单事件在HTML 表单中触发(适用于所有HTML 元素, 但该HTML 元素需在form 表单内):

属性	描述
onchange	当元素改变时运行脚本
onsubmit	当提交表单时运行脚本

1、onchange

在元素值被改变时运行的脚本
定义和用法：
- onchange 事件会在域的内容改变时发生。
- onchange 事件也可用于单选框与复选框改变后触发的事件。
- onchange 属性适用于：<input>、<textarea> 以及 <select> 元素。

2、onsubmit

在表单被提交时运行的脚本
定义和用法：
- 所有主流浏览器都支持 onchange 属性。
- onsubmit 属性只在 <form> 中使用。
- 只有在οnsubmit= "return true"时才会发送表单，如果submit= "return false"则不发送表单。
如上图代码可见onsubmit 这一事件属性通常只能在form 标签中使用，表单是否发送就要看confirm 的结果是true 还是false 了。

2.3.2.3 鼠标事件属性

通过鼠标触发事件, 类似用户的行为:

属性	描述
onclick	当鼠标被单击时执行脚本
onmousemove	当鼠标指针移动时执行脚本
onmouseover	当鼠标指针悬停于某元素之上时执行脚本

1、onclick