HTML5学习笔记（2024/3/16更新中。。。）

猫巷123

已于 2024-03-16 21:11:27 修改

阅读量321

点赞数 5

文章标签：学习

于 2024-03-14 23:05:44 首次发布

本文链接：https://blog.csdn.net/weixin_60274198/article/details/136724092

版权

一前序知识

1 了不起的两位先驱

图灵冯诺伊曼

2 计算机基础知识

计算机由硬件和软件组成。

硬件包括 CPU（运算器和控制器），存储器（内存和硬盘），输入，输出设备。

软件包括系统软件（windows等操作系统）和应用软件（微信等）

3 C/S架构和B/S架构

C/S架构---C表示client（客户端），S表示server（服务器）

就是我们常常见到的APP，需要不定期的进行更新，更新期间影响使用，每个操作系统有对应的软件版本，不能实现跨平台。

B/S架构---B表示browser（浏览器），S表示server（服务器）

就是我们常说的网页端，不需要下载指定的软件，更新及时，一次开发，多平台使用，但是安全性不高。

4 浏览器相关知识

常见浏览器有：谷歌，safari，IE，火狐，欧朋浏览器

其中，谷歌浏览器目前占市场份额最大！约占一半左右！

各个浏览器内核不一样，谷歌浏览器目前是Blink内核，safari目前是webkit内核，IE是Trident内核（已经不再维护了），火狐是Gecko内核，欧朋目前也是Blink内核。所以市面上人们管这个叫五大浏览器，四大内核。

二 HTML简介

1 什么是HTML？

全称 HyperText Markup Language （超文本标记语言）

超文本：比普通文本内容更加丰富

标记：加上标记才能成为超文本

2 相关国际组织

INTF：国际互联网工程任务组。

W3C：互联网联盟。

WHATWF：网页超文本应用技术工作小组。

三准备工作

1 打开文件拓展名，任一文件夹，把如图打开。

2 安装谷歌浏览器

官网：Google Chrome 网络浏览器

四 HTML入门

1 HTML初体验

1第一步：鼠标右键=》新建=》文本文档=》输入以下内容

<marquee> 猫巷，嘎嘎帅一个小伙子！</marquee>

2 第二步：修改后缀名为 .html，然后双击打开。

3 会发现，自己写的那行字在一直运动！！！

注意：程序员写的叫做 源代码 ，要交给浏览器进行渲染。如果想要查看网站源代码，可以鼠标右键，然后点击查看网页源代码。

2 HTML标签

1 标签又称之为元素，是HTML的基本组成单位。

2 标签又有双标签和单标签。

2.1 双标签长这个样子：<标签名>标签体</标签名>

<marquee>猫巷，大帅哥!</marquee>

注意：双标签第一个标签名也被叫做起始标签，后一个标签名也被叫做结束标签

2.2 单标签长这个样子：<标签名/>

注意：后面的 / 可以省略不写

<input>

3 标签名不区分大小写，推荐小写，更加的规范。

4 标签之间的关系：并列，嵌套。

4.1 并列举例

<head></head>
<body></body>

4.2 嵌套举例

<marquee>
    猫巷，大帅哥! 
    <input>
</marquee>

注意：嵌套可以用电脑键盘上面的tab键进行快捷缩进

3 HTML标签属性

1 用于给标签提供附加信息

2 可以用在双标签当中的起始标签和单标签中

<标签名属性名="属性值" 属性名=“属性值”>

注意：loop是控制滚动次数，bgcolor是控制背景色，type控制输入数据类型
双标签：<marquee loop="1" bgcolor="green">猫巷，大帅哥！</marquee>
单标签：<input type="password">

3 有一些特殊的属性，没有属性名，只有属性值，例如：

这个属性是让输入框不能进行输入
<input disabled>

4 一些注意事项

标签名不要出现同名属性，否则后写的属性名会失效

例如：<input type="text" type="password">中，输入框的属性依然为text类型，password属性失效

4 HTML基本结构

1 在一个网页中，可以鼠标右键，选择【检查】来查看某段结构的具体代码。

2【检查】和【查看网页源代码】的区别：

【查看源代码】看到的是：程序员编写的源代码。

【检查】看到的是：经过浏览器“处理”后的源代码。

注意：在日常使用中，【检查】使用的最多。

3 网页的基本结构如下：

<html>

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

    <body>
        ......
    </body>

</html>

5 VSCode的安装

1 安装包的安装(不需要下载软件可以直接下载）

https://wwl.lanzoul.com/b01s4taha
密码:i5ns

2 中文语言包的安装

3 调整字体大小

4 设置主题

5 安装图标主题

6 安装Live Server 插件

注意：务必使用VSCode打开的是文件夹，否则live server插件无法正常工作

7 HTML注释

1 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。

2 作用：对代码进行解释和说明。

3 写法：

<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">猫巷，大帅哥！</marquee>

<!-- 下面的文字可以无限滚动 -->
<marquee>猫巷，大帅哥！</marquee>

4 注意：注释不可以嵌套注释

8 HTML文档声明

1 作用：告诉浏览器当前网页的版本。

2 写法：

2.1旧写法：依据网页所用HTML版本而定，写法有很多种。

具体可以参考官方网址（W3C文档声明）W3C QA - Recommended list of Doctype declarations you can use in your Web document

2.2新写法：

<!DOCTYPE html>

3 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。