Web前端入门第 6 问：HTML 的基础语法结构
HTML的全称为超文本标记语言（HyperText Markup Language），基础语法结构由标签、元素、属性和内容组成，遵循层级嵌套的树形结构。
关键语法规则
标签（Tags）
- 双标签语法
标签成对出现，由一个开始标签和结束标签组成。如：
<div></div>
- 单标签语法
标签只有开始标签，没有结束标签。如：
<img >
<br >
<br />
html5 规范允许 <br /> 写作 <br>，两种写法都是正确的。
元素（Elements）
由开始标签、内容和结束标签组成。如：
<p>这是段落内容</p>
属性（Attributes）
位于开始标签内，格式为 name="value"。
常见属性：
id：唯一标识符，如：
<div id="header"></div>
class：定义 CSS 类，如：
<p class="text-red">段落</p>
href：链接地址，如：
<a href="https://example.com">链接</a>
src：资源路径，如：
<img src="data:image.jpg">
注释
语法：<!-- 注释内容 -->，不会在页面显示，用于说明代码。如：
<!-- 引入一个静态图片，广告banner图 -->
<img src="data:image.jpg">
嵌套规则
元素必须正确嵌套，禁止交叉。
正确示例：
<div>
<p>段落1</p>
<img src="data:image.jpg">
<p>段落2</p>
</div>
错误示例：
<p>段落1 <div> </p>
<p>段落2</p> </div>
div 标签与 p 标签交叉，此类语法是错误的，浏览器会自我修正，会导致文档结构显示异常！！
代码规范建议
缩进使用 2 或 4 个空格，保持层级清晰。
属性值始终用双引号包裹。
自闭合标签无需斜杠（HTML5 规范），如
<img src="...">。
HTML 基础文档结构
<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 根元素，lang 属性定义语言 -->
<html lang="zh-CN">
<head>
<!-- 字符编码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 显示在浏览器标签页 -->
<title>页面标题</title>
<!-- 引入外部 CSS -->
<link rel="stylesheet" href="style.css">
<!-- 引入 JavaScript -->
<script src="script.js"></script>
</head>
<body>
<!-- 页面可见内容 -->
<h1>一级标题</h1>
<p>这是一个段落。</p>
</body>
</html>
Web前端入门第 6 问：HTML 的基础语法结构的更多相关文章
- web前端学习python之第一章_基础语法(二)
web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端学习python之第一章_基础语法(一)
web前端学习python之第一章_基础语法(一) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...
- web前端入坑第五篇：秒懂Vuejs、Angular、React原理和前端发展历史
秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...
- web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】
http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端（15）—— JavaScript的数据类型，语法规范2
Object对象 说这个对象之前,如果您对编程语言开发稍微有点了解的话,应该知道面向对象是什么意思,而js也有面向对象一说,就因为如此,js才会这么强大. 什么是面向对象 其实所有支持面向对象的编程语 ...
- web前端（14）—— JavaScript的数据类型，语法规范1
编辑器选择 对js的编辑器选用,有很多,能对html编辑的,也能对js编辑,比如notepad++,visual studio code,webstom,atom,pycharm,sublime te ...
- web前端到底是什么？有前途吗
web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > ...
- 你真的了解Web前端开发吗？未来前端远比你想的有前途！
近几年来,随着 HTML5.JS 的流行,前端这个职业火热了起来!不少人发出疑惑,前端以后还会更有前途吗? 我只能告诉你:前端不灭 现在都明白了用户体验至上,还要用着舒服 后端提供床,前端提供颜值高的 ...
- 吐槽一下--最近多次在腾讯以及万科的面试经历---Web前端与PHP后端开发
前端时间,由于职业发展等,想要换一份工作,于是投递了一些国内还算知名的公司,列如: 腾讯.万科之类的: (1)首先说一下这两家公司的反馈情况: 腾讯:投递到反馈,(初次人事打电话沟通)大约1周,三次不 ...
随机推荐
- 【Rive】眼睛互动动画
1 前言 本文基于 Rive 社区开放的眼睛动画,进一步加工处理,实现更有趣的眼睛互动动画. 原始资源见 → Eye Joysticks Demo,效果如下. 原始资源只有一只眼睛,并且没 ...
- 冒泡排序------python实现
if __name__ == '__main__': ''' 算法描述 1.比较相邻的元素,更具大小交互位置 2.对每一对相邻元素作同样的工作,从开始第一队到结尾的最后一对,即可选出最大的数 3.所有 ...
- SHA256 64 位加密
/// <summary> /// SHA256 64位加密 /// </summary> /// <param name="input">&l ...
- C#中字符串格式化string.Forma中需要使用t转义字符的情况处理
此处汇总一下C#中字符串格式化string.Forma中需要使用t转义字符的情况处理. 1.C# string.Format() 方法中占位大括号的外面还有大括号,此时就需要使用转义大括号{}. 处理 ...
- Python开发环境的构建：使用Anaconda与Pycharm
Anaconda是一个科学计算环境,当在电脑上安装好Anaconda3以后,就相当于安装好了Python,还有一些常用的库,如numpy,scrip,matplotlib等库. (如果你这里没有安装a ...
- 基于开源IM即时通讯框架MobileIMSDK：RainbowChat-iOS端v9.0版已发布
关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持 UDP .TCP .WebSocket 三种协议,支持 iOS ...
- 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-9- 浏览器的相关操作 （详细教程）
1.简介 在自动化测试领域,元素定位是非常重要的一环.正确定位页面元素是测试用例能否成功执行的关键因素之一.playwright是一种自动化测试工具,它提供了丰富的元素定位方法,可以满足不同场景下的定 ...
- 记一次cannot access its superinterface问题的的排查 → 强如Spring也一样写Bug
开心一刻 昨天在幼儿园,领着儿子在办公室跟他班主任聊他的情况 班主任:皓瑟,你跟我聊天是不是紧张呀 儿子:是的,老师 班主任:不用紧张,我虽然是你的班主任,但我也才22岁,你就把我当成班上的女同学 班 ...
- 在 .NET 中使用 Tesseract 识别图片文字
1. 什么是 Tesseract Tesseract 是一个强大的字符识别 (OCR) 工具.它最初由 HP 发布,现在由 Google 和学术社区共同维护和开发. Tesseract 支持多种语言和 ...
- 如何快速的开发一个完整的iOS直播app(推流篇)
开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如何利用FFMPEG编码和推流,并且介绍了FFMPEG常见命令. 效果 一.安装Homebrew Homebre ...