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周,三次不 ...
随机推荐
- Qt音视频开发45-音视频类结构体参数的设计
一.前言 视频监控内核组件重构和完善花了一年多时间,整个组件个人认为设计的最好的部分就是各种结构体参数的设计,而且分门别类,有枚举值,也有窗体相关的结构体参数,解码相关的结构体参数,同时将部分常用的结 ...
- uniapp同城社区交友 仿小红书 APP小程序源码 含后台管理和网页端
注意(预防被骗) 本程序仅在 破晓店铺(https://shop.abyssdawn.com/).破晓一代网络科技淘宝店 出售其余地方均为骗子. 关于本程序 本程序适用于各种同城社区交友类产品,例如同 ...
- JedisPool和Jedis推荐的生命周期
在开发 Web 项目时,使用 Jedis 客户端与 Redis 进行交互时,通常建议将 JedisPool 设置为单例或静态的,而 Jedis 实例则不应该是单例的.以下是详细的解释和最佳实践: 1. ...
- 微服务实战系列（八）-网关springcloud gateway自定义规则-copy
1. 场景描述 先说明下项目中使用的网关是:springcloud gateway, 因需要给各个网关服务系统提供自定义配置路由规则,实时生效,不用重启网关(重启风险大),目前已实现:动态加载自定义路 ...
- Python使用技巧2
python url网址拼接 在做爬虫中,经常会遇到需要把一个域名和网址路径进行拼接,在开发时一时没想到方法,特此记录下来. 利用parse.urljoin方法进行网址拼接 from urllib i ...
- 网站架构核心技disruptor
一 序:本章业务场景:队列在数据结构中是一种线性表,从一端插入数据,然后从另一端删除数据.作者举例的场景有:进行异步处理.系统解耦.数据同步.流量削峰.缓冲.限流等. 前面的比较浅,总结起来,核心知识 ...
- Flu PG walkthrough Intermediate
nmap ┌──(root㉿kali)-[/home/ftpuserr] └─# nmap -p- -A 192.168.192.41 Starting Nmap 7.94SVN ( https:// ...
- 0511-Properties集合
package A10_IOStream; import java.io.*; import java.util.Properties; import java.util.Set; /* java.u ...
- 【译】MongoDB EF Core 提供程序：有什么新功能？
原文 | Rishit, Luce 翻译 | 郑子铭 这是 Rishit Bhatia 和 Luce Carter 的客座文章.Rishit 是 MongoDB 的高级产品经理,专注于 .NET 开发 ...
- 如何让领导轻松在本地查看Allure报告
如何让领导轻松在本地查看Allure报告 问题描述 当我们把精心生成的Allure报告原始文件发送给领导后,领导直接打开index.html文件时,页面却一直处于加载状态,无法显示数据. 通过F12开 ...