HTML常用基础内容总结

一、对HTML的感性认知

前置知识

什么是web前端，什么是web后端

Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-szMeFCaj-1677379015433)(F:\typora插图\image-20230225165204809.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LefFZ28F-1677379015434)(F:\typora插图\image-20230225165220278.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7OIEgiJN-1677379015435)(F:\typora插图\image-20230225173001750.png)]$

前端技术栈、后端技术栈

前端技术栈

主要使用三个编程语言：HTML+CSS+JS(即JavaScript)

HTML+CSS不是通常意义上的编程语言，他俩不能表示逻辑，只是表示一些属性，不能描述干了什么。

HTML：描述了网页的骨架。【骨】

CSS：描述了网页的样式（形容词）【皮】

JS：描述了网页的行为（如何和用户交互）【魂】

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T54TBHst-1677379015435)(F:\typora插图\image-20230225170740756.png)]$

后端技术栈

上古时期：CGI技术
PHP、Java崛起：LAMP体系（Linux、Apache(http服务器)、MySQL、PHP） (java的JSP)、（微软的ASP）
模板引擎技术、Spring崛起：SSH【python\ruby跟进】
前后端分离：SSM（Spring全家桶）、GO崛起

完成前后端的开发，只有语言是不够的，还需要搭配一些框架~~

开发与运行的区别

开发是在程序员电脑完成的，写代码的过程。

运行是在用户的电脑上完成具体的程序跑起来的过程。

那就意味着开发和运行时相互独立的，以后工作中上基本都是一次开发，N次运行。

浏览器的功能是什么

解析运行网页，给HTML、CSS、JS代码提供稳定的运行环境。

一般用户电脑都没装jvm，但是都会装浏览器。（∴前端代码不愁运行环境）

简介

HTML，即Hyper Text MarkupLanguage，是一种超文本标记语言。顾名思义，这种语言可以表示很多形式的信息，不仅限于文本。

它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

**超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。**这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

写一个简单可运行的的html代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-215Tpnsf-1677379015436)(F:\typora插图\image-20230225171436715.png)]$

浏览器执行html代码，最终浏览器以汇编的形式在cpu上边运行。

这里的浏览器就像jvm一样，java代码是在jvm上执行的，jvm最终还是在CPU上以汇编的形式执行的。

前端开发方式

1.使用笔记本：但是效率太低，内部比较简陋

2.当前主流的：JB系列（收费）或者VSCode（轻量级开发工具）

这里我们使用免费的vscode，由于下载安装比较简单，就不再演示。但是注意一个点，要学会找正版的官方的，看主域名即可： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Xrcc51l-1677379015436)(F:\typora插图\image-20230225174100107.png)]$

二、VSCode的简单使用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-re6gzq71-1677379015436)(F:\typora插图\image-20230225181243334.png)]$

部分代码的自动生成方法：

英文感叹号+tab键/enter键，之后我们再向body里边填充即可。

更简单的方法直接标签名+tab。

这个叫做emmet快捷键、一般主流的开发工具都有。

这里我们解析一下这些代码的含义：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QaXB4Bet-1677379015437)(F:\typora插图\image-20230225182541948.png)]$

三、常用的HTML标签

上边的html代码虽然可以运行，但是并不是特别规范。下边我们介绍它如何规范。

同时可以发现，浏览器对html的语法检查不严格。这里体现了浏览器的鲁棒性。

最最基本的HTML结构

html标签：是html文件最顶层标签。相当于一个树根节点。

head标签：存放了这个页面的一些属性。（eg.文件的大小、修改时间……）

body标签：存放了这个页面包含哪些内容。（eg.文件里具体的内容，hello world）

HTML代码特点

html代码是通过标签来组织的。

标签：形如用尖括号组织，成对出现的东西就是标签（tag）/元素(element).【这里的斜杠是正斜杠】
一个标签通常是成对出现的，但是也存在单个出现的，例如meta标签
标签是可以嵌套的。一个标签的内容可以是一个或者多个标签。他们可以构成树形结构
可以在开始标签中，给标签赋予属性（attribute）。属性相当于是键值对，可以有一个或者多个。

拓展阅读：xml和html的区别

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXcTKTki-1677379015438)(F:\typora插图\微信图片_20230225183256.jpg)]$

注释标签

快捷键：ctrl+/。

【如果发现按了没反应，可以尝试更改键绑定，重新设置成ctrl+/】

<!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>
    <!--这是一条注释-->
    hello world
</body>
</html>

注释在运行界面不会显示，但是右键查看网页源码是可以看到的。所以不要乱写，不然等着被炒鱿鱼吧…

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI97AdEx-1677379015438)(F:\typora插图\image-20230225184129490.png)]$

java文件编译成.class文件不带注释。浏览器的程序都是浏览器从服务器获取的代码在用户浏览器上跑，容易泄露敏感信息

标题标签

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

全部手写|h1+tab/enter

ctrl+enter可以直接跳到下一行开始

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uXEzuZH3-1677379015438)(F:\typora插图\image-20230225185439752.png)]$

注意：

在html中，标签是否换行，和代码的编写无关，而是跟标签本身有关。

（有的标签独占一行，有的不独占）

在html源码中，换行会被忽略；多个空格会被忽略或者视为一个。

段落标签

<p></p>

lorem+enter/tab可以自动生成测试文本

之后再多复制几份

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gUQvZpUU-1677379015439)(F:\typora插图\image-20230225191102995.png)]$

换行标签

</br><!--规范写法-->
<br><!--可以但是不建议-->

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7sUwIUR-1677379015439)(F:\typora插图\image-20230225191348710.png)]$

格式标签

<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

这四种格式，每个都有两种方式

加粗:	strong 标签和 b 标签
倾斜:	em 标签和 i 标签
删除线	del 标签和 s 标签
下划线	ins 标签和 u 标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBe1GqUo-1677379015440)(F:\typora插图\image-20230225191824490.png)]$

图片标签

img 标签必须带有 src(source) 属性. 表示图片的路径 .这个路径可以是本地的绝对路径、也可以是相对路径、还可以是网络路径。

<img src="MountTai.jpg">

此时要把泰山.jpg 这个图片文件放到和 html 中的同级目录中

绝对路径：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PD8AwCIz-1677379015440)(F:\typora插图\image-20230225192629545.png)]$

相对路径：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Z88nYEL-1677379015440)(F:\typora插图\image-20230225192909749.png)]$

这里去复习相对路径的写法！！

网络路径：

注意这里是右键复制图片地址

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mgkuIgbl-1677379015441)(F:\typora插图\image-20230225193518536.png)]$

img的其他属性：

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UCcEq62R-1677379015441)(F:\typora插图\image-20230225193909238.png)]$
title: 提示文本. 鼠标放到图片上, 就会有提示.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hySbQbSa-1677379015441)(F:\typora插图\image-20230225194045837.png)]$
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6hiRAxEv-1677379015441)(F:\typora插图\image-20230225194216643.png)]$

其中，px是像素，是前端开发中最常用的单位，当然也有别的单位（相关词：分辨率、小灯泡、横向、纵向、小灯泡的个数）
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

超链接标签

（链接就是快捷方式。超链接：内容跳转超出当前网站）

href: 必须具备, 表示点击后会跳转到哪个页面.【Hypertext Reference超文本引用】
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UeuGWln4-1677379015442)(F:\typora插图\image-20230225194804832.png)]$

target的效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5OdszcDb-1677379015442)(F:\typora插图\image-20230225195212005.png)]$

当然，这里的herf的值也可以是ip地址，但是很少这么干。

表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MfJB7iIl-1677379015442)(F:\typora插图\image-20230225201354458.png)]$

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.这些属性都要放到 table 标签中.

border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.

width / height: 设置尺寸.

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPGGW6oz-1677379015443)(F:\typora插图\image-20230225201637703.png)]$

===========================================

align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)

cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素

列表标签

主要使用来布局的. 整齐好看.

无序列表[重要] ul li , .
有序列表[用的不多] ol li

其中ul是unordered list，order list,li就是List

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSe9wJX8-1677379015443)(F:\typora插图\image-20230225202219153.png)]$

在浏览器中，按下f12/右键->检查元素，就可以打开浏览器的“开发者工具”，借助这个工具就可以看到这个页面是怎么实现的。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nMh5D9fx-1677379015443)(F:\typora插图\image-20230225203322069.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vBMGE1Mw-1677379015444)(F:\typora插图\image-20230225203410048.png)]$

表单标签

主要是从用户端获得输入。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签

form标签

使用form进行前后端交互。把页面上，用户进行的操作/输入提交到服务器上边（之后结合http协议更容易理解，故此处不展开）。

input标签

有很多形态，能够表现成各种用户用来输入的组件/控件。例如单行文本框, 按钮, 单选框, 复选框.

type(必须有), 取值种类很多, text（单行文本框），password（专门用来输入密码的单行文本框）， radio（单选按钮，对于单选框需要加个nam属性，name属性相同的单选框，值之间是互斥的）、checkbox（复选框），checked(为选项提供默认值)、button（按钮形状，可以加个value属性（文字）,这之后需要js进行搭配对应的交互行为）, submit，外表和button差不多,但会触发form和服务器交互。file(文件选择框，弹出一个框框)
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

    <input type="text"> -->
    <!-- 1.文本框 -->
    <input type="password">
    <!-- 2.密码框 -->
    <input type="text">
    <!-- 3.单选框 -->
    <input type="radio" name="sex">男
    <!-- 4.复选框 -->
    <input type="radio" name="sex" checked="checked">女
    <!-- 5.普通按钮 -->
    <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
    <!-- 6.提交按钮 -->
    <input type="button" value="我是个按钮">
    <!-- 7.文件选择框 -->
    <input type="file">

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-55CoPADU-1677379015444)(F:\typora插图\image-20230225205349451.png)]$

select下拉菜单

    <select>
        <option>北京</option>
        <option>上海</option>
        <option >深圳</option>
        <option>广州</option>
        <option>杭州</option>
        </select>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UOUxWTW2-1677379015444)(F:\typora插图\image-20230225205757482.png)]$

textarea多行编辑框

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ean9uZe-1677379015445)(F:\typora插图\image-20230225205930963.png)]$

这些标签也成为空间，构成一个图形化界面的基本要素。

无语义标签

无语义标签其实就是万能钥匙，可用在各种场景。这里主要是div和span,其中div 是 division 的缩写, 含义是分割，span 标签, 含义是跨度。区别：div默认独占一行，span默认不独占一行。

其实相较于上边的，这两个用的会更多些。