HTML5 【第一天】

最新推荐文章于 2024-02-09 05:30:00 发布
最新推荐文章于 2024-02-09 05:30:00 发布
阅读量824 收藏 1
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xs_vae/article/details/124389706
版权
本文介绍了HTML5的基础知识，包括网页的构成、常用的浏览器、Web标准的重要性。详细讲解了HTML的基本语法，如标签、基本结构、图像标签、超链接标签，以及注释和特殊字符的使用。同时，提到了VSCode作为开发工具的使用方法，如安装插件和生成页面结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

网页

网站是在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，需要通过浏览器来阅读。

网页是构成网站的基本元素，通常由图片，链接，文字，声音，视频等元素组成（本质就是一个HTML文件）。一般我们看到的网页常见以 .htm或 .html后缀结尾的文件，因此将其俗称为HTML文件。

HTML

HTML是指超文本标记语言（Hyper Text Marker Language），它是用来描述网页的一种语言。

HTML不是一种编程语言，而是一种标记语言（markup language）。

标记语言是一套标记标签（markup tag）。

“超文本”

  • 可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。

  • 可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成

网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的。

开端人员开发代码 ——> 浏览器显示代码（解析 渲染） ——> 生成最后的 Web 页面

常用的浏览器

浏览器是网页显示，运行的平台，常用的浏览器有IE，火狐（Firefox），谷歌（Chrome），Safari 和 Opera 等。

浏览器内核（渲染引擎）：负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE，猎豹安全，360极速浏览器，百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebKit苹果浏览器内核
Chrome / OperaBlinkChrome / Opera 浏览器内核，Blink其实是WebKit的分支

目前国内一般浏览器都会使用 WebKit / Blink 内核，如 360，UC，QQ ，搜狗等

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织。

为什么需要Web标准？

浏览器不同，显示的页面或排版就有些许的差异。遵循Web标准可以让不同的开发人员写出的页面更标准，更统一。

  • 让Web的发展前景更广阔、

  • 内容能被更广泛的设备访问

  • 更容易被搜索引擎搜索

  • 降低网站流量费用

  • 使网站更易于维护

  • 提高页面浏览速度

Web标准的构成：包括结构（Structure），表现（Presentation），行为（Behavior）三个方面。<结构类似身体，表现类似于外观装饰，行为类似行为动作>

标准说明
结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现表现主要用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
行为行为是指网页模型是定义及交互的编写，现阶段主要学的是JavaScript

Web标准提出的最佳体验方案：结构，样式，行为相分离。

简单来说就是把结构写在HTML文件中，表现写在CSS文件中，行为写在JavaScript文件中。

问题

  • 网页的基本组成

    通常由图片，链接，文字，声音，视频等元素组成。

  • 什么是HTML

    超文本标记语言，用来制作网页的一门语言，由各种各样的标签组成，比如：图片标签，链接标签，视频标签等

  • 常用的浏览器

    IE，火狐（Firefox），谷歌（Chrome），Safari 和 Opera

  • Web标准的三大组成部分

    包括结构（Structure），表现（Presentation），行为（Behavior）三个方面,结构最为重要

标签

HTML语法规范

基本语法

  1. HTML标签是由尖括号包围的关键词，例如<html>

  2. HTML标签通常是成双成对出现的，例如<html>和</html>我们称为双标签，标签中的第一个标签是开始标签，第二个标签是结束标签。

  3. 有些特殊的标签必须是单个标签（极少情况）例如 我们称之为单标签。

标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系：(类似于父子关系)

 <head>
     <title></title>
 </head>

并列关系：(类似于兄弟关系)

 <head></head>
 <body></body>
 <html>
     <head></head>
     <body></body>
 </html>
 ​
 <br />

HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

HTML页面也称HTML文档。

 <html>
     <head>
         <title>标题</title>
     </head>
     <body>
         内容
     </body>
 </html>
标签名定义说明
<html></html>HTML页面中最大的标签，我们称之为根标签
<head></head>文档的头部在head标签中，我们必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体包含文档的所有内容，页面内容基本都是放在body里面的

HTML文档的后缀名必须是 .html或 .htm，浏览器的作用是读取HTML文档，并以网页的形式显示它们

开发工具

VSCode的使用：

  1. 双击打开软件

  2. 新建文件（Ctrl + N）

  3. 保存（Ctrl+S），注意要保存为 .html文件

  4. Ctrl + “+” ，Ctrl +“—”，用来放大或缩小视图。

  5. 生成页面骨架结构，【输入！，加上Tab键】

  6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

VSCode插件安装

第一列第五个为插件安装按钮；

输入需要安装的插件。

“Install”

重启软件/重新加载

插件作用
Chinese (Simplified) Language Pack for VS Code中文语言包
Open in Browser右击选择浏览器打开html文件
CSS Peek追踪至样式
Auto Rename Tag自动重命名配对 HTML / XML 标签

VSCode工具生成骨架标签新增代码

 <!DOCTYPE html> //当前页面使用HTML5版本来显示
 <html lang="en">    //当前文档的显示语言：英文  
 <head>
     <meta charset="UTF-8">  //UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。【这句必须要写】
     <title>hello</title>
 </head>
 <body>
     "Hello world!"
 </body>
 </html>

  • <! Doctype> 文档类型声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页。

    (当前页面采取的是HTML5版本来显示网页)

    • 位于文档最前面的位置，位于<html>标签之前

    • 并不是一个HTML标签，并不属于HTML的一部分，用于声明整个文档，是文档类型声明标签

  • lang语言，用来定义当前文档显示的语言，对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文，这个属性对于搜索引擎有一定作用（提示，警示）

    • en定义语言为英语

    • zh-CN定义语言为中文

  • charset字符串，字符集（Character set）是多个字符的集合，便于计算机识别和存储各种文字。在<head>标签内，可以通过<meta>标签的<charset>属性来规定HTML文档应该使用哪种字符编码。

    charset常用的值有 ; GB2312(简体中文)，BIG5（繁体中文），GBK（简体和繁体中文），UTF-8（万国码）

HTML常用标签

标题标签<h1>-<h6>

<h（head）>，头部，标题。

标签语义：作为标题使用，依据重要性递减。

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

特点：

  1. 加了标题的文字会变粗，字号也会依次变大

  2. 一个标题独占一行

段落和换行标签

<p（paragraph）>，段落

标签语义：用于定义段落，将整个网页分为若干个段落。

<br /(break)>，打断，换行【单标签】

标签语义：强制换行

 <p>段落标签</p>
 <br />

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行

  2. 段落之间有一定的空隙

  3. 换行和段落不一样，换行只是开始新的一行，段落之间会插入一些垂直的间距。

· Alt+Z ：VsCode中自动换行

文本格式化标签

在网页中，有时会需要粗体，斜体，下划线等效果，会用到文本格式化标签，

标签语义：突出重要性，比普通文字重要

语义标签说明
加粗<strong></strong>或者<b></b>推荐使用<strong>标签，语义更强烈
倾斜<em></em>或者<i></i>推荐使用<em>标签，语义更强烈
删除线<del></del>或者<s></s>推荐使用<del>标签，语义更强烈
下划线<ins></ins>或者<u></u>推荐使用<ins>标签，语义更强烈
 文本格式化标签

 <body>
   我是<strong>加粗</strong>的文字
   我是<b>加粗</b>的文字<br />
   我是<em>倾斜</em>的文字
   我是<i>倾斜</i>的文字<br />
   我是<del>删除线</del>
   我是<s>删除线</s><br />
   我是<ins>下划线</ins>
   我是<u>下划线</u><br />
 </body>

<div>和<span>标签

 <div>和<span>标签是没有语义的，是用来装内容的盒子，用来给网页进行布局
 ​
 
<div>大盒子</div>
<span>小盒子</span>

div是division的缩写，表示分割，分区

span意为跨度，跨距

特点:

 <span>标签用来布局，一行可以有多个<span>标签，小盒子
 <div>标签用来布局，但一行只能放一个<div>标签，大盒子
 <body>
     <div>我是div标签，我可以一个人独占一行</div>
     <div>我是div标签，我可以一个人独占一行</div>
     <span>百度</span>
     <span>搜狐</span>
     <span>新浪</span>
 </body>

图像标签和路径（重点）

1 图像标签

 在HTML中，<img>标签用于定义HTML页面中的图像

<img src="图像URL" />

<img(image)>,图像，【单标签】

src是img标签的必须属性（属性可以简单理解为属于这个图像的特征），用于指定图像文件的路径和文件名

图像标签的其他属性:

属性属性值说明
src图片路径必须属性
alt文本替换文本，图像不能显示时显示的文本
title文本提示文本，鼠标移动到图像上时显示的文本
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
 <body>
     <h4>图像标签的使用</h4>
     <img src="img.jpg"/>
     <h4>alt 替换文本 图像显示不出来时用来替换的文字</h4>
     <img src="img1.jpg" alt="这是许嵩"/>
     <h4>title 提示文本 鼠标放到图像上时提示的文本</h4>
     <img src="img.jpg" alt="这是许嵩" title="这是许嵩"/>
 ​
     <h4>width 给图像设定宽度：</h4>
     <img src="img.jpg" alt="这是许嵩" title="这是许嵩" width="500"/>
     <h4>height 给图像设定高度</h4>
     <img src="img.jpg" alt="这是许嵩" title="这是许嵩" height="500"/>
     <h4>border 给图像设定边框</h4>
     <img src="img.jpg" alt="这是许嵩" title="这是许嵩" height="500" border="2"/>
 </body>

图像标签属性注意点：

  • 图像标签可以拥有多个属性，但必须写在标签名img的后面

  • 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开

  • 属性采取键值对的格式，即key=“value” 的格式，属性=“属性值”

2 路径

（1）目录文件夹和根目录

目录文件夹：存放做页面所需的相关素材，比如html文件，图片等

根目录：打开目录文件夹的第一层是根目录

（2）VSCode打开目录文件夹

文件---->打开文件夹，选择目录文件，方便后期管理文件

页面中需要非常多的图片，通常我们会新建一个文件夹来存放这些图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。

相对路径：以引用文件所在位置为参考基础，建立出的目录路径（简单来说就是图片相对于HTML页面的位置）

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级 如
下一级路径/图像文件位于HTML文件下一级 如
上一级路径../图像文件位于HTML文件上一级 如

上上一级路径可表示为： ../../

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径“D:\web\,,,,,,"或完整的网络地址“http://www. ”。

超链接标签

在HTML标签中，超链接标签的作用是从一个页面链接到另一个页面。

1 链接的语法格式

 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像 </a>

a为 anchor 的缩写，意为锚。

相关属性及其作用

属性作用
href【必须属性】用于指定链接目标的 url 地址，当标签使用href属性时，它就拥有了超链接的功能。
target用于指定链接页面的打开方式，其中_self为默认值（在当前窗口打开页面即替换掉当前页面）， _blank 在新窗口打开页面

2 链接的分类

  • 外部链接，必须有http://

<a href="http://www.baidu.com"> 百度</ a>

  • 内部链接，网站内部页面之间的相互链接，直接链接内部页面名称即可

 <a href="index.html"> 首页</a>

  • 空链接

<a href="#"> 首页</a>

  • 下载链接，如果href里面地址是一个文件或者压缩包，会下载这个文件

(地址链接的是文件 .exe 或者是zip等压缩包形式)

  • 网页元素链接，在网页中的各种网页元素如文本，图像，表格音频等都可以添加超链接。

  • 锚点链接，点击链接可以快速定位到页面中的某个位置

     在链接文本的 href 属性中，设置属性值为“#名字”的形式，如<a href="#two">第二季</a>
 找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二季介绍</h3>

 <body>
 <h4>1 外部链接</h4>
 <a href="http://www.qq.com" target="_blank">腾讯 </a>
 <h4>2 内部链接</h4>
 <a href=demo01.html target="_blank">demo01 </a>
 <h4>3 空链接</h4>
 <a href="#">空链接 </a>
 <h4>4 下载链接</h4>
 <a href="img.zip">下载文件 </a>
 <h4>5 网页元素的链接</h4>
 <a href="http://www.qq.com" ><img src="img.jpg"></a></br>
 ​
 <h4>6 锚点链接</h4>
 <a href="#live">主要作品</a>
 <h3 id="live">主要作品页面</h3>
 </body>

HTML中的注释和特殊字符

注释

当需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字时，就需要用到注释标签。

 HTML中的注释以<!--开头，以-->结束

【快捷键：crtl+/ (注释当前行)】

特殊字符

特殊字符描述字符代码
空格&nbsp ;
<小于号&lt ;
>大于号&gt ;
&和号&amp ;
¥人民币&yen ;
©版权&copy ;
®注册商标&reg ;
°摄氏度&deg ;
±正负号&plusmn ;
×乘号&times ;
÷除号&divide ;
²平方2（上标2）&sup2 ;
³立方3（上标3）&sup3 ;
FINE ͮ ͣ ͤ
关注
html学习笔记第一天总结.pdf
10-11
在第一天的学习中，我们首先了解了网页的基本概念。网页是因特网上一系列按照特定规则制作的HTML文件集合，用于展示特定内容。这些内容可能包括图片、链接、文字、声音和视频等元素。网页通常以.htm或.html文件形式...
Typora使用技巧 | 各种跳转 【必备】
热门推荐
想要腹肌的熊的博客
12-04 3万+
关于Typora使用的各种跳转，比如页面内任意位置跳转
Android移动应用开发之界面跳转以及数据传输
学习笔记
09-21 2302
绑定展示demo界面，获取按钮绑定返回原界面的事件。主要实现的功能就是点击按钮能够实现界面的跳转。绑定展示主界面，获取按钮绑定跳转事件。自己创建一个界面，用于跳转。创建好此类记得申明一下。主界面，包含一个按钮。
html调用其他文件_文件夹路径
blackvulture的博客
07-11 1441
当在一个HTML中调用其他的HTML时，默认主文件夹是主HTML的文件所在目录，其他调用都应在这个目录之下。
如何引入html文件,html如何引入其他html文件
weixin_30359737的博客
06-15 766
在做前端的时候我们也许不会意识到要用到这方面技术，因为我们都是从头至尾把一个页面实现就行，但是这个html拿到后端人员的手上，首先要讲网页拆分成多个单独的模块，然后直接调用就行了，比如说一个普通的门户网站，就得把header，footer，leftSidebar，main分成几个部分，基本上头部和底部都是公用的，就不用每个页面都去重写，了解过后台开发的同学必然知道，在类似asp网页上，调用只需,而...
多文件夹下的资源导入和页面跳转
flykoala
01-23 905
为了演示，我新建了一个eclipse下的web工程，如图 一.资源导入，以导入js文件为例 根目录下的页面导入资源 依次以文件夹递进的方式导入，比如根目录下的index.html导入jsfile/adminjs/ad1.js 直接可以这样写，&lt;script type="text/javascript" src="jsfile/adminjs/ad1.js"&gt;&lt;/scr...
利用html5技术加载天地图
09-16
标题“利用HTML5技术加载天地图”涉及到的是在现代网页应用中如何集成并展示天地图这一地理信息系统（GIS）的服务。HTML5是超文本标记语言HTML的第五个版本，它引入了许多新特性，使得Web开发者可以创建更丰富、更具...
html第一天笔记.pdf
04-02
3. **HBuilder工具介绍**：HBuilder是一款非常高效的前端开发工具，它支持HTML5、CSS3、JavaScript等语言，并具有代码提示、快速编译等功能，适合快速开发和调试HTML页面。 #### 四、HTML基本标签及用法 - **标题...
HTML5+CSS3笔记（Xmind格式）：第一天
最新发布
08-02
它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。 - section：定义文档中的节（section、区段） - footer：定义文档或节的页脚 - datalist：标签定义选项列表。...
html基础知识总结-第一天
08-18
HTML 基础知识总结的第一天，主要涵盖 HTML 基础语法、标签的分类、网页组成、标签的关系、注释、标题标签、段落标签、换行和水平线、文本格式化标签、图像标签、路径、超链接标签、音频和视频等知识点。 HTML 基础...
【前端就业课 第一阶段】HTML5 零基础到实战（二）超链接
1_bit 的博客
01-24 2381
为了不影响阅读目录在最下面 注意：手机（APP）打开，内容显示更佳，不会的私聊博主即可 想要拿代码的拉到最下面加博主即可，目录也在最下面 一、外部资源超链接 ????小媛：这一节咱们学一些什么？ ????1_bit：这一节咱们讲解一下超链接，超链接在第一节中我们已经有过一些了解，指当前区域（空间）或其他区域（空间）的内容。例如咱们现在做一个超链接，点击该链接跳转到某一个页面之中。 ????小媛：那应该怎么做呢？ ????1_bit：这个时候我们只需要使用对应的标签即可。在HTML中不同的标签有不同的功能，在
HTML页面自动跳转的五种实现方法
YoungerChen的专栏
10-27 1051
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。 <br />1）html的实现view plaincopy to clipboardprint?<head>  <meta http-equiv="refresh" content="5;url=hello.html">  </head>  <br /><head> <meta http-equiv="refresh" content="5;url=hello.html"
HTML 超链接
qq_46405281的博客
07-29 2509
相对路径、绝对路径、HTML 链接标签、锚点链接、空链接、下载链接
HTML的路径及其超链接
aimnr的博客
10-25 4361
1.路径 （1）目录文件夹和根目录 目录文件夹：就是一个普通的文件夹，用于存放素材 根目录：打开目录文件夹的第一层就是根目录 （2）相对路径 一引用文件所在位置为参考，基而建立出的目录的路径 简单来说：你引用的文件相对于HTML文件的位置 ...
批量导入文件夹到另一文件夹_使用HTML导入将HTML文件包含到另一个文件中
cune1359的博客
06-27 931
HTML是构成网页的标准语言，但是要扩展或维护它并不容易。 我们需要另一种语言作为使我们能够动态生成HTML的层。 HTML导入是一个新的标准模块，旨在使HTML更加灵活。 HTML导入允许我们将一个HTML文件包含到另一个HTML文件中。 我们还可以访问和重用其中的内容。 这是一个令人兴奋的新功能，可能会在未来十年内（也许）改变我们构建HTML的方式。 但是，在撰写本文时，HTML ...
前端基础：同页面不同区块跳转的三种方式
huangfengnt的博客
10-19 3016
前端基础：同页面不同区块跳转的三种方式
HTML 基础知识：HTML 链接
新华编程特战队
02-09 4030
本文介绍 HTML 中的链接、其实现、属性和类型。我们还将学习如何在 HTML 中使用不同的标签和元素作为链接。
在HTML文件中引入其他文件的方式
continueLR的博客
11-09 4347
按照引入的位置，可分为3种类型 第一种，在标签内，也可以说签内引入。 1.在HTML文件中引入css样式，在标签内的方式叫做内联样式，又叫行内样式 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML中引入CSS样式的第一种方式：内联定义方式</title> </head> <body> &lt.
如何使用script跳转同路径下的子路径--html
weixin_35753291的博客
12-27 399
要在 HTML 中使用 script 标签跳转到同一路径下的子路径，可以使用如下方法： 使用相对路径：在 script 标签中使用相对路径，如 "./子路径/文件名.html"。 使用绝对路径：在 script 标签中使用绝对路径，如 "/子路径/文件名.html"。 例如，如果要跳转到同一路径下的子路径 "subpath" 中的文件 "page.html"，可以使用如下代码： <s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值