-
HTML介绍——HTML筑基
用户在通过Internet访问浏览网页时，会看到各种文字信息、链接、图标等等的内容。
前言
按下
F12，网页源码如下：
HTML：也就是Hyper Text Markup Language 的缩写，中文翻译超文本标记的语言，是制作网页的最基本语言，具体特点如下：
- Hyper（超）：相对于线性Linear而言的，HTML之前的计算机程序大多都是线性，也就是必须由上至下顺序执行，但是HTML制作的网页可以从其中的超链接随意跳转访问。
- Text（文本）：不同于一些编译型的语言，例如C、C++或者Java等等，HTML是一种文本解释性的语言，源码不经过编译而是通过直接在浏览器中翻译运行。
- Markup（标记）：HTML的基本规则就是标记语言（成对尖括号构成的标签元素）来描述网页内容如何在浏览器中显式。
- language（语言）：HTML是一种语言，但是具体是一种解释型语言，所有的标记都会被浏览器翻译成最终显示的效果。
更详细的解释请看该文：HTML文件介绍。
一、HTML标签介绍
所有 HTML 标签都有一个标签名称，有些标签还有一个可选的属性列表。这些标签在使用时必须用尖括号“<”和“>”括起来，而且一般都是成对出现的，无斜杠的标签表示该标签的作用是开始，有斜杠的标签表示该标签的作用是结束。
HTML标签和大小写是无关的，
和表示的意思一样，推荐使用小写。<标签名>内容标签名>- 1
- 双标签：双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 表示，只有一对标签一起使用才能表示一个具体的含义。例如
表示一个 HTML 文档。 - 单标签：指的是标签没有成双成对出现，也就是只用一个标签就能够表示一个具体的含义，例如
、
二、HTML属性
HTML属性一般出现在HTML标签中，是HTML标签的一部分，属性能够对标签进行补充说明。在一行文本中采用标题标签
。<h1>学习“使用前端技术展现Web系统”课程h1>- 1
也可以利用属性进一步指定文本居中显示：
<h1 align="center">“使用前端技术展现Web系统”h1>- 1
所有属性都放在起始标签的尖括号内，并相互用空格分开。有些属性要求用引号，有些则不要求，大多数属性（只包括字母、数字、连字符和点号的）可以不需要引号。例如，可以写成 align=center 或 align = “center”，所有浏览器均能用相同方式显示。但是，包括空格、%、# 等其他字符的属性值则需要用引号。例如用
width属性表示文档元素占文档窗口宽度的百分数，则必须写成width="100%"。但同样是为了符合 W3C 标准，要求所有的属性值都使用引号。在一个标签中可以设置多个属性，语法形式如下：
<标签名 属性名1="属性值1" 属性名2="属性值2" ... 属性名N="属性值N">内容标签名>- 1
有多个属性说明标签时，它们出现的先后顺序不影响页面显示的结果。
W3C标准
常用的规范如下：
- 由一对尖括号包裹的单词构成，例如：
。 - 标签不区分大小写
和，推荐使用小写。 - 标签分为两部分：开始标签<
html>和结束标签，两个标签之间的部分称之为标签体。 - 有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如：
、
、 - 标签可以嵌套，例如：
；但是不能交叉嵌套，例如：。
< html>标签
标签标识当前文档是HTML文件。标签置于HTML文档的最前边，用来标识HTML文档的开始，而标签标识恰好相反，放在文档的最后。两个文档标签必须成对使用，网页的所有其他内容都会被放在
和标签之间。<html> 包含<head>、<body>等其他标签 html>- 1
- 2
- 3
作用如下：
- 可以在浏览者保存该页面时成为默认的保存文件名。
- 方便搜索引擎索引界面。
- 搜索引擎显示的页面标题往往就是网页
</code>标签的内容。</li><li>可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。</li></ul> <hr> <h2><a name="t6"></a><a id="_head_84"></a>< head>标签</h2> <p><code><head>.</code>标签是一个容器，包含其他位于文档头部的标签元素，把这个标签放到文档的开始处，紧跟着<code><html></code>标签后面，该标签主要定义了HTML文档的头部，其中包含的内容主要包括对页面的一些基本描述。如标题、关键字等。</p> <p>基本用法如下：</p> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-xml has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> 头部标签元素 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.179157;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <div class="table-box"><table><thead><tr><th>标签</th><th>描述</th></tr></thead><tbody><tr><td><code><title></code></td><td>定义页面的标题内容（唯一必须的头部标签）</td></tr><tr><td><code><base></code></td><td>当前的文档基准地址，其他相对地址都建立在此基准地址之上。</td></tr><tr><td><code><style></code></td><td>定义CSS层叠样式表的内容。</td></tr><tr><td><code><link></code></td><td>定义外部文件的链接，最常见的用途就是链接外部样式表。</td></tr><tr><td><code><scripts></code></td><td>定义页面中程序脚本的内容。</td></tr><tr><td><code><meta></code></td><td>提供关于页面的元信息，能够提供文档作者、关键字、描述等多种信息。</td></tr></tbody></table></div> <h2><a name="t7"></a><a id="HTML5_104"></a>HTML5增加的属性</h2> <ul><li>给input（type == text）、select、textarea和button元素新增加的autofocus属性。指定属性的方式让元素在画面打开时就会自动获取焦点。</li><li>给input元素（type == text）和textarea元素新增加的placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。</li><li>给input、output、select、textarea、button和fields新增加了form属性，声明其属于哪个表单，然后将其放置在页面上的任意位置，而不是表单之内。</li><li>给input元素（type == text）和textarea元素新增加的required属性。该属性指明了用户提交的时候进行检查，检查该元素内一定要有输入的元素。</li><li>给input元素增加了autocomplete、min、max、multiple、pattern和step属性，同时还有一个新的list元素和datalist元素配合使用，datalist元素和autocomplete属性配合使用。multiple属性允许在上传文件时一次性上传多个文件。</li><li>给input元素、button元素和form元素增加了novalidate属性，该属性可以在取消提交时进行检查，表单可以被无条件的提交。</li></ul> <p>剩下的内容具体请见：<a href="https://www.php.cn/html5-tutorial-410265.html">HTML5新增属性详情。</a></p> <hr> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1312465">电力系统IEEE14节点系统同步模型（Simulink）</a> <br /> <a href="/Article/Index/1204951">贪心，动态规划的区别</a> <br /> <a href="/Article/Index/806845">用Python绘制了若干张词云图，超级惊艳</a> <br /> <a href="/Article/Index/779382">unity之粒子特效制作图片拼合文字效果</a> <br /> <a href="/Article/Index/1436059">广州小程序开发公司怎么找？</a> <br /> <a href="/Article/Index/1706172">CountDownLatch（应对并发问题的工具类）</a> <br /> <a href="/Article/Index/1096402">HTML做一个个人博客页面（纯html代码）</a> <br /> <a href="/Article/Index/846299">《代码大全2》第6章 可以工作的类</a> <br /> <a href="/Article/Index/743505">积分简明笔记-第二类曲线积分的类型</a> <br /> <a href="/Article/Index/1048347">长沙市2022年成人高考疫情防控补充公告</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_42544728/article/details/126785389 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>