HTML的基础使用

一、HTML的基本概念

HTML是一种用于创建和结构化网页内容的标准标记语言。它使用标签(Tag)来描述网页中的各种元素,如文字、图片、链接等。这些标签被尖括号(<>)包围,并且大多数标签都是成对出现的,包括开始标签和结束标签。

二、HTML的历史与发展

  • HTML的故事始于1989年,当时蒂姆·伯纳斯-李在欧洲核子研究中心(CERN)提出了一个名为“万维网”的概念。
  • 为了实现这一概念,他发明了HTML,并随后与罗伯特·卡里奥一起发明了HTTP协议。
  • 从那时起,HTML就成为了互联网不可或缺的一部分,并随着互联网的不断发展而持续演进。

三、HTML的基本结构

一个典型的HTML文档由以下几个基本元素构成:

  • <!DOCTYPE html>:文档类型声明,告诉浏览器这个文档使用的是HTML5标准或其他版本。
  • <html>:整个HTML文档的根元素,其他所有元素都包含在这个标签内。
  • <head>:包含了所有关于网页的元信息,如标题、字符集声明、引入的CSS样式表和JavaScript文件等。
  • <title>:定义了网页的标题,它显示在浏览器的标题栏或标签页上。
  • <body>:包含了网页的所有内容,如文本、图片、链接、表格、列表等。

四、HTML的标签与属性

  • HTML标签用于描述网页中的各种元素。
  • 标签可以包含属性,属性用于修饰元素,并为元素提供附加信息。
  • 属性必须位于开始标签内,并且以键值对的形式出现。

五、HTML的特点与优势

  • 简易性:HTML是一种相对容易学习和使用的语言。
  • 可扩展性:HTML能够不断增加新的元素和属性来满足新的需求。
  • 平台无关性:HTML编写的网页可以在不同的操作系统和浏览器上显示。
  • 通用性:HTML是网络的通用语言,几乎所有的设备和浏览器都能够解析和显示HTML内容。

六、HTML的应用与前景

  • HTML是网页开发的基础技术之一,常与CSS和JavaScript一起使用来创建和设计网页。
  • 随着Web技术的不断发展,HTML也在不断演进,以适应新的需求和挑战。
  • 学习HTML对于想要进入互联网领域的人来说是一个重要的起点,也是理解现代网络技术的基础。

综上所述,HTML作为一种基础的网页开发语言,在构建现代网络内容中发挥着核心作用。它是连接世界的纽带,是数字世界的基石。

Ctrl键+/ 注释

选中字段ctrl+/注释

段落

下面是执行后的结果

就是写一段,隔一段,相当于空格

写字不换行

下面是执行后的结果

span如果写的话它们会在一起,就算换一行也没有,p这个换一行写可以直接到第二行

水平线标签

换一行写上hr标签,执行后在你写的位置直接出现水平线

换行

在你想换行的字段中间加上br会换下一行

写的时候加上这个,就算写在一行,它也会自动换行

图片

前面写上<img空格,继续写宽高就行

src是图片路径

宽度

高度

图片不存在时候给的提示

记得写在>里面

如果代码写有误,会出现不存在

鼠标悬停在照片上的提示

记得写在>里面

如果鼠标停在图片上较长会显示

返回上一层目录

. 可以显示上一层的资源选择,如果上没有资源就不会显示

也可以在桌面打开显示

加粗字体

下面是执行后的结果

写上,如图加粗或者写<b>

倾斜字体

写上如图字体倾斜

下划线

写上如图加一下划线

删除线

写上如图,加一删除线

上标

使字变成,上标字

下标

写上如图,变成下标

视频

播放,宽度,高度,路径,记得写在视频>里面

视频文件的URL,就是视频的路径

路径在哪里就写哪里,前面加一个/,直接选择

显示控制条

控制条就是进度

视频播放器的宽度

100%就是全屏,100就是100个像素,1也就是1个像素

视频播放器的高度

100%就是全屏,100就是100个像素,1也就是1个像素

自动播放视频

写进去后,会自动播放视频,如果有误,记得检查会不会有矛盾,不然不会显示

循环播放视频

写进去后,会循环播放视频,就算加了显示控制条,不用动,他也会自动播放

静音播放视频

写上后,视频声音会消失

<poster>指定视频封面图片的URL,会在视频加载前显示

音频

播放,路径,记得写在音频前>里面

控制条

就是音频的进度条

循环播放

音频会循环播放

超链接

链接网站,记得后面大部分都写在>里面

超链接网站

写上后,写上网站

超链接ID标签

可以用来回到顶部,下一个记得换一个标签加一个#

超链接新建网页

写上后,点击网站后会新建一个网页,不会在同一个网页覆盖

有序列表

有序就是 列表1.2.3.

无序列表

  • 无序就是,像这个前面第一个一样,或者没有符号

定义列表

标题

就是会比后面靠前,会呈现一个标题的感觉

内容

写上标题后就是内容就是一行一行往下,可以跟标题结合,如图所示

定义表格

写上后相当于绘制表格

表格合并行

写在>里面,如果要合并表格,可以写在代码格子里面,或者表格框

如果有差错,应该是表格有多于,因为合并表格相当于一个表格变长差不多,其他的格子要Ctrl键+/注释,相当于删除。可以数字调节合并几格.如图所示

表格合并列

写在>里面,如果要合并表格,可以写在代码格子里面,或者表格框

如果有差错,应该是表格有多于,因为合并表格相当于一个表格变长差不多,其他的格子要Ctrl键+/注释,相当于删除。可以数字调节合并几格.如图所示

表格列

写上后会显示表格列

表格行

写上后显示表格行,一行一行写,

表格线粗细

写在表格后面>里面 ,可以数字调节表格粗线

表格方格宽,或者表格宽也行

可以数字调节格子,宽大小

表格方格高,或者表格高也行

可以数字调节格子,高大小

表格标题

在表格里面当做标题,可以加粗,也可以加h1,标题

表格头部

字体会变粗

表格主体

表格底部

内嵌

写上后,在写上网站,打开会直接进入网站,可以跟<a>结合

进入网站标签

iframe,宽高后面写上名,名字不能是中文,只能是英文,可以是拼音,英语标签一定要一样,可以在同一个地方打开,不会新建网页,大小也一样

表单

文本框

写上后会显示一个文本框,默认里面可以写东西

类型

写上文本框后,可以看到他的类型

提示

写在类型里面后,文本框里面会显示一个提示,写东西时可以覆盖

输入框里面的值

按钮里面的数值

禁用

在文本框里面写上后,文本框就写不了了

密码格式

在文本框后面写上后,填数字会呈现密码的黑点格式

字符可点击框

按钮的框,里面可以用输入框里面的值

登入按钮

提交后 会跳转界面

普通按钮

在文本框后面写上后,提交后,不会跳转界面

重置按钮

在类型和文本框后面写上后,点击重置,会清除框里面全部内容

选择单选框

有几个写几个,radio代表圆形选

单选框标记

name后面这个可以改但是一定要一样,不然就是多选,这个代表,只能在这很多个标记中选择这一个

复选框

在类型后面写上后可以多选

value后面也一定要一样,当然也可以多选

跳转网址

只需要在action后面写上网址,提交后会自动跳转到这个网址上

(简单来说就像你登入写上号和密码后肯定要提交,那他就会把你的号和密码传送到一个网址,识别你的号,对了才让你登入)

日期框

在类型后写上后,可以自己选择时间

日期加时间框

在类型后面写上后,就可以选择日期加时间

电子邮件框

在类型后面写上后,这里就只能写电子邮件,不然默认会提示你

滑块

在类型后面写上后,会出现一个滑块,默认可以拖动

滑块的长度

写上后,可以改滑块初始的长度,不能改滑块拉动的长度

网址

类型后面写上后,只能写网址,不然跳转不了,也会提示你,请输入网址,成功后,会跳转到设定的网址上面

数字框

在类型后面写上后,也是一个框,但是是数字框只能写数字,写文字,会消失,写不了

数字框可输入最小的数字

最小只能是你写的数字

数字框可输入最大的数字

最大只能是你写的数字,可以往上加,默认会有按钮,一次可以加输入框里面最小的数字,到最大的数字就不能加了

网址

写在类型后,必须要输入网址别的东西写的会提示你请输入网址,还打不开,如果你在action后写上了网址,你写对网址他就会打开你action后的网址,不会打开你写的网址

下拉框

写上后会有一个下拉框,但是没有选项

下拉框的选项

写上后再value后面写上选项的拼音,然后在>这里面写中文<,因为代码尽量写英文

下拉框刚初始默认显示的选项

在你想要放在第一个后面加上这个,他就会默认他在第一个

多行文本域

写上后,想拉多大就拉多大,是从第一行开始写的

多行文本域的长

可以调节,刚开始默认多行文本域的长

多行文本域的高

可以调节刚开始默认多行文本域的长

颜色

写上后,进去可以自己随便调节颜色

文件域(用户名)

这一个代表你提交时,上面会显示你的用户名,这个是隐藏的只有后台才能看见

隐藏域

这个可以是表示你也可以是表示别人,后台方便认,这个也是隐藏的

用户id

这个是你的id,后台也可以看到,也是隐藏的会显示在上面

表单验证

写上后,会验证你的表单是不是空的,不然提交不了,只要有东西就可以提交

表单验证格式

如果你写的格式不不对,也不会让你提交,会提示你,(就比如姓名,不可能是123,会提示你)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值