前端基础一之HTML篇

网友投稿 786 2022-05-30

@[toc]

题外话

前言

身为一个合格的后端开发人员

前端的基础知识也是需要了解的

1. 网页

W3C规定网页由三部分组成:结构,表现,行为。

结构指的就是HTML

表现指的是CSS

行为指的是JavaScript

这是网页的三部分,是由万维网联盟W3C规范的。

这节我们就来学习HTML,网页的结构。

1.1 什么是网页的结构,表现,行为

结构

HTML用于表现网页的结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于响应用户操作

1.2 什么是HTML

HTML(Hypertext Markup Language)是超文本标记语言。

严格来说,HTML不属于编程语言,他是用标签的形式标示出网页不同的组成部分。

为什么说HTML不是编程语言呢?因为HTML没有解释器,写出来的代码可以通过浏览器直接浏览,不需要下载诸如jdk,Python之类的东西,也不需要配置环境。

1.3 运行/编写HTML

由于HTML是超文本标记语言,所以我们可以直接通过记事本来进行编写

或者也可以使用Notepad++,支持高亮

记事本代码写好之后,后缀名改为.html然后上级就可以看到我们代码的运行效果了

2. HTML基础

2.1 标签

标签由尖括号<>括起来,用于描述网页

2.2 元素

一个完整的标签称之为元素,有开始有终止,有内容

HTML元素以起始标签(<>)开始,以结束标签()闭合

元素内容是起始标签与结束标签之间的内容。

某些HTML元素具有空内容

空元素在开始标签中关闭

2.3 属性

我们可以通过<标签 a = “属性”>的方法设置属性,属性可以为HTML元素附加属性

属性是以键值对的形式出现的

下面会示范一下常用的标签

2.4 HTML的hello world

第一个HTML hello world!

这样,把文件名改为hello.html双击打开,就可以看到hello world。

2.5 标签的嵌套

大多数标签都支持嵌套

这是段落

这是段落里面的第一段

这是段落里面的第二段

页面展示:

这是段落

这是段落里面的第一段

这是段落里面的第二段

3. HTML常用标签

3.1 标题

标题由h+数字标签来实现,共有六级标题

一级标题

二级标题

六级标题

下面是显示结果

一级标题

二级标题

3.2 链接

链接以a标签来实现

这是一个链接

下面是网页显示

这是一个链接

3.3 段落

段落用p标签来实现

好家伙,好家伙,这是第一段

好家伙,好家伙,这是第二段

下面是网页显示

好家伙,好家伙,这是第一段

好家伙,好家伙,这是第二段

3.3 图片

图片用img标签来实现

图片说明

下面是网页显示,因为图书不存在,所以不会显示

图片说明

3.4 换行


标签表示换行

这是
效果

下面是网页显示

这是

效果

3.5 列表

设置一个有序列表

  1. 第一个
  2. 第二个

显示结果:

第一个

第二个

设置一个无序列表

  • 第一个
  • 第二个

显示结果:

第一个

第二个

3.6 表格

创建一个表格:

id age name sex

显示结果:

多行显示:

id age name sex
1001 20 布小禅 men

不要问为什么这么写,这是标签,没有为什么,这是规定

当然,刚刚的表格其实不是很正确,我们要定义第一行的东西的话,需要用到这个标签

3.7 注释

顾名思义就是给我们的代码做解释的标签

注释不会被计算机识别,也就是说,注释并不会影响运行结果

Title Hello World!

就像这样,下面是上面代码的运行结果:

3.8 块

什么是块呢?

我们通过

定义一个html代码块,我们可以css给div代码块设置属性的方式设置整个div代码块的样式。

代码:

Title Hello World!

This is a header

This is a paragraph.

效果:

This is a header

This is a paragraph.

some text.some other text.

some text.some other text.

标签被用来组合文档中的行内元素。

就是把某行元素的特定部分包装起来

代码:

Title Hello World!

This is a header

This is a paragraph.

some text.some other text.

some text.some other text.

效果:

This is a header

This is a paragraph.

some text.some other text.

some text.some other text.

3.9 表单

通过

标签来设置表单

表单有什么用呢? 接收用户输入的信息

就像我们在网页上面填写的账号和密码,那就是表单

而空值输入文本框的标签是标签,他能够接受的内容有多种形式

text是纯文本,可见

password是密码文本,不可见

Title

效果这样:

当然,我们一般都会有一个登录/注册的按钮

这需要标签的submit属性

Title

而效果是这样:

而有时我们的表单并不仅仅是这么简陋

比如你常见的,让你选择职业,性别之类的

这个就需要用到标签

Title

个人信息采集

效果:

而拿了登录会干嘛呢?

会把你的信息提交,这需要一个action属性

不设置默认为提交到当前页面,并且只会提交带有name属性的数据

当然这个我们现在随便设就可以,反正人家的服务器也不会收

我这边是便写了一个空的html文件

Title

个人信息采集

效果:

个人信息采集

因为提交方式为get(默认),所以点击登录后,会跳转到那个空白的HTML,然后url会把你所有带有name属性的数据展示出来

而怎么规避这个情况呢?

需要一个属性:method

不设置默认为get请求

Title

个人信息采集

这样点击提交后就不会显示带有name属性的数据

结语

兴趣是最好的老师,坚持是不变的真理。

学习不要急躁,一步一个脚印,踏踏实实的往前走。

每天进步一点点,日积月累之下,你就会发现自己已经变得很厉害了。

我是布小禅,一枚自学萌新,跟着我每天进步一点点吧!

HTML web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:【云驻共创】探讨文字识别中的语言模型
下一篇:Oracle杂谈一 Oracle数据库的一些基本概念
相关文章