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周,三次不 ...
随机推荐
- 如何调整Linux系统为正确时区
如果你的 Linux 系统时区配置不正确,必需要手动调整到正确的当地时区.NTP 对时间的同步处理只计算当地时间与 UTC 时间的偏移量,因此配置一个 NTP 对时间进行同步并不能解决时区不正确的问题 ...
- python 根据中文表头标题抓取动态(表格)文档数据
思路 如图左侧表头标题,要获得右侧数据.网页数据提取成汉字,表格数据间会有空格,用split()分隔成list.用index()查找某个汉字表头位置,输出list下一个位置既是要得到值 text2 = ...
- 超轻巧modbus调试助手使用说明
一.使用说明 1.1 数据格式 和其他的modbus采集工具一样,本组件也支持各种数据格式,其实就是高字节低字节的顺序. 一般是2字节表示一个数据,后面又有4字节表示一个数据,目前好像还有8字节表示一 ...
- 11.15javaweb学习
- OpenMMLab AI实战营 第三课笔记
OpenMMLab AI实战营 第三课笔记 目录 OpenMMLab AI实战营 第三课笔记 进入 mmclassification 目录 导入工具包 下载数据集 数据集目录结构 下载 config ...
- React基础笔记2
一.生命周期函数 挂载卸载过程 constructor props context componentWillMount 服务器与客户端 componentDidMount ajax ...
- Restful、SOAP、RPC、SOA、微服务之间的区别-copy
什么是Restful Restful是一种架构设计风格,提供了设计原则和约束条件,而不是架构,而满足这些约束条件和原则的应用程序或设计就是 Restful架构或服务. 主要的设计原则: 资源与URI ...
- 使用binlog+canal或binlake进行数据库的复制
前言在进行冷热分离的时候,需要将数据实时的复制在历史数据库中,我们使用的是binlog+canal的思想,将每次数据库数据的变更转换成消息发出来,然后再操作这些消息达到数据复制的在京东,实现同样功能的 ...
- openSSL学习-1
上一节[openSSL学习-0]了解openSSL和安装,本节以des.h为例,学习DES分组密码算法 DES 加密分组 调用函数,实现一个分组的加解密(DES-ECB模式) #include < ...
- Kotlin：【泛型】