【前端基础】HTML介绍

最新推荐文章于 2024-01-03 14:18:55 发布

涂山我罩的

最新推荐文章于 2024-01-03 14:18:55 发布

阅读量916

点赞数 2

文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/foyboom/article/details/126918435

版权

这里是目录：

前言

代码小白学习前端，对所学知识的整理回顾，有任何错误欢迎大家指正。

前端的基础HTML、CSS、JavaScript分别代表网页的结构、表现、行为，本文给大家介绍HTML的基础知识。

一、HTML是什么？

Hyper Text Markup Language 超文本标记语言，可以用两个关键词概括重点：标签、结构。（其中超文本指超链接，使用超链接可以从一个页面跳转到另一个页面。）

超文本类型：

图片
表格
标题
超链接

基本语法：

标签（Markup）
属性
实体
注释

二、创建第一个HTML网页

<!DOCTYPE html>
<!--文档声明<! DOCTYPE html>用来告诉浏览器当前的版本，不区分大小写，放在开头。-->
<!--注释中的内容会被浏览器忽视，不被网页直接显示-->
<!--根标签（一个网页中有且只有一个）< html></ html>,lang属性表示language语言-->
<html lang="en">
<!--head里面的内容是给浏览器搜索引擎看的，不显示在页面中-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>第一个网页哈哈哈，猜猜我会出现在哪里</title>
    <!--title标签的内容会作为搜索结果的超链接显示在标题栏-->
</head>
<body>
    <h1>1级标题重要！</h1>
    <p>段落标签，在这里写一些文字</p>
    <a href="#">超链接</a>
    <input type="text"/><!--input也是自结束标签-->
    <button>按钮啦</button>
    <hr><!--hr是一条直线————————————-->
    <div><img src="图片路径"><!--img标签是自结束标签，用来展示图片（image）--></div>
    <h4>4级标题！</h4>
</body>
</html>

三、具体介绍

1.标签

开始标签、结束标签与内容相结合，便是一个完整的元素。

1.1 标签的分类

行内元素（inline element）：主要用于包裹文字
· 只会占用自身大小，不会独占一行；
· a b i em strong span 等都是行内元素；
块元素（block element）：在网页中块元素主要用来对网页进行布局
· 块元素独占一行；
· main h1-h6 p dd ul ol form table div 等都是块元素；
行内块元素（inline-block element）
替换元素（replaced element）
· 可替换元素的展现效果不受CSS影响，它们外观的渲染是独立于CSS的；
· 通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”
· img、input、select、button等都是替换元素
· 替换元素兼具行内元素和块元素的特点
非替换元素（non-replaced element）
· HTML中大多数标签都是不可替换元素，其内容由CSS渲染并直接呈现给用户；
· div、p、h1-h6、table等均为非替换元素；

1.2 标签的嵌套规则

把标签放入其它标签之中被称为标签嵌套
在开发中通常使用块元素进行布局，块元素可以包含块元素和行内元素；
在开发中行内元素通常来选中文字，为文字设置样式，行内元素可以嵌套行内元素，但不建议嵌套块元素；
浏览器在解析页面时，会自动对网页中不符合规范的内容进行修正，比如标签写在了根元素的外部，根元素中出现了除head与body以外的子元素等。
特殊情况：
- p元素（块元素）中不能放块元素，浏览器会对网页自动修正；
- 超链接中可以放任何元素，除了它本身（即：超链接中不可以嵌套超链接）

1.3 标签的语法

成对标签：
<标签名>标签内容</标签名>
例：< h1></ h1>
自结束标签：
<标签名>或<标签名/>
例：< br > < hr >

1.4 部分标签介绍

标题标签：< h1>~< h6>共六级标题，从h1到h6，重要性逐渐递减。h1在网页中的重要性仅次于title
em标签用于表示语音，语调的一个加重。
strong标签表示强调，重要内容。
blockquote标签表示长引用。
q标签表示短引用。
br标签表示界面中的换行。

`2.属性`

可以在开始标签或自结束标签中添加属性来提供附加信息
属性语法：
- 属性名="属性值"
- 部分属性名与属性值相同时可以省略，如readonly、checked
常见属性：
- id
- class
- title：title属性用来指定标签的标题，鼠标移入元素上方会出现提示文字

3.实体

在HTML中，有些时候我们不能直接书写一些特殊符号，因为他们本身有特殊含义。

在HTML中预留了一些字符，这些字符会被浏览器解析为HTML标签
要使用这些预留字符，需在HTML中使用实体（转义字符）
如在网页中编写的多个空格，默认情况会自动被浏览器解析为一个空格。比如字母两侧的大小于号。
实体语法：
- &实体名；
  例：
- <(<)
- >(>)
-  ( )（空格）
实体名称要注意大小写！

4.注释

注释不能嵌套！
作用:
- 可以通过注释来对代码进行解释说明
- 可以通过注释来注释一些不希望被用户看见的内容
养成写注释的好习惯

四、网页的基本结构

1.head部分

1.meta标签

meta标签用来设置网页的元数据，用来对网页进行各种配置，元数据不是给用户看的
charset属性：配置网页的字符集，避免出现乱码现象

SEO 搜索引擎优化：（name指定数据的名称，content指定数据内容）

<meta name="keywords" content="(关键词)">
<meta name="description" content="(页面介绍)">

description用于指定网站的描述（相当于自我介绍）会显示在搜索引擎的搜索结果中
keywords可以同时指定多个关键字，关键字间使用逗号隔开。

2.title标签

title标签中的文字是页面优化最重要的因素，搜索引擎在搜索是最先看到的内容
建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签
网页中有多个页面时，不同页面的title不应该重复，这样不利于搜索隐藏检索

2.body部分

1.语义化

（1）何为语义化？
HTML中的元素、属性及属性值都拥有某些含义，这就是HTML的语义化（传达内容，而非样式）
（2）语义化的好处：
    - 代码可读性
    - 可维护性
    - 搜索引擎优化
    - 提升无障碍性
（3）如何做到语义化：
    - 了解每个标签和属性的含义
    - 思考什么标签最适合描述这个内容
    - 不使用可视化工具生成代码，也不使用现成的网页模板

2.常用标签

(1) 内容分区标签
`<header></header>` - 表示网页或一个块内容的头部
`<main></main> `- 表示网页的主要内容，一个页面只有一个main标签
`<footer></footer>` - 表示网页或一个块内容的底部
`<aside></aside> `- 表示侧边栏
`<nav></nav> `- 表示一个导航
`<section></section> `- 表示一个独立区块

(2) 文本标签

以上内容区分标签为HTML5新增的语义化标签，但不常用；
div标签为成对标签，通常用来表示一个独立的区域，无特殊语义；
不使用CSS时，div的使用对页面的内容与布局没有任何影响；
列表之间可以互相嵌套；
网页有三种列表形式：有序列表（ol）、无序列表（ul）、定义列表（dl）【dt表示被定义的内容，dd对被定义的内容进行描述】；
a标签：
- #：属性值为#，跳转到当前页面的顶部；
- #id：属性值为#+id名，跳转到当前页面指定id的位置；
- target属性：指定打开新链接的位置，_self(默认值，在当前页面打开)，_blank(在新的页面中打开超链接)；
span标签是行内元素，无特殊语义；

(3) 多媒体标签

①图片标签：
- img属性：
  - alt：用来指定图片的描述文字；搜索引擎会根据该描述文字来识别图片。
  - width和height中如果只改一个，另一个会等比例缩放。
- 图片格式：（使用图片格式原则，保证质量的前提下，图片越小越好）
  - jpg 照片色彩丰富，不支持透明效果，不支持动图。一般用来显示照片
  - png 支持的色丰富，支持复杂透明，不支持动图。颜色丰富，复杂透明的图片，专为网页而生。
  - gif 动画、体积大，支持动图。适用于颜色单一的图片，动图。
  - webp 体积更小、兼容性一般，具备其他图片格式的所有优点
  - Base64：将图片使用base64进行编码
②音视频
在不同浏览器展示可能不同，以后用CSS来展示
- audio标签用来向页面中引入一个外部的音频文件< audio src=""></ audio>或< audio controls>可以输入文字说明浏览器是否支持 < source src=""></ audio>
- 音视频文件引入时，默认情况下不允许用户自己控制播放停止
- 属性：
  - controls是否允许用户控制播放

autoplay音频文件是否自动播放

loop音乐是否循环播放

低级浏览器用< embed src="" type="audio大类型/mp3具体格式" width="" height="">可自动播放音频
使用video标签来向网页中引入一个视频
使用方式和audio基本一样
格式：mp4或webm

3.表格与表单

（1）表格：

table标签创建一个表格
table中嵌套tr表示表格中的一行（决定表格行数）
tr中嵌套td表示表格中的单元格：（决定表格列数）
- td标签中使用colspan属性：横向合并单元格；
- td标签中使用rowspan属性：纵向合并单元格；

（2）长表格：（以下标签均成对出现）

<caption>:设置表格标题；
<thead>:表示表格头部，用来放头部的tr；
<tbody>:表示表格主要内容；
<tfoot>:表示表格底部；
<th>:表示表头的单元格；
<tr><td>:与普通表格类似；

（3）表单(form)：

将用户的信息提交给服务器，使用<form></form>标签创建一个表单；
属性：
- action：指定表单提交的服务器地址；
- value：
  - 通过input的value属性可以为文本框设置默认值；
  - 可通过value属性值修改提交按钮与重置按钮中的文字内容；
  - 不需要用户填写的选择框（单选按钮、多选按钮等）必须指定一个value属性，value的属性值会提交给服务器；
文本框
- input标签 type="text";
- 将表单的数据提交到服务器必须要为表单项指定一个name属性；
- disabled属性：设置该文本框不可输入任何内容；
密码框：type="password";
提交按钮：type="submit";
重置按钮：type="reset";
单选框：type="radio";
- name属性：将单选按钮进行分组，name相同则为同一组按钮，相同name下单选生效；
- checked属性：默认选中该选项；
多选框：type="checkbox"；
- value属性代表该选项的名称;
- checked属性：设置默认选中项；
更多input类型：
- type="placeholder"：
  - 与type="text"中设置value属性的区别是当用户输入文字是placeholder中的默认说明文字自动消失而不需要用户自己删除
- type="email"
- type="range"
- type="number":有min和max属性设置数字范围
- type="file"
- type="date"：可以设置min等
- `<textarea></textarea>`设置长文本
下拉列表
- select标签创建下拉列表
- option标签添加列表项
- name属性指定给select标签，value属性指定给option
- selected属性设置默认选项
button
- 普通按钮：type="button"
- <button type="submit">提交按钮
- <button type="reset">重置按钮
- <button type="button">按钮

五、相关知识

1.路径

（1）绝对路径：绝对路径是指文件在硬盘上真正存在的路径。绝对路径是指可以从这个路径上查找文件夹，不管是从外部或内部存取。

（2）相对路径：

相对于自己的目标文件位置。而相对路径则是与它本身相关的，其它地方的档案和路径，则只能在内部存取。
相对路径：./或../开头（./可以省略不写，./表示当前文件所在目录，当前页面就是当前文件）（../表示当前文件所在目录的上一级目录）

六、深入学习HTML

（1）HTML的可拓展性
- 自定义标签、自定义属性
- link标签
- 引入CSS样式：<link rel="stylesheet" href="/example.css">
- 指定Favicon：<link rel="icon" href="/favicon.ico">
- 预先加载资源：<link rel="prefetch" href="/image.png">

(2) HTML的标签规范
- 根据语义而不是样式来选择标签与属性；
- 遵循HTML语法和嵌套规则；
- 使用浏览器中的开发者工具（右键：检查）调试查看DOM树