HTML

最新推荐文章于 2025-07-15 09:52:51 发布

肉man

最新推荐文章于 2025-07-15 09:52:51 发布

阅读量496

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javaWeb javaWeb 文章标签：基础

肉man

本文链接：https://blog.youkuaiyun.com/weixin_42166907/article/details/81057676

javaWeb 同时被 2 个专栏收录

24 篇文章

订阅专栏

javaWeb

23 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括标签、文档结构、字符集等，并深入探讨了如何使用HTML创建链接、图片、列表、表格和表单等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器

IE: IE

win10: Edge --> 最新内核EdgeHTML

firefox --> Gecko

webkit --> Safar

chrome --> Chromium/Blink

Opera --> Presto

Web标准

W3C组织制定标准 --> 结构/表现/行为

三方面

结构标准: 网页元素进行整理和分类.XML/XHTML

样式标准: 设置网页元素的版式,颜色,大小,等外观 CSS

行为标准: 网页模型的定义以及交互的编写 DOM/DECMAScript

理想状态 html css js

HTML

概念:

HTML是用来描述网页的一种语言

--> 超文本记录(Hyper Text Markup Language)

--> 标记语言(markup language)

--> 是一套标记标签(markup tag)

--> HTML使用标记标签来描述网页

HTML标签

通常被称为HTML标签(HTML tag)

--> <html> 尖括号包围的关键词

--> 成对出现

--> 单标签 / 双标签

--> 起一个标签是开始标签,第二个是结束标签

--> 开始标签和结束标签也被称为开放标签和闭合标签

--> 嵌套关系 / 并列关系

HTML文档

即网页

--> 描述网页

--> 文档包含HTML标签和纯文本

Web浏览器的作用是读取HTML文档,并以网页的形式显示出他们

浏览器不会显示HTML标签,而是使用标签来解释页面的内容

例:

<html>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落</p>

</body>

</html>

--> <html>文本描述网页</html>

--> <body>文本是课件的页面内容</body>

--> <h1>文本被显示为标题</h1>

--> <p>文本被显示为段落</p>

<html> --> 根标签标签/ 标记

<head> --> 头标签

<title></title> -->标题

</head>

<body> --> 主体标签

</body>

</html>

字符集

utf-8 --> 目前最常用的字符集编码方式,包含全世界的语言

gb2312 --> 简体中文 6763个汉字

BIG5 --> 繁体

GBK --> 全部中文字符

标题

--> 通过<h1> ~ <h6>(标题由大至小)等标签进行定义的

--> 浏览器默认在标题后面增加空行

--> 确保标题的重要性

段落

--> 通过<p>标签进行定义的

--> 浏览器默认增加空行

--> 在不产生新的段落情况下进行换行,使用<br/>标签

--> 当现实页面的时候,浏览器会移除源代码多余的空格和空行,连续的空格和空行均算为一个空格

--> <hr /> 段落标签生成水平线

HTML元素

start tag ~ end tag的所有代码

HTML元素语法

以开始标签起始

以结束标签终止

元素内容是s~e之间的内容

允许空内容

空元素在开始标签中进行关闭

--> <br>即没有关闭标签的空元素

--> 空元素必须关闭

--> <br /> 关闭空元素的正确方法

大多数HTML元素可拥有属性

属性

HTML标签可以拥有属性,属性总以名称/值对的形式出现

属性总是在开始标签中规定

例

<html>

<body>

This is a link</a>

</body>

</html>

div span --> 网页布局

div 分割,分区

span 跨度.跨距.范围

链接 --> 通过<a>标签进行定义的

图像 --> <img>标签进行定义的

注释

格式化

属性

<标签名属性1 = "属性值1" 属性2 = "属性值2"....>内容</标签名>

属性之间不区分先后顺序

属性具有默认值

图片

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.w3school.com.cn/">Visit W3School</a>

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

ame 属性创建 HTML 页面中的书签。

书签对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

base --> 可以设置整体连接的打开状态

特殊字符

注释标签

条件注释

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

列表标签

无序列表ul

<ul>

</ul>

注意:

ul中只能放入li标签

li标签内可以放入所有的元素

有序列表ol

<ol>

</ol>

自定义列表

<dl>

<dt>...</dt> --> 名词dt

<dd>...<dd> --> dt解释

<dl>

表格

语法格式

<table> --> 外围

<tr> --> 每行

<td>单元格内的文字</td> --> 单元格

....

</tr>

...

</table>

注意事项

tr内固定,不能放其他标签

td中可以放任意标签

属性

表头标签 --> th

表格标题 --> <caption>...</caption>

表格结构

<thead> --> 表头

<tbody> --> 主体

合并单元格

<rowspan> --> 跨行

<colspan> --> 跨列

多出几行几列,即删除几行几列

表单标签

--> 表单域 + 提示文本 + 表单控件

表单控件

input控件 --> 单标签

input type = "button" value = "..."

input type = "submit" value = "..."

input type = "reset" value = "..."

input type = "imge" src = "....jpg"

input type = "file"

label标签

<label> 输入账号 : <input type = "text" /> </label> --> label直接进行包裹

文本域 --> textarea控件(文本域)

文本内容

</textarea>

下拉菜单 --> select中至少包含一对option / 在option中定义select = "selected",默认项

表单域 --> form

创建一个表单,以实现用户信息的收集和传递,form中所有的内容都会提交给服务器

各种表单空间

</form>

Action --> 在表单收集到信息后,需要将信息传递给服务器进行处理

--> 该属性用于指定并处理表单数据的服务器url地址

method --> 设置表单的数据的提交方式,其取值为get或post

name --> 指定表单的名称,以区分一个页面的多个表单

(注意表单都应有自己的表单域)

HTML5

发展历程

通常所说H5 = HTML5 + CSS3 + Javascript组合而成的应用开发平台

语法规范

HTML先后经历HTML4.01 ,XHTML1.0 HTML5几个重要版本

为了保证浏览器能够兼容不同版本的语法规范 -->使用<!DOCTYPE>指示浏览器

--> 首行<!DOCTYPE>提前声明

语义化标签

--> h5增加大量更有意义的语义标签,利于搜索引擎或辅助设备理解HTML页面内容

<nav> --> 导航

<header> --> 页眉

<footer> --> 页脚

<section> --> 区块

<article> --> 文章

<aside> --> 侧边栏

progress --> 进度条

datalist --> 标签定义选项列表中.与input配合使用

...

</datalist>

fieldset --> 可将表单内的相关元素分组,打包,与legend搭配

</fieldlist>

新增属性

多媒体标签

--> embed 标签定义嵌入内容

--> audio 播放音频

不同的浏览器可支持的播放格式是不一样的

兼容模式的写法

</audio>

--> video 播放视频

autoplay --> 自动播放

controls --> 是否显示默认播放控件

loop --> 循环播放

width --> 设置窗口宽度

height --> 设置窗口高度