前端学习之Html

小王nemo

已于 2022-07-25 11:17:58 修改

阅读量516

点赞数 3

分类专栏：前端学习文章标签： html5 javascript css

于 2022-07-25 09:03:28 首次发布

本文链接：https://blog.csdn.net/wzp123wzp/article/details/125952959

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

web前端

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等

开发架构

C/S 客户端服务器 B/S浏览器服务器
需要下载安装 · 不需要下载
需要更新 · 跨平台好
对网络依赖小 · 不能没有网络
跨平台差 · 相对比C/S慢

server 服务器

处理数据和业务

B/S 运作机制：

前端技术：

HTML /CSS/JavaScript

后端技术：

Java /Python/ go/ rust/ruby/node.js

nodejs是JavaScript的服务端版本

软件开发流程：

idea > 需求 > ui >研发 > 测试 >运维/实施

学习网站

HTML 教程 | 菜鸟教程菜鸟

w3school 在线教程 w3school

MDN Web Docs mdn

互联网的档案馆（好玩的网站，可以查看之前的网站是什么样的）

https://archive.org/web/web.php

HTML的概念

HTML 全称为 HyperText Markup Language，译为超文本标记语言。

HTML 不是一种编程语言，是一种描述性的标记语言。

什么是超文本？

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

HTML是负责描述文档语义的语言

HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。

我们用的 HTML 中的很多“标签对”，这些“标签对”能够给文本不同的语义。

Html 页面的骨架

打开 VS Code 软件，新建一个文件，名叫index.html（注意后缀名是html），保存到本地。

在文件里，输入html:5，然后按一下键盘上的Tab键，就可以自动生成如下内容：

文档声明头

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……>开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。

<!DOCTYPE html>

告知浏览器文档使用哪种 HTML 或 XHTML 规范。

页面语言 `lang`

下面这行标签，用于指定页面的语言类型：

<html lang="en">

最常见的语言类型有两种：

en：定义页面语言为英语。
zh-CN：定义页面语言为中文。

头标签 `head`

meta 标签：

meta表示“元”。“元”配置，就是表示基本的配置项目。

常见的几种 meta 标签如下：

（1）字符集 charset：

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

字符集用meta标签中的charset定义，charset就是character set（即“字符集”），即网页的编码方式。

字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

这行代码非常关键，必写，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”，我们在下一段会详细介绍。

（2）视口 viewport：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ：表示视口宽度等于屏幕宽度。

viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。

（3）定义“关键词”：

举例如下：

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐," />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

title 标签:

用于设置网页标题：

    <title>网页的标题</title>

title标签也是有助于SEO搜索引擎优化的。

HTML结构详解

HTML标签通常是成对出现的，比如 <div> 和 </div>；也有少部分单标签，如：<br />、<hr />和<img src="" />等。

属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

html骨架标签分类

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

HTML的规范

HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)

编写XHTML的规范：

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>

（2）所有的标记都必须小写。

（3）所有的标签都必须闭合。

双标签：<span></span>
单标签：<br> 建议写成 <br /> <hr> 建议转成 <hr />，还有<img src=“URL” />

（4）所有的属性值必须加引号。<font color="red"></font>

（5）所有的属性必须有值。<input type="radio" checked="checked" />

HTML 注释

快捷键 ctrl + /

HTML 注释的格式如下：

<!-- 我是 html 注释  -->

html标签：

标题标签

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align-属性，属性值可以是：left、center、right。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
  </body>
</html>

段落标签`<p>`

作用：可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。

<p> 我是段落标签<br />我是换行标签
	<!-- br换行标签 -->
</p>
<hr>
<!-- 分割线 hr -->
<strong>我是加粗标签</strong>
<small>我是small标签</small>
<center>我是居中标签</center>
<i>我是倾斜标签</i>
<!-- 删除文字标签 -->
<del>我是删除文字标签</del>
<!-- 上标 下标 -->
logs<sub>2</sub> x<sup>2</sup>
<span>我是王智鹏</span>
<div>我是布局div</div>
<!-- 特殊字符  &nbsp;空格 &lt; &gt; 尖括号-->
<div>我要加空格&nbsp;空格</div>
<div>我是尖括号&lt;&gt;尖括号</div>

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p的第一天开始，就要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。

水平线标签`<hr />`

<hr />

水平分隔线：可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

`<div>`和`<span>`标签

div和span是非常重要的标签

div和span的介绍

div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
span标签：和div的作用一致，但不换行。

div和span的区别

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

a标签：

超连接标签 target 打开页面的方 target=“_blank”新建页面打开 target=“_self”在自己页面中打开

title描述按键的行为，把鼠标放上去显示的文字

若要在使用a标签的内部跳转，需要在跳转的位置进行添加id进行绑定。<a href="#id"> </a>

<a title="跳转到贴吧" href="https://tieba.baidu.com/ " target="_blank ">贴吧</a>

超链接的属性：

href：目标URL
title：悬停文本。
name：主要用于设置一个锚点的名称。
target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
- _self：在同一个网页中显示（默认值）
- _blank：在新的窗口中打开。
- _parent：在父窗口中显示
- _top：在顶级窗口中显示

img标签：

src为图像路径（可以为相对路径，绝对路径） alt为图像加载失败或加载不出来展现的文字

相对路径：就是相对于自己的目标文件的位置 ./ 当前目录 ../上一级目录

绝对路径：是指文件在硬盘上真正存在的路径

alt：当图片不可用（无法显示）的时候，代替图片显示的内容。
title：提示性文本。鼠标悬停时出现的文本。

 <img src="./images/iTab-72lej9.png " alt="请刷新 " style="width: 500px; " title="这是帅哥">

audio标签：

controls为控制组件 type为类型

video标签：

controls为控制组件 autoplay 自动播放 muted 静音播放 loop重复播放

<audio controls>
	<source src="./告五人  -  给你一瓶魔法药水_.mp3" type="audio/mp3">
</audio> 你当前的浏览器不支持播放

<video  controls autoplay muted loop>
	<source src="./视频.mp4" type="video/mp4">
</video>浏览器不支持,请更新浏览器.

iframe内联框架元素：

<iframe src="https://www.baidu.com" style="width: 500px;height: 500px;"></iframe>

网页内嵌入另外一个网页

列表：

ul无序列表： type：“suqare” 方点

ol有序列表： type：“i” ，“I"，“a” ,"A"

<ul type="square">
	<li>我是谁</li>
	<li>我是谁</li>
	<li>我是谁</li>
</ul>
<ol type="I">
	<li>你是谁</li>
	<li>你是谁</li>
	<li>你是谁</li>
</ol>

定义列表`<dl>：`

<dl>的子元素只能是dt和dd。

<dt>：列表的标题，这个标签是必须的
<dd>：列表的列表项，如果不需要它，可以不加

备注：dl里面只能有dt、dd 定义列表用法非常灵活，可以一个dt配很多dd。

table标签：

<table border="5">
  <!-- border增加边框 -->
  <!-- 标题 -->
  <!-- tr 代表一行 -->
  <!-- th 代表一个单元格 -->
  <tr>
    <th>姓名</th>
    <th>姓名</th>
    <th>性别</th>
  </tr>
  <!-- 表格内容 -->
  <tr>
    <td>王智鹏</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小王</td>
    <td>21</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小小王</td>
    <td>20</td>
    <td>男</td>
  </tr>
</table>

tr 代表一行 th 表头 td 代表一个单元格

<caption>：表格的标题。使用时和tr标签并列

<table>的属性：

border：边框。像素为单位。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor=""：表格的背景颜色。
background="路径src/..."：背景图片。背景图片的优先级大于背景颜色。
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。

表格单元格合并

colspan：跨列横向合并同行的单元格；

rowspan：跨行纵向合并同列的单元格；

from表单标签：

 <form action="demo.php" method="post"></form>

action: 表单提交数据到后台服务器的地址（url+接口名称）

name：表单的名称，每个表单都有一个唯一的名称，在同一个页面内不能重名

method： post ：后端传递信息（form表单一般使用post）

get ：后端获取信息

get提交和post提交的区别：

GET方式：将表单数据，以"name=value"形式追加到action指定的处理程序的后面，只适合提交少量信息，并且不太安全(不要提交敏感数据)。

POST方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。

input输入框：

<input type="text" name="" placeholder="" size="" maxlength="">

name：表示表单域的name，每个表单元素都应该添加name
placeholder：输入框提示信息
size：输入框的宽度
maxlength：输入框的最大长度

type 属性值：

text：文本输入框
password：密码输入框
submit：表单提交按钮
reset：表单重置按钮
radio：表单单选按钮
checkbox：多选按钮
Email：电子邮件
tel：电话号
data：日期
number：数字
file：文件上传

textarea标签：文本域标签

text 就是“文本”，area 就是“区域”。

属性：

rows=" "：指定文本区域的行数。
cols=" "：指定文本区域的列数。
readonly：只读。

`<select>`：下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

块级标签（独占一行，可以设置上下左右margin）

<!-- 块级 独占一行 -->
<h1>标题一级</h1>
<h2>标题二级</h2>
<h3>标题三级</h3>
<h4>标题四级</h4>
<h5>标题五级</h5>
<h6>标题六级</h6>
<hr>
<p>段落</p>
<blockquote>段落缩进 前后5个字符</blockquote>
<marquee>滚动文本</marquee>
<ul>无序列表</ul>
<ol>有序列表</ol>
<dl>定义列表</dl>
<table>表格</table>
<form>表单</form>
    <div>...</div>

行内块标签（行内元素不能设置宽高，可以设置magin（左右生效）有特例img、input）

<!-- 常用的行内标签 -->
<i>12</i>
<span>123</span>
<strong>456</strong>
<em>789</em>
<a href="">123</a>
<del>456</del>
<label for="">76767</label>
<input type="text">
<img src="" alt="">
<iframe src="" frameborder="0"></iframe>
<button></button>
<sub>2</sub>
<sup>2</sup>
<audio></audio>
<video></video>