HTML概述

已于 2023-03-07 11:23:36 修改
阅读量381 收藏 1
点赞数
分类专栏： HTML 文章标签： html 前端 javascript
于 2023-03-07 11:19:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74161013/article/details/129377975
版权

文章目录

什么是HTML

HTML是超文本标记语言，Hyper Text Markup Language
(1）超文本：有流媒体、图片、声音的存在
(2）标记语言：所有标记语言都由标签组成，有开始标签也有结束标签，例如：<html></html>,<body></body>
(3）主要用来展示页面，修饰数据

1.1什么时候用HTML

B（Browser）/S（Server）架构方向，也是我们以后主攻方向

1.2为什么要学HTML

我们以后主要为企业内部提供解决方案，例如：企业内部的办公系统、供应链管理系统、客户关系管理系统等，而这些系统通常对界面的表现要求较低，对业务处理和数据处理要求较高，并且要求降低升级维护的成本，B/S架构可以更好的被企业接受，所以我们以后主要的方向是开发基于B/S架构的应用，B/S架构的开发通常又被叫做Web开发，Web开发通常包括Browser浏览器端的开发以及Server服务器端的开发。
虽然我们是学习Java后台服务器编程，但是前端页面编写要了解，能看懂，简单的页面效果可以实现即可；

1.3怎么开发HTML

创建一个以 .html或 .htm 结尾的文件，用文本编辑器打开就可以开发

1.4怎么运行HTML

用浏览器打开以.html或.htm的文件就可以自上而下解析执行，不需要编译

1.5DTD：Document Type Definition

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
2. DTD文件的作用
3.帮助你编写合法的代码
4.它让浏览器正确地显示器代码，或者说DTD只是写给检查器看的

1.6HTML与W3C（World Wide Web:www）

HTML规范是由w3c负责制定的，W3C是世界万维网联盟（World Wide Web:www）

1.7安装浏览器

FireFox、Google、IE

HTML元素

2.1HTML标签

<>表示开始标记
</>表示结束标记
<html>开始标签
</html> 结束标签
html为元素

2.2标签属性

<元素 属性名=”属性值” 属性名=”属性值” … ></元素>

2.3引号样式

html 不区分 ‘’ 或”” 但是必须要成对出现
2.4语法是否严格：不严格，语法松散
2.5是否区分大小写：不区分大小写

HTML基本标签

3.1段落标签：<p></p>

定义：可以把 HTML 文档分割为若干段落

3.2标题字：<h1></h1>至<h6></h6>

标题是通过 <h1> - <h6> 等标签进行定义的
<h1>定义最大标签，<h6>定义最小标签

3.3换行：

定义：<br> 可插入一个简单的换行符
<br> 标签是空标签，它没有结束标签

3.4注释：<!-- 这是HTML注释 -->

3.5水平线：<hr/>

3.6 预留格式
内容

定义：页面中输入什么样式就显示什么样式
实例：&lt; &gt;&nbsp;

HTML常用实体符号

4.1空格

&nbsp;

4.2小于号

&lt;

4.3大于号

&gt;

4.4乘号

&times;

4.5除号

&divide;

HTML表格

5.1作用：HTML中table标签实现表格

5.2表格的作用：

（4）主要用作布局
（5）先把表格画出来，然后往表格中放入数据
（6）现代网页采用table的比较少，采用div较多（Div以后讲）

5.3实例一：创建table表格

在这里插入图片描述

  1. <table>的属性如下：
    border=”1px” width=”500px” height=”300px” align=”center”
  2. <tr>行</tr>、<td>单元格</td>

5.4实例二：使用表格头、表格体、表格脚

在这里插入图片描述

1.<table border=”1px” width=”30%”>
2. 表格头：<thead><tr><th>表格中标题专用</th></tr></thead>

<!--表格头-->

	<thead>
		<tr align="center">

<!--
				th 代替 td，表格中标题栏的专用
			-->

			<th>员工编号</th>
			<th>员工姓名</th>
			<th>员工薪水</th>
		</tr>
	</thead>

    <tbody>
		<tr align="center">
			<td>7788</td>
			<td>SMITH</td>
			<td>800</td>
		</tr>
		<tr align="center">
			<td>7712</td>
			<td>Ford</td>
			<td>1800</td>
		</tr>
	</tbody>
  1. 表格脚：<tfoot><tr><td>表格脚</td></tr></tfood>
<!--表格脚-->

	<tfoot>
		<tr align="center">
			<td>表脚</td>
			<td>表脚</td>
			<td>表脚</td>
		</tr>
	</tfoot>

5.5实例三：行合并属性，列合并属性rowspan、colspan

  1. rowspan行合并属性：规定单元格可横跨的行数
  2. colspan列合并属性：规定单元格可横跨的列数

在这里插入图片描述

<table border="1px" width="500px">
		<tr>
			<td>1</td>	
			<td>2</td>	
			<!-- rowspan行合并，rowspan=2表示合并两行-->
			<td rowspan="2">3</td>	
		</tr>
		<tr>
			<td>4</td>	
			<td>5</td>						
		</tr>
		<tr>
		<!--colspan表示列合并，colspan-->
			<td  colspan="2">7</td>					
			<td>9</td>	
		</tr>
	</table>

5.6 table标签：<table></table>

每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。
字母 td 指表格数据（table data）即数据单元格的内容
5.7 table标签的border属性：表格的边框属性
5.8 table标签的align属性：规定表格相对于周围元素的对齐方式
5.9 table标签的width属性：

  1. width=”100px”：表示整个表格的宽度为100像素
  2. width=”50%”：表示整个表格占整个浏览器50%的宽度
    5.10table标签的height属性
    height=”200px”：表示整个表格的高度为200像素
    height=”50%”：表示整个表格占浏览器50%的高度
    5.11 tr标签：定义 HTML 表格中的行
    5.12 td标签：定义 HTML 表格中的标准单元格
  3. HTML 表格有两类单元格
    (1)表头单元th - 包含头部信息（由 th 元素创建）
    (2)标准单元td - 包含数据（由 td 元素创建）

5.13 th标签：表头单元，包含头部信息
5.14 thead、tbody、tfoot标签
thead标签：定义表格的表头，该标签用于组合 HTML 表格的表头内容
tbody标签：表格主体
tfood标签：定义表格的页脚（脚注或表注）
5.15单元格合并
rowspan行合并属性：规定单元格可横跨的行数
colspan列合并属性：规定单元格可横跨的列数

HTML背景色背景图片

Body标签bgcolor属性：设置整个页面背景颜色
实例：bgcolor=”blue”
在这里插入图片描述

Body标签background属性：设置背景图像

6.1.1 实例：<body background=”img/108.jpg ">

在这里插入图片描述

第7章HTML图片

在这里插入图片描述

7.1 img标签

若在开始标签与结束标签之间没有内容时，可以将结束标签省去，在开始标签的最后添加 /

7.2 src属性：是必需的；

src的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径
7.3width属性：设置图像的宽度尺寸
7.4 height属性：设置图像的高度尺寸
7.5 title属性
鼠标悬停在图片上时显示title文字
7.6 alt属性
在图片无法正确显示的情况下alt属性有效果

HTML超链接

8.1实例一：链接网络页面：<a href=”网络路径”>文本</a>

在这里插入图片描述

<a href=”http://www.baidu.com”>百度</a><br/>
<a href=” http://www.jd.com”>京东</a><br/>
<a href=” http://www.taobao.com”> 淘宝</a>

8.2 实例二：连接本地路径页面<a href=”表格.html”> 表格</a>

<a href=”test.html”>测试页面<a/>

在这里插入图片描述

8.3实例三：图片超链接

在这里插入图片描述

<a href=”www.baidu.com”> <img src=”1.jpg”/></a>

8.4超链接：用于从一张页面链接到另一张页面

8.5超链接的作用

标签中的内容只是供用户参考，
当用户点击该内容时，浏览器会向服务器发送一个http请求

8.6超链接和在地址栏上输入URL的区别

以上两种方式的本质是相同的，只不过，点击超链接更“傻瓜”

8.7超链接标签<a >

8.8标签的href属性

属性是相对路径、绝对路径或网络路径

8.9 标签的target属性: 设置资源最终显示位置

target属性可选值：
_blank 在新窗口打开页面

<a href=”www.jd.com”  target=”_blank” > 京东</a>

_self 在当前窗口打开页面，它为默认值

<a href=”www.jd.com”  target=”_self ” > 京东</a>

8.10图片超链接<a href=””><img src=””/></a>

在这里插入图片描述

<a href=”http://www.baidu.com”> <img src=”1.jpg”/></a>

HTML列表

9.1无序列表<ul><li></li></ul>

<ul type=””>
<li>中国
<ul type=””>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
</ul>

type属性可选值:
disc 默认值，实心圆
circle空心圆
square实心方块

实例：

在这里插入图片描述

 <ul type="circle">
		<li>中国
			<ul type="square">
				<li>北京
					<ul  >
						<li>海淀区</li>
						<li>海淀区</li>
						<li>海淀区</li>
					</ul>
				</li>
				<li>上海</li>
				<li>广州</li>
			</ul>
		</li>
		<li>美国</li>
		<li>日本</li>
	</ul>

9.2有序列表<ol><li></li></ol>
type属性可选值：A、a、I、i、1
实例：
在这里插入图片描述

 <ol type="A">
		<li>中国
			<ol type="a">
				<li>北京
					<ol  type="i">
						<li>海淀区</li>
						<li>海淀区</li>
						<li>海淀区</li>
					</ol>
				</li>
				<li>上海</li>
				<li>广州</li>
			</ol>
		</li>
		<li>美国</li>
		<li>日本</li>
	</ol>

HTML格式标签

在这里插入图片描述

10.1粗体字<b>显示内容</b>
10.2斜体字 <i>显示内容</i>
10.3插入字<ins>显示内容</ins>
10.4删除字 <del>显示内容</del>
10.5 font标签<font color=”” size=””>显示内容</font>
10.6 右上角加字：10<sup>2</sup>
10.7右下角加字：10<sub>m</sub>

HTML表单

11.1什么是表单？
在HTML中使用表单和用户完成交互；
11.2表单作用是什么？
表单主要负责采集数据信息，然后向服务提交表单数据，进行相关处理
11.3Form表单标签
name属性：设置表单的名称
action属性：用来设置发送请求的路径
B/S架构中，从浏览器B端向服务器S端发送数据，叫做请求，英语单词：request
B/S架构中，从服务器S端向浏览器B端返回数据，叫做响应，英语单词：response
method属性：用来设置表单提交数据的方式：get、post
get方式：为默认提交方式，提交的数据会显示在地址栏中
post方式：提交的数据不会在地址栏中显示，相对安全
11.4 例子：用户信息表单
在这里插入图片描述

11.5 input标签

  1. input type类型为text:文本输入域
<input type=”text” name=”username”	/>

2 input type类型为password:密码输入框

<input type=”password” name=”password” />

input type类型为 radio:单选按钮
3. <input type=”radio” name=”sex” />
4. input type类型为 checkbox：多选按钮

<input type=”checkbox” name=”interest” />
  1. input type类型为submit：表单提交按钮
<input type=”submit” name=”注册” />
  1. input type类型为button:普通按钮
<input type=”button” name=”提交注册” />
  1. input type类型为reset:表单重置按钮
<input type=”reset” name=”重置” />
  1. input type类型为file：文件上传组件
<input type=”file” name=”filename” />
  1. input type类型为hidden：隐藏控件
    在浏览器上看不到，但提交表单的时候会提交给服务器
<input type=”hidden” name=”usercode” />

11.6 下拉列表标签：<select><option></option></select>

<select name=”grade” >
<option value=”gz”>高中</option>
<option value=”dz”>大专</option>
</select>

11.7文本域标签 <textarea></texarea>

<textarea name=”introduce” cols=”50” rows=”10”></textarea>

11.8 只读控件readonly：只能看不能改，数据也会提交给服务器

<input type=”text” name=”username” value=”zhangsan” readonly />

11.9无效控件disabled：只能看不能改，数据不会提交给服务器

<input type=”text” name=”user” value=”wangwu” disabled  />

11.10 input控件size属性：设置文本框的可视长度

<input type=”text” name=”username” size=”10” />

11.11 input控件maxlength属性：设置文本框中可编写的长度

<input type=”text” name=”uname” maxlength=”100” />

HTML中的div和span

div和span都是图层
图层在HTML中主要使用在布局方面
每一个图层都是一个独立的单元，通过定位图层的位置，可以让网页布局更加灵活
现代HTML页面大部分都是使用div和span进行布局，比较灵活，但在之前都是通过table标签进行布局，非常死板，不灵活，所以table布局很少使用了
div和span都是独立的单元，可以往div和span中放入任何HTML元素，div和span都是可以相互嵌套的。
缺省情况下，div会独占一行，span不会独占一行。
12.1 例子：演示div会占用一行，span不会独自占用一行
在这里插入图片描述

HTML框架

iframe隐藏帧。

藕爱糖醋排骨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML & CSS 概述_1
qq_45370222的博客
04-10 3230
HTML & CSS 笔记_1
CSS的概述
qq_40208605的博客
04-04 2434
1.1CSS的概述1.1.1CSS是什么 CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。 1.1.2CSS名词解释 CSS (Cascad...
html概述（web编程，html基本结构）
路过人间，一叶知秋
10-08 4817
本文由sololearn手机app教程整理而来。
【HTML】HTML概述
喜欢你,像风走了八千里 不问归期
06-26 2645
HTML是用于编写Web页面的超文本标记语言，下面我们就来简单说一下HTML。
HTML概述+HTML核心（HTML知识点总结）
发光吖的博客
01-11 8774
HTML概述+HTML核心HTML概述HTML & CSS概述术语什么是HTML?MDN:什么是CSS?执行HTML&CSS版本和兼容性开发环境的准备插件安装HTML核心第一个网页元素（Element）属性的分类元素的嵌套标椎的文档结构语义化什么是语义化？为什么需要语义化？文本元素hpspan 【无语义】preHTML实体a元素href属性target属性路径的写法站内资源和站外资...
简述html文档基本结构,html概述及html文档基本结构
weixin_39626181的博客
06-03 1662
html概述HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。html文档基本结构一个html的基本结构如下：html>网页标题网页显示内容第一行是文档声明，第二行“”标签和最...
html概述及html文档基本结构
qq_42370150的博客
06-22 1819
html概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 html文档基本结构 一个html的基本结构如下： <!DOCTYPE html> <h...
HTML语言(概述及常用标签）
hacker707的博客
07-29 8086
1.1什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用)目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术1.2HTML概念HTMLHyperTextMarkupLanguage，超文本标记语言。是用来帮助我们构建网页的。【超文本】网页本身是一个文本文件，而超文本指的是这种文件中既可以包含文本信息，又可以包含图片，音频，视频和链接等非文字的信息。【标记语言】标记，也叫做标签。...
HTML5+CSS网页设计概述
橘猫吃不胖的博客
09-27 2977
HTML5+CSS网页设计概述1 网页概述1.1 认识网页1.2 网页名词解释1.3 web标准2 网页制作技术入门2.1 HTML2.2 CSS2.3 JavaScript2.4 网页的展示平台——浏览器3 阶段案例——创建第一个网页 1 网页概述 1.1 认识网页 网页是承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。 以CSDN首页为例，可以看到网页主要由文字、图像和超链接1等元素构成。当然除了这些元素，网页中还可以包含音频、视频以及动画等。 下面是CSDN首页的源代码，这是一
HTML基础知识
m0_53161561的博客
03-23 4264
HTML基础知识HTML的概述及开发环境1.1.1 HTML的概述1.1.2 HTML的历史版本1.1.3 网页组成1.1.4 开发环境HTML标签组织页面内容2.1.1 HTML标签名称与属性 HTML的概述及开发环境 1.1.1 HTML的概述 HTML是超文本标记语言，英语名称为HyperText Markup Language，它是一种用于创建网页的标准标记语言。 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 超文本标记语言是标准通用标记语言
Web程序开发：第2章 HTML概述.ppt
06-17
Web程序开发：第2章 HTML概述.ppt
01-HTML概述.ppt
06-09
01-HTML概述.ppt
HTML概述.ppt
08-29
详细讲解HTML的知识点，方便零基础的人学习HTML。这个文档有56张PPT
第1讲 HTML概述与HTML文件
09-09
1.1 什么是前端开发 1.2 前端开发人员必备能力 1.3 前端开发技术 1.4 前端开发所需工具 1.5 HTML页面基本结构 1.6 标签
java视屏\6.WEBBASIC\1.Web概述 、 HTML概述 、 文本处理 、 图像和超链接.mp4
04-19
java视屏\6.WEBBASIC\1.Web概述 、 HTML概述 、 文本处理 、 图像和超链接.mp4
HTML 揭秘：HTML 编码快速入门
最新发布
m0_53117341的博客
09-09 544
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 191
【代码】HTML、CSS实现树状图。
HTML常用特殊字符列表
m0_64036296的博客
09-09 105
这些字符实体能帮助你在HTML中准确表示需要的符号，无论它们是特殊符号还是货币、数学运算符号等。
网页开发 HTML
ultramand的博客
09-06 1150
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
HTML基础：表格表头设置及HTML概述
"这篇教程主要介绍了HTML中的表格表头设置，以及HTML的基础概念和相关技术。" 在HTML中，`<th>`标签用于定义表格的表头，这在创建结构化的数据展示时非常有用。基本的表格结构由`<table>`、`<tr>`、`<th>`和`<td>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值