前端基础01 -- html知识汇总

前言:网页构成

前端的网页构成三要素:html、css、js


1. html概述:

* HTML,即超文本标记语言(HyperText Markup Language ]),由SGML (标准通用标记语言) 发展而来,也叫web页面。扩展名是 .html 或是 .htm 。

* HTML,是一种用来制作网页的标准标记语言。超文本,指的就是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、链接等元素。

* HTML 不是一种编程语言,而是一种写给网页浏览器、具有描述性的标记语言。

简单说:

html是超文本标签语言,程序运行之后负责内容显示、负责网页上有什么显示什么。

比如网页上放一张图片,放一段文字,放一个按钮,都需要使用html标签语言来完成。

一个页面文件一般以html结尾,还可能是htm,php,aspx,jsp等

html文件示例

我们可以在pycarm中新建一个html文件(new -> HTML File),看看效果~

文件新建后,会默认带入html格式

pychram文件上,会自动显示pycahrm、和我电脑上安装的浏览器图标:

写一个简单的html文件并执行

我们删掉上面文件中自带的默认html格式,写一个简单的程序并执行

如下:

<h1>hello, i am html file </h1>

执行html文件的三种方式:

● 在pycharm直接运行代码

● 在py文件中,直接点击右侧的浏览器图标

● 或者在文件夹中找到该py文件 -> 右键打开方式,选择电脑上的任意浏览器

效果如下:

浏览器是html的解释器,负责显示

即便电脑没有网络依然可以直接显示内容,就相当于浏览器打开的是一个本地文件 

html文件注释的格式

在html文件中,注释与pycharm有所不同,默认的注释格式如下:

单行注释:/*  内容  */

多行注释:<!--  内容   -->

2. html文件结构:

为什么要了解html的文件结构?

如果我们像上面一样,把html文件的内容,换成中文,并执行后会怎么样呢?

<h1>hello, 我叫王小明 </h1>

可以看到,文件被执行后,浏览器显示的hell后面的中文,变成了乱码

所以,我们需要遵循html的标准文件结构

●`<!DOCTYPE html>` 告诉浏览器使用什么样的`html`或者`xhtml`来解析`html`文档。

目前基本是html比较通用,所以就无脑的写上html万无一失。

●`<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 `HTML `文档,在它们之间是文档的头部`<head>`和主体`<body>`。    

● <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

● `<title></title>`定义网页标题,在浏览器标题栏显示。

● `<meta charset="UTF-8"> `  声明编码方式用utf8。

● `<body></body>`之间的文本是可见的网页主体内容,可以有很多个body。


 3. html标签语法:

标签的两种形式:

闭合标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

         属性为键值对,可以写若干个属性,多个属性以空格作为分隔

        闭合标签有文本内容


自闭合标签

<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

         属性为键值对,可以写若干个属性,多个属性以空格作为分隔

        自闭合标签没有文本

代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签示例</title>
</head>
<body>

</body>
<h1>小明</h1>     #闭合标签,有</h1>结尾
<h1>帅哥</h1>  
<img src = "">    #自闭合标签
</html>

> 1、HTML标签是由尖括号包围的特定关键词(不能自己随意指定)
>
> 2、标签分为闭合和自闭合两种标签
>
> 3、HTML不区分大小写
>
> 4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性;但有些标签必须带属性,例如src,必须写一个图片源
>
> 5、标签可以嵌套,但是不可以交叉嵌套

标签的分类汇总:

标签分为以下两类

❶ 块级标签(block):特点如下

        ● 独占一行

        ● 可设置长宽

         块级标签有:h1~h6、<p></p>、<div></div>

    

❷ 内联标签(inline):特点如下

        ● 不独占一行,按内容占比

        ● 不可设置长宽

         内联标签有:<b></b>、<strong></strong>、<i></i>、<em></em>、特殊符号、<span></span>

HTML-标签-关键词汇总:

关键词:表示特定含义的一个英语单词

☛ 文字性内容:h1,h2,h3,h4,h5,a,p

☛ 链接:href

☛ 落/块:div,section,nav

☛ 表格内容:tb(表格),li(表格的一行),ul(表格的一格)

☛ 图片/音视频:img(图片),audio(声音),video(音频)

☛ 表单:form(表单),input(输入框),select(选择框),option(选择框)


html基本标签

(1) 标题标签

标题标签,类似word里的标题级数,h1~h6都属于标题标签

<h1></h1>:表示1级标题,最黑最粗的

<h2></h2>:表示2级标题,粗度次之

以此类推,可根据需要选择;

每个h标签都是一个块级标签,独占一行

示例如下:

(2) 换行标签:

我们在编写html文件时,无论有多少个空格、换多少行

执行后,浏览器都只会默认显示一个空格,如下:

so,当我们想要展示出换行效果怎么办呢?

这时候,就需要用到换行标签:<br>即break的简称,效果如下:

(3) 段落标签:

像写作文一样,我们需要分段落展示一首诗,让每行的间隙不那么紧凑

这时候就可以加上段落标签:<p>内容</p>

<p></p>标签也属于块级标签,不仅可以换行,还能时行与行的间隙变大,如下:

(4) 文本格式化标签:

加粗效果

比如:像word中,我们经常会把某些字进行加粗设置

html中也可以进行内容加粗,可以使用:<b></b>、<strong></strong>

它们都属于内联标签,只加粗、不换行

效果如下:

倾斜效果

比如:像word中,我们经常会把某些字进行倾斜设置

html中也可以进行倾斜加粗,可以使用:<i></i>、<em></em>

它们都属于内联标签,只倾斜、不换行

效果如下:

★★标签嵌套:

如果我们想要让内容呈现出又粗又斜,怎么办呢?

此时,就可以进行标签嵌套:

可以在p标签里嵌套i标签,也可以返过来,效果是一样的:

标签嵌套的规则

● 块级标签:可以嵌套块级标签,也可以嵌套内联标签

● 内联标签:只能嵌套内联标签

大部分情况如上

● 特殊情况:p标签例外

(5) 特殊符号:

html中特殊符号非常多,可自行百度查询

上面了解到,html中无论多少个空格,呈现的效果都只会有一个空格

那么,如果我们就想要显示5个空格,怎么办?

加空格:可以使用&bnsp; 几个空格写几个&bnsp;

注册符:可以使用&reg;

效果如下:


 html常用标签

(1) 超链接--a标签:

超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接(<a>标签),是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

例如:我们指定href的值为百度的网址,浏览器中就会显示“百度”两个字,并且带下划线

当我们在浏览器中点击“百度”,浏览器就会自动帮我们访问百度,它会覆盖原来的窗口:

a标签属性

❶ href属性:

● href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是网络连接,也可以是本地连接。
>
● 网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标。
>
● 本地链接跳转指的是本地计算机的地址,一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的,不需要经过网络。
>
●如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面。

❷ title属性: 链接的提示信息   

❸ target _blank:在新建窗口中打开网页

一个简单的超链接实例:

a标签中,除了href,还可以添加其他属性

例如:加上target属性,这样就在浏览器中就不会覆盖原有窗口

(2) img标签:

img标签属性

❶ src属性:
    ● 指定图像的URL地址,是英文source的简写,表示引入资源。
    ● src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
    ● 如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。

>

❷ alt属性:

        ● 指定图像无法显示时的替换文本。

        ● 当图像显示错误时,在图像位置上显示alt的值。

        ● 就是谷歌浏览器中,引入图像失败后,显示了替换文本。

        ● alt属性一般    作为SEO优化的手段之一,所以,使用了img标签就需要加上alt属性。

>
❸ width属性: 指定引入图片的显示宽度。
❹ height属性:指定引入图片的显示高度。
❺ border属性:指定引入图片的边框宽度,默认为0。
❻ title属性:悬浮图片上的提示文字。

远程添加img

当我们想要浏览器中展示一个图片的时候,就需要用到img标签

例如:我找到一张小黄人图片,将图片地址放在src里,打开html文件后即会显示该图片:

还可以再img标签中,添加尺寸设置:

如height:设置高、width:设置宽度

 本地上传添加img

上面的img示例都是从服务器上远程拿到的,为了避免网上图片下架找不到,我们运行乘除后也无法显示,我们还可以从本地上传。

最简单的方式,我们将图片下载下来,把图片与要执行的py文件放在同一个路径下,直接写入图片名即可:

属性alt的作用:当图片地址错误的时候,可以添加报错提示

例如:我把小黄人的地址,少写一个字符,并设定alt提示为“not found”,效果如下:

a标签与img的嵌套:

举个栗子:

我们想要点击小黄人图片的时候,让它跳转到京东

那么只需要在上面的img标签外层加上a标签,并且指定href为京东的url即可:

(3) 列表标签:

前端列表标签分为两种:

❶ ul:(unorder list)无序列表

        展示的效果是:有一个间隔+实心圆+空格

❷ ol:(order list)有序列表

        展示的效果是:每一行内容前有1个索引

li:(list item)表示列表元素,不论是ul还是ol都必须结合li使用,li也不能单独使用

两种列表效果如下:

(4) tabel表格:

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。

●`<table>`和`</table>`表示一个表格的开始和结束。一组`<table>...</table>`表示一个表格。
>
● border用于设置整个表格的边框宽度,默认为0,表示不显示边框。
>
● `<tr>`和`</tr>`表示表格中的一行的开始和结束。一组`<tr>...</tr>`,一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。
>
● `<td>`和`</td>`表示表格中的一个单元格的开始和结束。

通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列,多少的单元格了。

**table属性
属性 描述

width

px、% 规定表格的宽度

height

px、% 规定表格的高度

align

(http://www.w3school.com.cn/tags/att_table_align.asp) 

left、center、right  规定表格相对周围元素的对齐方式

bgcolor

(http://www.w3school.com.cn/tags/att_table_bgcolor.asp) 

rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色
background  url  规定表格的背景图片

border

(http://www.w3school.com.cn/tags/att_table_border.asp)

px  规定表格边框的宽度

cellpadding

(http://www.w3school.com.cn/tags/att_table_cellpadding.asp)

px、% 规定单元格边框与其内容之间的空白

cellspacing

(http://www.w3school.com.cn/tags/att_table_cellspacing.asp)

规定单元格之间的空隙
 
**td属性**

表格中除了行元素以外,还有单元格,单元格的属性和行的属性类似。td和th都是单元格。

属性 描述

width

px、% 规定表格的宽度

height

px、% 规定表格的高度

align

(http://www.w3school.com.cn/tags/att_table_align.asp) 

left、center、right  规定表格相对周围元素的对齐方式

valign

top、middle、bottom   规定单元格内容的垂直对齐方式

bgcolor

(http://www.w3school.com.cn/tags/att_table_bgcolor.asp) 

rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色

background

url   规定单元格的背景图片
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数
简单的tabel表格示例

想要展示单元格合并效果,只需要在其中一行td标签中加上rowspan属性即可:

当然,在实际前端开发过程中,有封装好的方法,可以让表格呈现的更好看,比如CSS

★★★(5) form表单:

表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁。

表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。

当用户输入好数据后,提交时就可以携带表单数据提交到服务器端。

表单的基本组成

一个表单元素有三个基本组成部分:

* 表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。 

>

* 表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

>

* 表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

简单的form表单示例

比如,我们想写一个登陆页面,以form表单形式呈现

以下是加上常用的一些input属性,模拟一个表单注册页面:

在客户端点击“提交”时,是浏览器帮我们按照http协议的格式,将字符串组装键值对:

例如:

input标签中,将{user:输入的小明}组成键值对

input标签中,将{pwd:输入的123}组成键值对

input标签中,将复选框以&组成2个键值对

以post/get请求发给指定的服务器(代码中的ip:端口号) ,服务器验证后返回更新提交页面

常用的下拉框:<selcet><option> 

form标签属性
属性 描述
action 访问服务器地址  服务器端表单处理程序的URL地址
method 默认值:post、get 表单数据的提交方法 
target 参考超链接的target属性 表单数据提交时URL的打开方式 
enctype 默认值]:application/x-www-form-urlencoded 用于文件上传
 text/plain 用于纯文本数据发送 表单提交数据时的编码方式

★★★(6) div标签

div标签概述

iv是"division"的缩写,意为分割或划分。它是一个通用的块级元素,常用于将网页内容划分为独立的部分或容器,使得页面更加有组织和结构化。

基本上网页的标签中div占比90%以上,使用非常高频。

div属于块级标签。

div标签的使用
#包裹在body里面:
<div>好好学习,天天向上!</div>

 div标签的用途

div的用途多种多样,以下是几个常见的用途:

● 布局控制:通过使用div,你可以将网页内容划分为不同的区块,使得更容易进行布局控制。比如,将网页分为页头、侧边栏、内容区域和页脚,可以用不同的div来组织这些部分,并对每个部分进行样式设置。

>

● 样式控制:使用div可以为一组相关的元素应用相同的样式规则。通过给div设置class或id属性,你可以在CSS中选择这些div,并对其内部的元素进行样式设置。这种组织结构能够提高样式的复用性和可维护性。

>

● JavaScript操作:使用div可以更方便地对一组元素进行JavaScript操作。通过选择特定的div,你可以获取或改变其内部的元素,或者为这些元素添加事件处理程序,实现丰富的交互功能。


F12标签/元素查找快捷键

打开开发者工具 -> 元素(element)中,你会发现有一堆密密麻麻的前端代码,如何找到我们想要的东西呢?

>

例如:我们想找到百度首页的input输入框

在元素(element) -> 点击左上角的小箭头 ->只需要滑动网页,它就会自动帮我们定位到对应的input代码行,可以看到有浅灰色标识,同时输入框中也有阴影及标签名显示。

(7) span标签

span标签属于内联标签,没有任何样式

使用效果如下: