【HTML】 学习笔记

发布于：2022-12-04 ⋅ 阅读:(232) ⋅ 点赞:(0)

Author: 酷酷的李
软件工程专业 IT男
CSDN: ningnian2018

文章目录

前言

一、准备工作

1、前端开发必备工具

  • Chrome浏览器：必备浏览器 下载地址：https://www.google.cn/chrome/index.html
  • VSCode编辑器：开发工具，编写代码。 下载地址: https://code.visualstudio.com/
  • Xmind Zen思维导图：思维导图 下载地址: https://www.xmind.cn/
  • Typora：markdown写笔记，编写文档 下载地址: https://typoraio.cn/

2、认识网页和网站

什么是网页？

  • 网站中的一页，
  • 网页包含的内容有: 文字、图片、链接、视频、音频等；

网站是什么呢？

  • 网站是由很多个网页组合而成的；
  • 我们前端开发网站，就是编写一个一个的网页，放在一起就成了一个网站；

3、网页的显示过程

  1. 用户在浏览器地址栏中输入一个URL网址
  2. 首页会进行域名解析，将网址解析成一个IP地址，这个IP地址就是对方的服务器地址。
  3. 浏览器会找到对应的服务器地址，向服务器请求静态资源
  4. 服务器返回静态资源给浏览器；
  5. 浏览器对静态资源进行解析就是我们所看到的网页；

4、认识服务器

服务器就长这样：
服务器就长这样

  • 服务器本质上就是类似一台一台的电脑，但是没有屏幕，长的像电脑的主机
  • 这个主机有几个特点: 稳定运行，二十四小时从不关机、没有显示器、一般装的是Linux操作系统
  • 目前公司大部分用的都是云服务器（比如阿里云、腾讯云、华为云）

5、网页是如何制作而成

我们在浏览器中看到的网页是由什么开发出来的呢？

网页的组成是由: HTML标签 + CSS样式 + JavaScript语言编写而成的；

HTML: 网页的结构，搭起个骨架，类似于毛坯房
CSS: 网页的样式，有了样式网页就会变的很漂亮，类似于装修好的房子，
JavaScript: 网页的交互处理

网页的组成

6、浏览器的作用

网页是由html+css+javascript编写而成的，那么这些看起来枯燥的代码，是如何被渲染成漂亮的网页呢？
在这里插入图片描述

  1. 浏览器最核心的部分是渲染引擎，一般也称为“浏览器内核“
  2. 负责解析html、css、js语法，并渲染成用户看到的网页

7、VSCode编辑器插件安装

  • 安装插件步骤:

在这里插入图片描述
在这里插入图片描述

常用插件

  1. 中文插件：Chinese
  2. 颜色主题：atom one dark
  3. 文件夹图标：VSCode Great Icons
  4. 在浏览器中打开网页：open in browser、Live Sever
  5. 自动重命名标签：auto rename tag

VSCode的基本配置

  1. Auto Save 自动保存
  2. Font Size 修改代码字体大小
  3. Word Wrap 代码自动换行
  4. Render Whitespace 空格的渲染方式
  5. Tab Size 代码缩进,推荐2个空格,公司开发项目基本都是2个空格.

二、HTML概念

1、认识HTML

HTML也叫做超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建网页的标准标记语言。

什么是超文本（ HyperText ）？

  • 超文本就是比普通的纯文本要牛逼一点
  • 它不仅仅表示普通的文本，还可以在插入图片、音频、视频等内容；
  • 还可以表示超链接，从一个网页跳转到另一个网页

什么是标记语言（markup language ）呢？

  • 标记语言就是由无数个标签组合而成的语言，我们学习HTML就是学习每个标签的含义
  • 标记也可以理解为标签，每个标签都有它表示的含义
  • 比如<h1>新闻–华为发布新手机</h1>,h1标签的含义就是表示标题，它包裹的内容就是标题

2、认识元素

网页的开发就是编写出一个一个元素组合而成的，元素通常由一个开始标签、内容、结束标签组成，元素它是包含了标签

元素的组成如图所示：

在这里插入图片描述

3、元素的属性

标签的属性如图
在这里插入图片描述

属性的注意点

  1. 属性是成对出现的，格式就是: 属性名=“属性值”
  2. 属性是写在开始标签中的；
  3. 标签上可以同时存在多个属性，属性与属性之间用空格隔开；
  4. 属性之间没有先后顺序之分,谁在前谁在后都没有关系

4、认识单标签和双标签

HTML标签只有两种类型，分别是单标签与双标签

单标签：单标签由一部分组成，它自成一体，例如<br />

双标签：

  • 双标签由两部分组成，分别是“开始标签”和“结束标签”，例如<p></p>;
  • <p>是开始标签，表示一个段落的开始。
  • </p>是结束标签，表示一个段落的结束。

5、元素的嵌套关系

标签的关系分为: 父子关系和嵌套关系，如图所示:

在这里插入图片描述

在这里插入图片描述

6、认识HTML的注释

冷笑话:

  1. 在我写这段代码的时候, 只有我和上帝知道这段代码是什么意思,但是一段时间过后, 只有上帝知道是什么意思了
  2. 在开发网页的过程中，我们需要写出有上千行, 甚至上万行的代码。实现某个功能时，当时写的时候可能思路非常清晰, 但是过段时间就会出现忘记，自己写的代码可能都不记得了。
  3. 在实际工作中, 一个项目通常是由多人共同完成的，那么你就有可能需要使用别人写的代码功能, 别人也可能使用你的代码功能，如果没有注释的话，是很难看懂的，这样就会增大一些沟通成本

什么是注释？

  • 注释就是为一段代码添加解释性和描述性的信息，主要是用来帮助开发人员理解代码
  • 注释是只给开发者看的，浏览器并不会把注释的内容显示到网页中

注释的意义

  • 帮助我们理清代码的思路, 方便以后进行查阅.
  • 与别人合作开发时, 添加注释, 可以减少沟通成本.
  • 可以临时注释掉一段代码, 方便调试

注释的快捷键: Ctrl + /

三、排版标签

1、标题标签 (h1-h6标签)

h标签语法格式

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

h标签特点

  1. h标签是Heading单词的缩写，是头部的意思，通常会用来做标题；
  2. h标签呈现了六个不同级别的标题，<h1> 级别最高，<h6> 级别最低，h1 → h6文字逐渐减小
  3. 文字都有加粗 ，文字都有变大
  4. 独占一行

应用场景: 新闻的标题、网页的logo部分

2、 段落标签 (p标签)

p标签语法格式

<p>段落内容</p>

p标签特点

  1. p元素是paragraph单词的缩写，是段落的意思
  2. 多个段落之间会有一定的间距
  3. 独占一行

应用场景: :在文章的页面中,想表示一个段落，这个时候可以使用p元素，如图所示:

在这里插入图片描述

3 、超连接标签 （a标签）

代码格式

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

标签说明:

  • a标签也可以称为超链接、锚链接
  • a标签点击之后，会从该页面跳转到另一个页面
    在这里插入图片描述

空链接
在这里插入图片描述

应用场景
1.图片链接，很多网站我们会发现点击图片也是可以点击进行跳转的
在这里插入图片描述
2.锚点链接，可以实现跳转到网页中的具体位置
在这里插入图片描述

四、文本格式化标签

1、常用文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果

在这里插入图片描述
strong元素：内容加粗、强调；

  • 通常加粗会使用css样式来完成；
  • 开发中很偶尔会使用一下；

i元素：内容倾斜；

  • 通常斜体会使用css样式来完成；
  • 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；

br元素：换行元素;

  • 开发中已经不使用;

2、标签的语义化

标签语义化

• 根据语义选择对应正确的标签
• 如：需要写标题，就使用h系列标签
• 如：需要写段落，就使用p标签

好处:

  1. 有利于机器解析，对搜索引擎（SEO）有帮助
  2. strong、ins、em、del，表示的强调语义更强烈！

3、实体字符

实体字符描述

  1. HTML 实体字符是一段以连字号（&）开头、以分号（;）结尾的文本字符
  2. 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）
  3. 你也可以用实体来代替其他难以用标准键盘键入的字符；

常见实体字符
在这里插入图片描述

五、媒体标签

1、图片标签 (img标签)

img标签代码格式

<img src="./banner.png" alt="轮播图" /

img标签说明

  1. img是image单词的缩写，是图像、图片的意思；
  2. 单标签

img有两个常见的属性：

  1. src属性：
    source单词的缩写，表示源，是必须的，它包含了你想嵌入的图片的文件路径。
  2. alt属性：有两个作用：
    作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本
    作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

在这里插入图片描述
场景: 在页面中插入图片，在文章中插入图片

2、音频标签 (audio标签)

代码格式:

<audio src="./后来.mp3" controls></audio>

在这里插入图片描述
标签说明:

  1. 音频标签目前支持三种格式：MP3、Wav、Ogg

3、 视频标签 (video标签)

代码:

<video src="./斗破苍穹.mp4" controls></video>

在这里插入图片描述

标签说明:

  1. 视频标签目前支持三种格式：MP4 、WebM 、Ogg

六、布局标签

1、没有语义的布局标签

div和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；

div标签说明:

  • div是英文division的缩写，中文是分配的意思，可以理解成分配一块空间的意思；
  • div一般是作为其他元素的父容器，把其他元素包住，代表一个整体；
  • 用于把网页分割为多个独立的部分；
  • 默认情况下一行只显示一个（独占一行）

span标签说明

  • 用于区分特殊文本和普通文本，比如用来显示一些关键字
  • 如果是普通文本直接写在盒子内部即可，特殊文本比如一些价格就需要用span标签包裹住
  • 一行可以显示多个

2、有语义的布局标签

在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

在这里插入图片描述
以上标签显示特点和div一致，但是比div多了不同的语义

3、列表标签（ul li, ol li, dl dt dd）

在这里插入图片描述
无序列表(ul li):

  1. 列表的每一项前默认显示圆点标识
  2. ul标签中只允许包含li标签,li标签可以包含任意内容

在这里插入图片描述
有序列表(ol li):

  1. 列表的每一项前默认显示序号
  2. ol标签中只允许包含li标签,li标签可以包含任意内容

在这里插入图片描述
自定义列表(dl dt dd):

  1. dl标签中只允许包含dt/dd标签
  2. dt/dd标签可以包含任意内容,dd前会默认显示缩进效果

在这里插入图片描述

应用场景：如新闻列表、排行榜、网址footer底部等
在这里插入图片描述

七、表单标签

1、input系列标签

input标签可以通过type属性值的不同，展示不同效果
在这里插入图片描述
在这里插入图片描述

1.1 input系列标签-文本框

代码格式

<input type="text" />

常用属性

属性名 说明
placeholder 占位符，提示用户输入内容的文字
value 用户在文本框中输入的内容
name 当前控件的含义，提交之后可以告诉服务器接收的数据是什么含义

在这里插入图片描述
1.2 input系列标签-密码框

代码格式

<input type="password" />

input密码框说明

  1. 常用属性（同文本框）
  2. 主要作用是在网页中输入密码，比如登录页面中的密码和确认密码框。

1.3 input系列标签-单选框

代码格式

<input type="radio" / name="sex">男
<input type="radio" / name="sex">女

在这里插入图片描述
input单选框说明

  1. name属性对于单选框有分组功能
  2. 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
  3. 在网页中用于多选一的单选场景

1.4 input系列标签-复选框

代码格式

<input type="checkbox" / name="hobby" checked>打球
<input type="checkbox" / name="hobby" checked>敲代码
<input type="checkbox" / name="hobby">追剧

在这里插入图片描述
1.5 input系列标签-文件选中

代码格式

<input type="file" /> 未选中任何文件

代码效果
在这里插入图片描述

在这里插入图片描述
1.6 input系列标签-按钮

代码格式

<input type="submit" /> 提交
<input type="reset" /> 重置
<input type="button" /> 普通按钮

在这里插入图片描述
input按钮说明

  1. 如果需要实现以上按钮功能，需要配合form标签使用
  2. 用form标签把表单标签一起包裹起来即可

2、button按钮标签

代码格式

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

在这里插入图片描述

3、select下拉菜单标签

代码格式

<select>
	<option>青岛</option>
	<option selected>大理</option>
	<option>重庆</option>
</select>

在这里插入图片描述
常用属性

属性名 说明
selected 下拉菜单的默认选项

注意点: select标签类似于列表标签，第一层只能放置option标签,表示下拉菜单中的每一项.

4、textarea文本域标签

代码格式

<textarea cols="3" rows="5"> </textarea>

代码效果
在这里插入图片描述

在这里插入图片描述
注意点:

  1. 右下角可以拖拽改变文本域的大小
  2. 实际开发时针对于样式效果一般都是用CSS来设置

5、label标签

代码格式 1

<label for="nickname">用户名: </label>
<input type="text" id="nickname"/>

label标签使用方式一:

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

代码格式 2

<label>
	用户名: <input type="text"/>
</label>

label标签使用方式二:

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 使用方式二label标签的for属性和input的id属性就不需要了
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布