HTML基础

字数统计4.8k

本文主讲：认识 HTML、HTML文档格式、HTML文档格式、段落与标题字标签、常用的独目运算符、字体处理标签、预览格式标签、实体符号、HTML中的表格、浏览器界面设置背景色及背景图片、图片标签、超链接标签、herf与src属性的区别、无序列表与有序列表、Form表单、input输入域的type属性、下拉列表与文字域标签、实现简单的注册表单、文件控件、隐藏域、文本框的三种常用属性、HTML 标签中的 id 属性、div与span图层标签

基本包括了常用的HTML标签及其标签内的属性功能等…..

认识 HTML

什么是 HTML

答：HTML（超文本标记语言），HTML运行在浏览器上面，超文本的意思就是，它可以展示超级文本流，例如图片流、声音流、视频流等，标记语言代表这门语言是用标签【开始标签与结束标签】进行编程的，严格来说 HTML 不算是一门编程语言，因为它没有控制语句、函数等，它是一套规范，浏览器语言规范.

HTML开发：新建后缀的 .html 或者 .htm 的文件利用文本编辑器打开即可编程

目前五大主流浏览器分别是什么以及 WEB 开发又是什么？

五大主流浏览器：

Edge：微软新版浏览器
Firefox：Mozilla公司的产品
Chrome：谷歌公司的
Opera：欧朋公司产品
Safari：苹果笔记本专用浏览器

WEB开发是什么？

WEB开发分为前端开发以及后端开发！

前端开发：用户使用各种产品时看到的展示页面，前端程序员需要精通 HTML+CSS+JavaScript

后端开发：前端程序员需要的各种动态数据都需要后端程序员提供，后端程序员就是需要为前端提供数据！

W3C 是什么

W3C：万维网联盟，非盈利组织，制定了很多标准，例如 html、https、javascript等，万维网联盟创始人是 蒂姆伯纳斯 李 老牛批了这个人，因为这个人我们才可以上网！！

HTML文档格式

文档格式

image-20211007151830348

HTML 文档有什么特点

特点：

1：HTML语法松散
2：HTML语法有的标签不成对出现也没有问题【不是所有标签都允许不成对出现的】
3：HTML语法标签不严格区分大小写

image-20211007151846359

段落与标题字标签

HTML 中段落与标题字标签分别是什么？

段落标签：<p>待分段的内容</p>

标题字标签：

1
2
3
4
5
6
<h1>一号标题字数据</h1>
<h2>二号标题字数据</h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

注意：

1：在HTML源代码内手动换行是不起作用的
2：标题字标签中 h1 标签的标题最大，h2 标签的标题最小
3：标题字标签独占行

image-20211007151940815

常用的独目运算符

HTML 中常用的独目运算符及其用法

<br>：换行标签

注意：一个 <br> 标签就代表换一行

<hr>：水平线标签

image-20211007152048352

字体处理标签

HTML 内常用的字体处理标签

字体加粗标签：<b>待加粗的数据</b>

字体倾斜标签：<i>待倾斜的数据</i>

插入字样式标签：<ins>待插入字处理的数据</ins>

删除字样式标签：<del>待删除字处理的数据</del>

字体右上方的插入数据标签：100 <sup>向100右上方插入的数据</sup>

字体右下方的插入数据标签：100<sub>向100右下方插入的数据</sub>

字体综合标签：<font>字体综合数据……..</font>

image-20211007152106254

预览格式标签

HTML 内预留格式标签怎么写及其功能

语法：

1
<pre>预留格式的内容</pre>

功能：因为 HTML 源代码内的手动空行【非<br>标签】被浏览器解释执行后就会消失【自动去除手动空白】，因此我们自己设置的空白格式就会消失，这是就可以利用<pre>标签将自己设置的空白格式保留下来

image-20211007152131031

使用 pre 标签

image-20211007152141513

实体符号

HTML 中实体符号的应用场景以及其格式

应用场景：在 HTML 源代码内如果要写 <> 等数据，会被浏览器解释为标签符号，因此 <>这两个数据不会被显示，这是就要将 <> 换成实体符号

格式：&开头 ；结尾

示例：&nbsp；

常见的实体符号

空格实体符号：&nbsp；

大于号实体符号：&gt；

小于号实体符号：&lt；

image-20211007152207483

HTML中的表格

HTML 中表格的图示原理

image-20211007152224309

利用 HTML 代码创建一个表格

image-20211007152238412

怎么对表格内的单元格进行合并【多行单元格合并与多列单元格合并】

多行单元格合并与多列单元格合并图示

image-20211007152258968

多行单元格合并口诀：将最后的单元格注释掉，在最前面的单元格内【td标签】添加 rowspan 属性，合并几个单元格就将 rowspan 的属性值设置几

多行单元格合并图示：

image-20211007152315665

多列单元格合并口诀：将其中一个单元格注释掉，在另外一个单元格内【td标签】添加 colspan 属性，合并几个单元格就将 rowspan 的属性值设置几

多列单元格合并图示：

image-20211007152330416

HTML 中 th 标签的功能

功能：th 标签可代替表格中的 td 标签，并且将 th 标签内的数据全部加粗居中显示，一般用于表格的标题信息处

图示：

image-20211007152349462

HTML 的一个表格中 thead、tbody、tfoot三个标签的功能

功能：把一个表格分为三部分，分别是表格头、表格体、表格脚，这样做在后期方便 JavaScript 进行处理

图示：

image-20211007152406204

浏览器界面设置背景色及背景图片

在 HTML 内怎么为浏览器网页界面设置背景色及其背景图片

设置网页背景色实现：在 HTML 的源代码的 <body> 标签内添加一个叫做 bgcolor 的属性即可设置当前页面背景色

设置网页背景图片实现：在 HTML 的源代码的 <body> 标签内添加一个叫做 background 的属性即可设置当前页面背景图片

image-20211007152427027

图片标签

HTML 中设置图片是什么标签

答：是 <img></img> 标签

注意：
1：img 图片标签和在 body 标签内设置的浏览器页面背景图片是不一样滴
2：如果一个标签内没有内容，那么就可以不写最后的标签，例如 <img></img> 可以写成 <img />

图片标签的属性及其功能

属性：

src：设置图片的访问路径
title：鼠标悬停在图片上时提示的文字信息
width：用于设置图片的宽度
alt：图片加载失败显示的文字信息

注意：在利用 width 属性设置完图片宽度后，不可以在设置图片高度，因为图片的高度是根据宽度自动调整的！！

image-20211007152458321

超链接标签

HTML 中超链接标签是什么及其超链接的特点

超链接标签：

1
<a href=“链接的网站或本地文件”>待连接的文本或图片</a>

href：表示热链接

超链接特点：

1：超链接的 href 属性值可以是网站，也可以是本地文件
2：超链接不仅可链接文本，还可以设置图片超链接
3：指针悬停在超链接文本或图片上，鼠标指针变为一个小手
4：超链接文本会自动在文本下面加上下划线
5：鼠标悬停在超链接文本或图片上会自动在左下角显示连接的网站或者本地文件

image-20211007152556340

超链接标签内的 target 属性的功能

target属性值及其功能：

_self：点击超链接在当前网页打开链接的网站
_blank：点击超链接在新的网页打开链接的网站
_parent：点击超链接在当前网页的父窗口打开链接的网站
_top：点击超链接在当前网页的顶级窗口打开链接的网站

注意：

1：在不设置 target 属性值时，超链接默认在当前网页内打开！！
2：父级窗口与顶级窗口是在网页内存在 iframe 标签时在生效
3：iframe 标签是一个窗口中的内部窗口【常常用于网站登录！】

image-20211007152622061

herf与src属性的区别

区别：href 属性只能用在超链接标签<a>与外部导入.css文件的<link>标签内，src 属性可用在很多标签内，例如 <script>、<img>、<iframe>等

无序列表与有序列表

HTML内怎么创建无序列表

实现标签：

1
<ul><li></li></ul>

【其中 ul 标签代表无序列表，li 标签代表列表项】

ul 标签的 type 属性值：

circle：列表项前面显示圆圈
disc：列表项前面显示圆点
square：列表项前面显示方块

注意：在无序列表内的列表项中还可以嵌套无序列表…….

图示：

image-20211007152652994

HTML内怎么创建有序列表

实现标签：

1
<ol><li></li></ol>

【其中 ol 代表有序表列标签 li 代表列表项标签】

注意：在有序列表内的列表项中还可以嵌套有序列表…….

图示：

image-20211007152716641

无序列表与有序列表的区别

1：无序列表用 <ul> 标签代表，有序标签用<ol>标签代表
2：无序列表内的列表项前面的符号没有顺序，有序列表内的列表项前面的符号有顺序

Form表单

什么是 from 表单及它有什么用？

概念：form表单可收集用户的数据，并且带着这些数据一起发送给指定的网站服务器

用途：form表单常常用来验证用户登录信息

image-20211007152741062

from 表单与 超链接的异同点

相同点：form表单与超链接都可以向指定的网站服务器发送请求

不同点：form可以带着用户填写的数据一起发送给网站服务器，超链接被点击后直接向网站服务器发送请求，用户不能填写数据

HTML 怎么创建简单的表单并且提交表单

创建表单标签：

1
<form action=”目标网站“></form>

【action属性值代表提交表单时向哪个网站服务器发送请求，一般填写网站】

提交表单的实现：在<form></form>标签内嵌套一个<input>标签，且 type 属性值为 submit 的按钮，点击这个按钮即可提交表单！！

表单对象的属性值：
action：类似于超链接标签内的 href 属性，代表向哪个服务器提交表单，一般值都是网站地址

注意：
1：所有能够提交表单的按钮，其 type 属性值都为 submit类型【目前来说】
2：想要提交一个表单，那么 <input/> 标签 type 属性值为 submit 的按钮必须在 form 表单内定义
3：一个网页内可以有多个表单对象

image-20211007152804841

四：实现重置表单

实现标签：

1
<input type="reset" value="重置表单" />

注意：重置表单的标签必须在 form 表单内才可以重置表单

image-20211007152818903

HTML 内一个 Form 表单对象的组成【自己总结版本】

组成：表单项、提交表单按钮

表单项：用于接收用户填写的数据

提交表单按钮：向指定网站服务器提交表单发起请求

注意：提交表单按钮不能有 name 属性哦

image-20211007152845385

在 Form 表单内怎么实现点击按钮即可携带用户填写的数据向指定服务器提交表单

实现：

1：在所有获取用户数据的表单项的标签内必须要有 name 属性！
2：提交表单按钮的 type 属性值必须为 submit
3：书写提交表单按钮的标签位置必须要在 Form 标签内部！

注意：
1：在最终提交表单的时候，表单项内有name属性的才会被提交，没有name属性的不会被提交哦

2：提交表单按钮不能设置name属性值，要不然就会把提交表单的 value 提交上去….

3：浏览器向服务器提交表单的 url 格式为 ： 服务器地址?表单项name属性值=表单项的value值&表单项name属性值=表单项的value…【非常重要】

4：上面的提交表单 url 格式是 W3C 制定的标准所有浏览器都需要遵守…

实现提交表单

image-20211007152908195

注意事项第二条图示：

image-20211007152919736

创建一个简单的登录表单

image-20211007152931868

input输入域的type属性

HTML 中 input 输入域标签

标签简介：input 输入域标签是用来获取用户输入及其选择的数据的，input标签中的 type 属性值可设置input标签为文本框或者密码框、单选框、复选框、普通按钮、提交表单按钮、重置表单按钮等等…

HTML 中 input 输入域标签中的 type 属性的一些常用值及其对应的样式

type属性值：

text：当前 input 输入域标签变为文本框

password：当前 input 输入域标签变为密码框

radio：当前 input 输入域标签变为单选框

checkbox：当前 input 输入域标签变为复选框【多选框】

button：当前 input 输入域标签变为普通按钮

submit：当前 input 输入域标签变为提交表单按钮

reset：当前 input 输入域标签变为表单重置按钮

file：当前 input 输入域标签变为文件选择按钮

hidden：当前 input 输入域标签变为隐藏域

注意：

1：在指定的一组单选框与复选框中的一个框内设置 checked 属性【复选框可多选】，默认选择当前的单选框或者复选框…..
2：同一组的单选框name属性值都要一致…..否则会出现单选框可以多选的情况
3：同一组的复选框的name属性值都要一致……
4：除了文本框与密码框与文字域，其他的组件的value值需要自己定义，上面三种可从用户填写获取

image-20211007153002309

提交表单与重置表单按钮：

image-20211007153016955

下拉列表与文字域标签

HTML 中创建下拉列表的标签

实现标签：

1
<select><option>下拉列表的值1</option></select>

option 标签内的 selected 属性值功能：在哪个 option 标签上设置 selected 属性值，那么下拉列表就默认选择哪个数据

image-20211007153042037

HTML 中创建文字域的标签

标签实现：

1
<textarea></textarea>

文字域功能：用来接收用户填写的大量数据…

标签属性：
rows：设置文字域占浏览器几行
cols：设置文字域占浏览器几列

注意：文字域可以接收用户填写的数据，因此文字域标签内不需要设置 value 属性..

image-20211007153101341

实现简单的注册表单

利用上面所学的知识创建一个用户注册的提交表单

image-20211007153123304

ps：上面的注册表单提交后，浏览器会携带具有name属性值的标签的 value 值跳转到百度网站页面，浏览器的地址栏数据如下：

地址：https://www.baidu.com/?username=askdskad&userpsd=asdasdasd&gender=male&hubby=basketball&hubby=swim&Education=benke&Introduction=woaini

文件控件

HTML 中怎么创建文件控件

实现语法：

1
<input type="file" value="选择文件" />

image-20211007153140603

隐藏域

HTML 中隐藏域组件的功能

功能：开发者不希望用户在填写表单时看到一些信息，但是提交表单数据时这些数据还要提交，那么就可以利用隐藏域进行实现，隐藏域在浏览器上是看不到的哦

HTML 中怎么创建隐藏域组件

实现语法：

1
<input type="hidden" name="one" value="two" />

【name属性和value属性不是必须的，在充当表单项时才必须】

image-20211007153207718

文本框的三种常用属性

HTML 文本框的 readonly 与 disabled 属性的功能及其异同点

readonly属性功能：被装饰的文本框不能写入数据，只能看到数据

disabled属性功能：被装饰的文本框不能写入数据，只能看到数据【只读】

异同点：

相同点：修饰的文本框都只能读，不能对文本框内的数据进行修改

不同点：如果修饰的是 Form 表单内的文本框【表单项】，那么在提交表单时 readonly属性修饰的文本框可被提交，disabled则不可以

image-20211007153235324

HTML 文本框的 maxlength 属性功能

maxlength 属性功能：限制文本框最多输入的数据长度

语法格式：maxlength = “3” [文本框内最多输入三个字符数据]

image-20211007153248213

HTML 标签中的 id 属性

HTML 所有标签中的 id 属性

id属性详解：

1：在 HTML 文档中任何结点标签都是存在 id 属性的，主要是看开发者写不写这个 id 属性

2：一个结点标签的 id 属性就是这个结点的身份证号，每一个结点的 id 属性值都唯一…

3：不同的结点中 id 的属性值是不可能相同的

结点 id 属性的功能呢个：方便后期 JS 代码查找某个结点，对这个结点进行增删改查，实现网页的动态效果….

image-20211007153309804

div与span图层标签

认识 div 标签与 span 标签

div 与 span 标签概念：这两个标签相当于浏览器页面的图层，把浏览器整个页面比作一张图片，在页面上的 div 与 span 标签就是这个图片上面的图层

div 与 span 标签功能：页面布局，在很久之前浏览器页面布局需要用 table 布局，现在全都用div+span了，因为它们非常灵活【图层之间的嵌套等，图层可以在页面任何位置出现等..】

div 与 span 标签定位：可以这两个标签比作盒子，在盒子的左上方有 x、y坐标，就通过这个坐标对 div 与 span 标签进行定位，后期学CSS实现图层定位！

div 与 span 标签差异：div图层标签独占一行，span图层标签不独占一行

图示：

image-20211007153327855

HTML基础知识完毕…..