🤵♂️ 个人主页: Flyme awei
👨💻 作者简介:Python
领域新星创作者。
🐋 希望大家多多支持😘一起进步呀!
📝 文章对你有帮助👉关注✨点赞👍收藏📂
前端技术之HTML
文章目录
- 前端技术之HTML
- 一、HTML
- 1.1网络传输的三大基石
- 1.2什么是HTML
- 1.3HTML标准结构
- 1.4集成开发环境
- 二、HTML中标签的使用
- 2.1head中的标签
- 2.2body中的标签
- 2.2.1文本标签
- 2.2.2多媒体标签
- 2.2.3超链接标签
- 2.2.4设置锚点
- 2.3列表标签
- 2.3.1无序列表
- 2.3.2有序列表
- 2.4表格标签
- 三、框架
- 3.1内嵌框架
- 3.1.1练习:邮箱
- 登录首页
- 邮箱首页
- 邮箱上侧
- 邮箱左侧
- 3.2框架集合
- 四、form表单
- 4.1form表单作用
- 4.2forme表单细节
- 4.2.1 name属性
- 4.2.2 action属性
- 4.2.3 method 属性
- 4.3form表单练习:模拟百度搜索
- 4.4表单元素
- 4.4.1文本框
- 4.4.2密码框
- 4.4.3单选按钮
- 4.4.4多选按钮
- 4.4.5文件
- 4.4.6影藏域
- 4.4.7普通按钮
- 4.4.8重置按钮
- 4.4.9提交按钮
- 4.4.10下拉按钮
- 4.4.11多行文本框
- 4.4.12lable标签
- 五、HTML5新增
- 5.1新增type类型
- 5.2新增属性
- 总结
一、HTML
1.1网络传输的三大基石
URL:在www
上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL(Uniform Resource Locator
,统一资源定位符),它是www
的统一资源定位标志,就是指网络地址。
HTTP协议:http
是一个简单的请求-响应协议,它通常运行在TCP
之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII
码形式给出;而消息内容则具有一个类似MIME
的格式。这个简单模型是早期Web
成功的有功之臣,因为它使得开发和部署是那么的直截了当。
HTML:HTML
称为超文本标记语言。
1.2什么是HTML
1.HTML 指的是超文本标记语言: Hyper Text Markup
超文本:比普通的文本厉害
标记:标记=标签
标签:
由尖括号包围起来的关键词
分类:双标记标签/封闭类型标签
单标记标签/非封闭类型标签
语言:HTML是一个描述网页的语言
2.HTML的作用:
学习HTML就是学习各种各样的标签,然后组成一个页面,这个页面可以被浏览器解析,解析完以后可以在浏览器中将页面进行展示。
1.3HTML标准结构
标准结构:.html
文件
运行界面: 让浏览器解析:直接用浏览器将文件打开即可:
1.4集成开发环境
集成开发环境(IDE,Integrated Development Environment
):是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。如微软的Visual Studio
系列,Borland
的C++ Builder
、Delphi
系列等。该程序可以独立运行,也可以和其它程序并用。IDE
多被用于开发HTML
应用软件。
例如,许多人在设计网站时使用IDE(如webstorm
、DreamWeaver
等),因为很多项任务会自动生成。
二、HTML中标签的使用
2.1head中的标签
head
标签—>里面放的是页面的配置信息
head
标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在
Web
中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:
。
应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。
文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style></style>
<script></script>
<meta name="author" content="awei"/>
<meta name="keywords" content="关键字"/>
<meta name="keywords" content="head标签" />
<!---->
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"/>
<title>head标签</title>
</head>
<body>
This is awei a html ...
</body>
</html>
2.2body中的标签
body
标签里面放的就是页面上展示出来的内容
body
元素是定义文档的主体。body
元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)body
是用在网页中的一种HTML
标签,标签是用在网页中的一种HTML
标签,表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!
2.2.1文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>
<h4>H4标题</h4>
<h5>H5标题</h5>
<h6>H6标题</h6>
<p>文 本</p>
<p>文 本</p>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<i><u><b>加粗倾斜下划线</b></u></i>
<pre><font size="5">
public static void main(String[] args){
System.out.println("预编译")
}
</font></pre>
<del>Flyme awei</del>
<!--换行效果
shift + Enter-->
<p>hello,<br />word</p>
<font size="7" color="aqua" face="微软雅黑">字体大小颜色样式</font>
</body>
</html>
页面展示:
2.2.2多媒体标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<img src="img/76cc7e7c572c4bd7b368add704a02383.png" width="300px"
title="这是一张图片" alt="图片加载失败提示语"/><br />
<embed src="vido/日落.mp4"></embed>
<embed src="music/我要你.mp3"></embed>
</body>
</html>
页面展示:
2.2.3超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="01head标签.html">超链接</a><br />
<a href="02文本标签.html" target="_self">这是一个超链接</a><br />
<a href="03多媒体标签.html" target="_blank">这是一个超链接</a><br />
<a href="https://blog.csdn.net/m0_68744965?spm=1000.2115.3001.5343" target="_blank"><img src="img/76cc7e7c572c4bd7b368add704a02383.png"/></a>
</body>
</html>
页面展示:
2.2.4设置锚点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置锚点</title>
</head>
<body>
<a name="1F">java语言</a>
<h1>java</h1>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<p>java</p>
<a name="2F">python语言</a>
<h1>python</h1>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<p>python</p>
<a name="3F">javascript语言</a>
<h1>javascript</h1>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p>javascript</p>
<p