本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！
HTML 到底是什么？
HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。
我们从 HTML 中文全称来分析一下它的本质：
1) 超文本
也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。
超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。
2) 标记语言
HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：
标签表示一张图片；-
标签表示一个表格；
标签表示一个输入框；
标签表示一段文本；
标签表示文本加粗效果；
标签表示块级布局。HTML文档结构
HTML 页面的基本结构如下所示，其中包含了各种创建网页所需的标签（例如 doctype、html、head、title 和 body 等）。
<!--这是html的注释信息--> <!--这是DOCTYPE声明--> <!DOCTYPE html> <!--这是根--> <html> <!--这是头--> <head> <!-- 描述性标签 --> <meta charset = "UTF-8"> <!--标题栏--> <title>Hello</title> </head> <!--网页体--> <body> <!--这里的内容显示到网页上--> 这是我的第一个HTML页面 </body> </html>语法说明如下：
：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；<meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；<title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
由于 HTML 文档属于文本文件，所以我们可以使用任何文本编辑器来创建和修改 HTML 文件，对于初学者来说最好使用系统自带的文本编辑器，例如 Windows 记事本、Linux Vim 和 Mac OS TextEdit，当有了一定的基础之后再选用专业的文本编辑器，例如 Notepad++、Sublime Text、VS Code 等。
另外，您必须将 HTML 文档保存为
.html或者.htm格式才可以直接在浏览器中打开并浏览其中的内容。例如上面的示例代码，将其保存在一个名为 index.html 的文件中，双击即可在浏览器中看到运行结果。HTML文档的基本标签
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
<!--这是html的注释信息--> <!--这是根--> <!--这是头--> <!-- 描述性标签 --> <meta> <!--标题栏--> <title>基本标签</title> <!--网页体--> <!--标题标签--> <h1 id="一级标签">一级标签</h1> <h2 id="二级标签">二级标签</h2> <h3 id="三级标签">三级标签</h3> <h4 id="四级标签">四级标签</h4> <h5 id="五级标签">五级标签</h5> <h5 id="六级标签">六级标签</h5> HTML是一种超文本标记语言，是一种浏览器上的规范 超文本是指，流媒体，声音，视频，图片等 标记语言 由大量的标签组成 <!--段落标签--> <p>HTML是一种超文本标记语言，是一种浏览器上的规范</p> <p>超文本是指，流媒体，声音，视频，图片等</p> <p>标记语言 由大量的标签组成</p> <!--换行标签--> HTML是一种超文本标记语言，是一种浏览器上的规范 <br> 超文本是指，流媒体，声音，视频，图片等 <br> 标记语言 由大量的标签组成 <!--水平线标签--> <hr> <!--字体样式标签--> <!--粗体，斜体--> <br> 粗体：<strong>THER</strong> 斜体：<em>THER</em> <!--特殊符号标签--> <br> 空 格 空 格 <br> 大于号：> <br> 小于号：
HTML文档的图像标签
常见的图像格式：JPG,GIF,PNG,BMP……
<meta> <title>图像标签学习</title> <!--img学习 src（必填）：图片地址：相对地址，绝对地址 alt（必填）:图片名字 title：悬停文字 width：宽度 height：高度 --> <img src="/static/imghwm/default1.png" data-src="../resources/image/Cat.png" class="lazy" alt="HTML 하이퍼텍스트 마크업 언어 - 하이퍼는 어디에 있습니까? (문서분석)" >
超链接标签及应用
-
a标签
- href：必填，表示要跳转到那个界面
- target：表示新标签页在哪里打开（默认在当前标签）
- _blank:新一个标签页
- _self：当前标签页
- 锚链接 （页面内的跳转）
- 1.需要一个锚标记
- 2.跳转到标记处
- 功能性链接
- 邮件链接：mailto：
- QQ链接：qq推广
举例：
<html> <head> <meta charset = "UTF-8"> <title>链接标签学习</title> </head> <body> <!--使用name作为标记--> <a name="top"></a> <!--a标签 href：必填，表示要跳转到那个界面 target：表示新标签页在哪里打开（默认在当前标签） _blank:新一个标签页 _self：当前标签页 --> <a href="hello.html"target="_parent">点击我跳转到页面1</a> <br> <a href="图像标签.html"target="_self"><strong>点击我跳转到页面2</strong></a> <br> <a href="基本标签.html">点击我跳转到页面3</a> <br> <a href="链接标签.html">点击我跳转到页面4</a> <br> <!--a标签的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="/static/imghwm/default1.png" data-src="../resources/image/Cat.png" class="lazy" alt="Cat"title="点击跳转到我的博客" style="max-width:90%" style="max-width:90%"> </a> <br> <!--a标签的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="/static/imghwm/default1.png" data-src="../resources/image/Cat.png" class="lazy" alt="Cat"title="点击跳转到我的博客" style="max-width:90%" style="max-width:90%"> </a> <br> <!--a标签的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="/static/imghwm/default1.png" data-src="../resources/image/Cat.png" class="lazy" alt="Cat"title="点击跳转到我的博客" style="max-width:90%" style="max-width:90%"> </a> <br> <!--a标签的嵌套使用--> <a href="http://liukaixuan.cn"target="_blank"> <img src="/static/imghwm/default1.png" data-src="../resources/image/Cat.png" class="lazy" alt="Cat"title="点击跳转到我的博客" style="max-width:90%" style="max-width:90%"> </a> <br> <!--锚链接 （页面内的跳转） 1.需要一个锚标记 2.跳转到标记处 --> <a href="#top">点我回到顶部</a> <a href="图像标签.html#第四张照片的位置">点我跳转到指定位置</a> <!--功能性链接 邮件链接：mailto： QQ链接：qq推广 --> <a href="mailto:1920914318@qq.com">点击联系我</a> <br> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img src="/static/imghwm/default1.png" data-src="http://wpa.qq.com/pa?p=2::52" class="lazy" border="0" alt="点击这里给我发消息" title="点击这里给我发消息"/> </a> </body> </html>行内元素和块元素
- 块元素
- 无论内容多少，该元素独占一行
- 例如（p/h1-h6……）
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- 例如（a、strong、em……）
列表
列表的分类
- 无序列表：ol标签
- 有序列表：ul标签 应用范围：导航，菜单栏
- 自定义列表
- dl：标签
- dt：列表名称
- dd：列表内容
列表中也可以实现嵌套
示例代码：
<meta> <title>列表学习</title> <!--有序列表--> <ol> <li>java</li> <ol> <li>java</li> <li>python</li> <li>c++</li> </ol> <li>python</li> <li>c++</li> </ol> <hr> <!--无序列表-->
- java
- java
- python
- c++
- python
- c++
- 学科
- Java
- Python
- C++
- 地点
- 陕西
- 河南
- 曹县
表格标签
- 为什么学习表格?
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<meta> <title>表格学习</title> <!--表格table 行：tr 列：td -->
1-1 2-1 2-2 2-3 2-4 3-1 3-2 3-3 媒体元素
- 视频元素
- video
- 音频元素
- audio
<meta> <title>媒体元素学习</title> <!--音频和视频--> <!--视频 src：资源路径 controls：控制条 autoplay：自动播放 --> <video></video> <!--音频--> <audio></audio> <audio></audio>
页面结构分析
元素名 描 述 header 标题头部区域的内容（用于整个页面或页面中的一块区域） footer 标题脚部区域的内容（用于整个页面或页面中的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用（常用于侧边栏） nav 导航类的辅助内容 iframe内联框架
<meta> <title>iframe内联框架学习</title> <!--iframe src（必填）：引用页面地址 name:框架标识名 --> <iframe></iframe> <iframe></iframe>
HTML表单
表单语法：
- 表单form
- action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
- method:post,get提交方式
- get:我们可以在url中看到我们提交的信息，不安全，高效
- post：在url看不到提交的信息，安全，可以传输大文件。
表单基本控件示例代码：
nbsp;html> <meta> <title>表单学习--登录注册</title> <h1 id="注册">注册</h1> <!--表单form action：表单提交的位置，可以是网站，也可以是一个请求处理的地址 method:post,get提交方式 get:我们可以在url中看到我们提交的信息，不安全，高效 post -->表单的应用
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
表单初级验证
- 常用方式：
- placeholder：提示信息，用在输入框控件中
- required：不能为空，必须有值才能提交，用在输入框控件
- pattern：正则表达式验证
相关推荐：《html视频教程》
标签表示一张图片；
위 내용은 HTML 하이퍼텍스트 마크업 언어 - 하이퍼는 어디에 있습니까? (문서분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML 너머 : 웹 개발을위한 필수 기술Apr 26, 2025 am 12:04 AM강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.
HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.
HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AMHTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.
HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AMHTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.
마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AMHTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AMHTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AMHTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
