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

本篇文章带大家了解一下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文档的基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号

@@######@@

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标题脚部区域的内容(用于整个页面或页面中的一块区域)sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用(常用于侧边栏)nav导航类的辅助内容

iframe内联框架

            Hello                这是我的第一个HTML页面    

HTML表单

表单语法:

1.png

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

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

表单基本控件示例代码

                基本标签

一级标签

二级标签

三级标签

四级标签

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

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

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

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

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

粗体:THER斜体:THER
空 格空 格
大于号:>
小于号:<

表单的应用

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

表单初级验证

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

相关推荐:《html视频教程》

HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)表单语法格式在这里插入图片描述

        图像标签学习@@##@@
        列表学习
  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内联框架学习
        表单学习--登录注册

注册

名字:

密码:

性别: 男 女

爱好: 睡觉 吃饭 打豆豆

<!-- 按钮input type="button" 普通按钮input type="image" 图像按钮 提交按钮 重置按钮-->

按钮: <!-- -->

选项: A B C D

邮件:

URL:

数字:

滑块:

<!-- 搜索框

搜索:

自定义邮箱:

以上就是HTML超文本标记语言–超在那里?(文档分析)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1550934.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:09:13
下一篇 2025年12月19日 11:58:11

相关推荐

  • 一文详解HTML注释和颜色(颜色名、十六进制值)

    本篇文章带大家了解一下html注释和颜色,并分享一些常用颜色名、十六进制值,希望对大家有所帮助! 一、HTML注释(附带示例) HTML 注释主要用来对文档中的代码进行解释说明,注释也是代码的一部分,但浏览器会自动忽略注释的内容,所以用户在网页中是看不到注释的。 我们在编写代码时应该善用注释,因为一…

    2025年12月21日 好文分享
    000
  • 深入解析head标签中常用的头部标签

    标签的内容必须与当前文档有关,并且不应该过长,中文页面请尽量控制在 30 个字符(包括空格)以内。 2、 标签 标签用于为页面中所有相对链接指定一个基本链接,当您设置了基本链接后,当前页面中的所有相对链接都会使用这个基本链接作为前缀,如下例所示: 标签演示 视频教程 入门教程 上面的示例中第一个 标…

    2025年12月21日 好文分享
    000
  • html怎么设置按钮文字

    方法:1、设置“”和“”间的内容,语法“按钮文字”;2、设置input元素中value属性的值,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 html有两种按钮: button按钮 input按钮 立即学习“前端免费学习笔记(深入)”; 两种按钮设置按钮文字的…

    2025年12月21日
    000
  • html怎么让图片上下移动

    html让图片上下移动的方法:1、使用animation属性给图片绑定一个移动动画;2、使用“@keyframes 动画名称 {50%{transform:translateY(移动距离);}}”语句定义动画每一帧的动作,控制图片上下移动。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日
    000
  • html5中元素能拉伸宽度吗

    html中元素能拉伸宽度,只需要利用style、transform属性配合scaleX()函数设置元素宽度的拉伸倍数即可,语法为“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html5中元素能拉伸宽度吗 在html中,想要拉伸元素的宽度需要利用到style、tr…

    2025年12月21日
    000
  • html5中onclick是什么意思

    html5中onclick的意思是“单击”,onclick属性是鼠标事件的一种,在单击鼠标时触发,用于规定事件触发时执行的脚本,语法为“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html5中onclick是什么意思 onclick是HTML标记对象的一个属性。…

    2025年12月21日
    000
  • html怎么放大图片

    方法:1、利用width和height属性放大图片,语法“”;2、用style和transform属性放大图片,语法“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html怎么放大图片 在html中想要放大图片有两种方法 一种是重新设置图片元素的高度和宽度,这时候…

    2025年12月21日
    000
  • html不常用的标签有哪些

    html不常用的标签有:pre、figure、figcaption、em、strong、del、ins、sub、sup、ruby、bdo、vedio、audio、track、optgroup、output、progress、meter等等。 本教程操作环境:windows7系统、HTML5版、Del…

    2025年12月21日 好文分享
    000
  • HTML怎么设置td内容居中

    设置方法:1、利用align属性,语法“…”;2、利用style属性添加居中对齐样式,语法“…”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 HTML设置td内容居中 1、利用align属性 align 属性规定单元格中内容的水平对齐方式。当属…

    2025年12月21日
    000
  • html表格怎么设置行高

    html表格设置行高的方法:1、给tr或td元素设置height属性,语法“”;2、利用style属性给tr或td元素添加height样式,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 我们有下面一个表格: 商品价格T恤¥100牛仔褂¥250牛仔库¥150 怎…

    2025年12月21日 好文分享
    000
  • html怎样设置select默认不选中

    设置方法:1、在select标签内的第一个option标签设置为空;2、给option空标签添加“display:none”样式,即可设置select默认不选中,语法为“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html怎样设置select默认不选中 默认情况…

    2025年12月21日
    000
  • 十分钟搞懂form标签中的GET和POST提交方式

    本篇文章给大家带来了form标签中get和post两种提交方式的相关知识以及比较,form表单的作用是收集标签中的内容, … 中间可以由访问者添加类似于文本,选择,或者一些控制模块等等.然后这些内容将会被送到服务端,希望对大家有帮助。 form标签中的GET和POST 在HTML中,fo…

    2025年12月21日 好文分享
    000
  • html div怎么设置宽度

    html div设置宽度的方法:1、给div元素添加“width:宽度值;”样式设置固定宽度;2、给div元素添加“min-width:宽度值;”样式设置最小宽度;3、给div元素添加“max-width:宽度值;”样式设置最大宽度。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月21日 好文分享
    000
  • html怎么设置div高度

    html设置div高度的方法:1、给div元素添加“height:高度值;”样式设置固定高度;2、给div元素添加“min-height:高度值;”样式设置最小高度;3、给div元素添加“max-height:高度值;”样式设置最大高度。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月21日 好文分享
    000
  • html怎么设置div的透明度

    html设置div透明度的方法:1、利用opacity属性,只需要给div元素添加“opacity: 透明度值;”样式即可;2、利用filter属性,只需要给div元素添加“filter:opacity(透明度值);”样式即可。 本教程操作环境:windows7系统、CSS3&&HT…

    2025年12月21日 好文分享
    000
  • html怎么设置a标签位置

    设置方法:1、给a标签的父标签添加“position: relative;”样式,进行相对定位;2、给a标签添加“position: absolute;”样式进行绝对定位;3、用top、bottom、left、right属性控制a标签位置。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日
    000
  • html textarea怎么设置大小

    设置方法:1、给textarea设置cols和rows属性,语法“”;2、给extarea添加“width:宽度值;height:高度值;”样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 html textarea设置大小 标签定义一个多…

    2025年12月21日 好文分享
    000
  • html怎么设置下划线长度

    html设置下划线长度的方法:1、给元素添加“display: block;”样式将其变成块级元素;2、使用border-bottom属性设置下划线样式;3、利用width属性控制下划线长度,语法“width:长度值;”。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年12月21日
    000
  • html怎么禁止横向滚动

    在html中,可以利用overflow-x属性来禁止横向滚动,只需要给body元素添加“overflow-x:hidden;”样式即可;该样式可以规定当内容横向超出页面时,不提供横向滚动机制,而是裁剪并隐藏溢出的内容。 本教程操作环境:windows7系统、CSS3&&HTML5版、…

    2025年12月21日
    000
  • html怎么设置下拉框option不可选

    在html中,可以通过给option标签元素设置disabled属性,禁用指定选项,让指定option不可选,语法“选项值”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html中,可以通过给option标签元素设置disabled属性来让option不可选。 di…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信