1.html究竟是什么？
从字面上理解，html是超文本标记语言hyper text mark-up language的首字母缩写，指的是一种通用web页面描述语言，是用来描述我们打开浏览器就能看到的各种web页面的。
所以说，写html代码根本和 编程都扯不上边，不要一听源码两个字就绝望，以为要你攻读计算机学位似的。
你只要知道当你要在网页中展示内容的时候该用哪个标记就可以了。
即使一开始记不 住，也没关系，查课本，问度娘，分分钟搞定，用过几次，想记不住都难。
最近风靡各大博客和写作平台的markdown大家知道吧，html比它复杂不了多少。
目前最新版本是html5，比之前的版本有了质的飞跃，被新媒体领域寄予了厚望，特别是在移动端的应用，进行的如火如荼。
关于html5，可以另外开个话题来讲。今天不再多说。
2.html文档基本结构
首先需要明确一个概念，html文档是由元素组成的。基础文档元素有4个，任何HTML文档都需要所有这些元素。
每个html文档都需要以DOCTYPE元素开头，这样的目的是告诉浏览器：“即将要打开的文档类型是html，请按照html解析规则进行处理。
有的同学会发现，即使不写DOCTYPE元素，大多数浏览器仍然能够正确显示文档的内容。
但是在这里提醒大家的是，这样做并非明智之举，长期来看，过分依赖浏览器的“善解人意”，会使你在关键时刻抓狂。
html元素是html文档的根元素，里面包含真正的html内容。
html元素由head元素和body元素组成。
head元素中包含文档的元数据等信息，在html5中规定head元素中必须包含一个title元素。
body元素用于包装要展示在浏览器窗口中的文档内容。
他们之间的关系可以这样来理解，head元素本身不是文档内容，但是提供了关于后面的包装在body中的文档内容的重要信息。
对于用户来说，重要的是body元素里面的内容，但是若想要成功展示body元素中的内容，则离不开head元素。
所以说，当你创建一个下面这样的html文件，实际上就完成了一个web页面的创建。
1 <!DOCTYPE HTML >2 <html>3 <head>4 <title>我的第一个web应用</title>5 </head>6 <body>7 </body>8 </html>
但是，当使用浏览器打开这个页面的时候，会发现展示在你面前的是一个空白窗口，那是因为我们并没有往里添加任何实质性的内容。
就好比我们印刷了一本书，但这本书正文页面全部都是空白一样。但不管怎样说，它仍然是一本书。
要想设计开发出真正实用的网页，需要添加各种元素。
3.html标记基本语法
在《HTML5权威指南》中有这样一句话：“html是一种标记语言。其标记以应用于文档内容（例如文本）的元素为其存在形式”。
通俗来讲就是要想让浏览器正确执行你的指令，必须使用标记。这些标记是早就定义好了的，不能自己创造。
标记是个什么东东呢？我们上面的代码中就用到了，像
等这些写在尖括号里面的内容统统都是标记。而且绝大多数的标记是成对出现的。在html文档中一个应用了标记的元素基本语法如下：
<标记名称>元素内容</标记名称>
其中的 是开始标记， 标记名称> 结束标记， 元素内容 则指的是想要显示在浏览器窗口中的内容。
那么是不是所有的元素标记都有具有以上三要素呢？
并非如此。
当元素的开始标记和结束标记之间没有内容时，就是一个空元素。
空元素可以用一个更简洁的方式表达出来，就是将开始标记和结束标记合二为一，只用一个标记表示，比如 。
另外还有一些特殊的元素，使用一个标签来表示，称为虚元素。比如用于在页面中插入水平线的
，就是这样一种元素。
我们称成对出现的标记为双标记，反之则为单标记。
那html有多少标记呢？算上html5新增标记，大约有119个。
而最常用的则要少的多。
根据80/20原则，只要掌握约24（119*20%）个最常用标记，即可以解决80%的问题。
是否觉得欢欣鼓舞呢？
4.html常见标记及应用方法
新手熟悉以下标记的使用即可。
,
,
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PMThe official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PMThis article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SublimeText3 Mac version
God-level code editing software (SublimeText3)
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
