0

0

HTML超文本标记语言--超在那里?(文档分析)

青灯夜游

青灯夜游

发布时间:2022-08-02 18:04:52

|

3420人浏览过

|

来源于csdn

转载

本篇文章带大家了解一下html(超文本标记语言),介绍一下html的本质,html文档的结构、html文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

HTML超文本标记语言--超在那里?(文档分析)

HTML 到底是什么?

HTML 英文全称是 Hyper Text Markup Language,中文译为“超文本标记语言”,专门用来设计和编辑网页。

我们从 HTML 中文全称来分析一下它的本质:

立即学习前端免费学习笔记(深入)”;

1) 超文本

也即超越纯文本,这意味着 HTML 文档不仅能包含文本(文字),还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。

超链接是互联网的纽带,它能将众多网页连接起来,让它们交织在一起,形成一张“网”。没有超链接,就没有互联网。

2) 标记语言

HTML 是一种计算机语言,但它不能编程,只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等,例如:

  • HTML超文本标记语言--超在那里?(文档分析) 标签表示一张图片;

  • 标签表示一个链接;

  • 标签表示一个表格;
  • 标签表示一个输入框;

  • 标签表示一段文本;

  • 标签表示文本加粗效果;

  • 标签表示块级布局。

    HTML文档结构

    HTML 页面的基本结构如下所示,其中包含了各种创建网页所需的标签(例如 doctype、html、head、title 和 body 等)。

    @@######@@

    语法说明如下:

    • :这是文档类型声明,用来将文档声明为 HTML 文档(从技术上来说它并不是标签),doctype 声明不区分大小写;

    • :该标签是 HTML 页面的根标签,其他所有的标签都需要在 和 标签之间定义;

    • :该标签中用来定义 HTML 文档的一些信息,例如标题、编码格式等等;

    • :用来指明当前网页采用 UTF-8 编码,UTF-8 是全球通用的编码格式,绝大多数网页都采用 UTF-8 编码;

    • :该标签用来定义网页的标题,网页标题会显示在浏览器的标签栏;

    • :该标签用来定义网页中我们能通过浏览器看到的所有内容,例如段落、标题、图片、链接等等;

    由于 HTML 文档属于文本文件,所以我们可以使用任何文本编辑器来创建和修改 HTML 文件,对于初学者来说最好使用系统自带的文本编辑器,例如 Windows 记事本、Linux Vim 和 Mac OS TextEdit,当有了一定的基础之后再选用专业的文本编辑器,例如 Notepad++、Sublime Text、VS Code 等。

    另外,您必须将 HTML 文档保存为.html或者.htm格式才可以直接在浏览器中打开并浏览其中的内容。例如上面的示例代码,将其保存在一个名为 index.html 的文件中,双击即可在浏览器中看到运行结果。

    HTML文档的基本标签

    • 标题标签

      KAIZAN.ai
      KAIZAN.ai

      使用AI来改善客户服体验,提高忠诚度

      下载
    • 段落标签

    • 换行标签

    • 水平线标签

    • 字体样式标签

    • 注释和特殊符号

    @@######@@

    HTML文档的图像标签

    常见的图像格式:JPG,GIF,PNG,BMP……

    @@##@@

    @@######@@

    超链接标签及应用

    • a标签  
      • href:必填,表示要跳转到那个界面
      • target:表示新标签页在哪里打开(默认在当前标签)
        • _blank:新一个标签页
        • _self:当前标签页
    • 锚链接 (页面内的跳转)
      • 1.需要一个锚标记
      • 2.跳转到标记处
    • 功能性链接
      • 邮件链接:mailto:
      • QQ链接:qq推广

    举例:

    @@######@@

    行内元素和块元素

    • 块元素
      • 无论内容多少,该元素独占一行
      • 例如(p/h1-h6……)
    • 行内元素
      • 内容撑开宽度,左右都是行内元素的可以排在一行
      • 例如(a、strong、em……)

    列表

    列表的分类

    • 无序列表:ol标签
    • 有序列表:ul标签 应用范围:导航,菜单栏
    • 自定义列表
      • dl:标签
      • dt:列表名称
      • dd:列表内容

    列表中也可以实现嵌套

    示例代码:

    @@######@@

    表格标签

    • 为什么学习表格?
      • 简单通用
      • 结构稳定
    • 基本结构
      • 单元格
      • 跨行
      • 跨列
    @@######@@

    媒体元素

    • 视频元素
      • video
    • 音频元素
      • audio
    @@######@@

    页面结构分析

  • 元素名 描 述
    header 标题头部区域的内容(用于整个页面或页面中的一块区域)
    footer 标题脚部区域的内容(用于整个页面或页面中的一块区域)
    section Web页面中的一块独立区域
    article 独立的文章内容
    aside 相关内容或应用(常用于侧边栏)
    nav 导航类的辅助内容

    iframe内联框架

    
    
    
    
    
    
    
    
        
        
        Hello
    
    
        
        
        
        这是我的第一个HTML页面
        
    

    HTML表单

    表单语法:

    1.png

    • 表单form
      • action:表单提交的位置,可以是网站,也可以是一个请求处理的地址
      • method:post,get提交方式
        • get:我们可以在url中看到我们提交的信息,不安全,高效
        • post:在url看不到提交的信息,安全,可以传输大文件。

    HTML超文本标记语言--超在那里?(文档分析)

    表单基本控件示例代码

    
    
    
    
    
        
        
        
        基本标签
    
    
    
    
    
    

    一级标签

    二级标签

    三级标签

    四级标签

    五级标签
    六级标签
    HTML是一种超文本标记语言,是一种浏览器上的规范 超文本是指,流媒体,声音,视频,图片等 标记语言 由大量的标签组成

    HTML是一种超文本标记语言,是一种浏览器上的规范

    超文本是指,流媒体,声音,视频,图片等

    标记语言 由大量的标签组成

    HTML是一种超文本标记语言,是一种浏览器上的规范
    超文本是指,流媒体,声音,视频,图片等
    标记语言 由大量的标签组成

    粗体:THER 斜体:THER
    空 格 空 格
    大于号:youjiankuohaophpcn
    小于号:zuojiankuohaophpcn

    表单的应用

    • 隐藏域:hidden
    • 只读:readonly
    • 禁用:disabled

    表单初级验证

    • 常用方式:
      • placeholder:提示信息,用在输入框控件中
      • required:不能为空,必须有值才能提交,用在输入框控件
      • pattern:正则表达式验证

    相关推荐:《html视频教程

    HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)表单语法格式在这里插入图片描述
    
    
        
        图像标签学习
    
    
    
    
    
    @@##@@
    
    
    
    
        
        链接标签学习
    
    
    
    
    
    
    点击我跳转到页面1
    
    点击我跳转到页面2
    点击我跳转到页面3
    点击我跳转到页面4
    @@##@@
    @@##@@
    @@##@@
    @@##@@
    点我回到顶部 点我跳转到指定位置 点击联系我
    @@##@@
    
    
        
        列表学习
    
    
    
    
    
    
    1. java
      1. java
      2. python
      3. c++
    2. python
    3. c++

    • java
      • java
      • python
      • c++
    • python
    • c++

    学科
    Java
    Python
    C++
    地点
    陕西
    河南
    曹县
    
    
        
        表格学习
    
    
    
    
    
    
    1-1
    2-1 2-2 2-3 2-4
    3-1 3-2 3-3
    
    
        
        媒体元素学习
    
    
    
    
    
    
    
    
    
    
        
    
    
    
    
    
        
        iframe内联框架学习
    
    
    
    
    
    
    
    
    
    
    
        
        表单学习--登录注册
    
    
    

    注册

    名字:

    密码:

    性别:

    爱好: 睡觉 吃饭 打豆豆

    按钮:

    选项:

    邮件:

    URL:

    数字:

    滑块:

    搜索:

    自定义邮箱:

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

510

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

248

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

738

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

211

2023.08.11

正则表达式空格
正则表达式空格

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

350

2023.08.31

Python爬虫获取数据的方法
Python爬虫获取数据的方法

Python爬虫可以通过请求库发送HTTP请求、解析库解析HTML、正则表达式提取数据,或使用数据抓取框架来获取数据。更多关于Python爬虫相关知识。详情阅读本专题下面的文章。php中文网欢迎大家前来学习。

293

2023.11.13

正则表达式空格如何表示
正则表达式空格如何表示

正则表达式空格可以用“s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。想了解更多正则表达式空格怎么表示的内容,可以访问下面的文章。

232

2023.11.17

正则表达式中如何匹配数字
正则表达式中如何匹配数字

正则表达式中可以通过匹配单个数字、匹配多个数字、匹配固定长度的数字、匹配整数和小数、匹配负数和匹配科学计数法表示的数字的方法匹配数字。更多关于正则表达式的相关知识详情请看本专题下面的文章。php中文网欢迎大家前来学习。

528

2023.12.06

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

CSS教程
CSS教程

共754课时 | 19.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号