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周,三次不 ...
随机推荐
- 谈谈 HTTP/2 的协议协商机制
在过去的几个月里,我写了很多有关 HTTP/2 的文章,也做过好几场相关分享.我在向大家介绍 HTTP/2 的过程中,有一些问题经常会被问到.例如要部署 HTTP/2 一定要先升级到 HTTPS 么? ...
- maven maven-surefire-plugin的乱码问题
今天项目中出现奇怪问题,在eclipse中直接运行TestNG时,全部都OK,但是执行mvn test时却失败.观察其输出日志,发现有乱码,怀疑是乱码导致. 最终在官网发现蛛丝马迹. maven-su ...
- 最近很新的EasyJailbreak😝 A Unified Framework for Jailbreaking Large Language Models🔅
整篇文章短小精悍,原文中的链接很有意思~大家去多多尝试哦!
- Qt5离线安装包无法下载问题解决办法
1.前言 Qt5离线安装包目前在国内已经被墙了,无法下载,只能下载在线安装包: 直接访问会显示Download from your IP address is not allowed: 本文就提出两种 ...
- 网络编程懒人入门(十六)：手把手教你使用网络编程抓包神器Wireshark
本文由转转QA刘宝成分享,原题"抓包工具wireshark的使用",下文进行了排版和内容优化. 1.引言 跟网络通信有关的应用场景下(比如Web系统.IM聊天应用.消息推送系统等) ...
- 开源轻量级 IM 框架 MobileIMSDK 的微信小程序端已发布！
一.基本介绍 MobileIMSDK - 微信小程序端是一套基于微信原生 WebSocket 的即时通讯库: 1)超轻量级.无任何第 3 方库依赖(开箱即用): 2)纯 JS 编写.ES6 语法.高度 ...
- Flybirds 问题汇总
1. HOOK-ERROR in before_all: AttributeError: 'ScreenRecordInfo' object has no attribute 'dev' 解决方法:
- Eval-Expression.NET：动态执行C#脚本，类似Javascript的Eval函数功能
我们都知道在JavaScript中,我们可以通过Eval来执行JavaScript字符串代码. 下面推荐一个.Net版本的Eval的开源项目. 01 项目简介 Eval-Expression.NET是 ...
- WPFMediaKit --WPF项目中 调用摄像头拍照
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...
- 第四章 dubbo源码解析目录
9.1 客户端发起请求源码 来看一下客户端请求代码: 1 DemoService demoService = (DemoService) context.getBean("demoServi ...