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周,三次不 ...
随机推荐
- HttpClientManager
HttpClientManger package com.gateway.http.client; import com.fasterxml.jackson.core.type.TypeReferen ...
- Go channel 原理
作用 Go 语言的 channel 是一种 goroutine 之间的通信方式,它可以用来传递数据,也可以用来同步 goroutine 的执行. chan 是 goroutine 之间的通信桥梁,可以 ...
- Qt编写安防视频监控系统51-功能激活
一.前言 随着视频监控系统本身功能的增多,以及用户定制功能的增多(比如视频监控系统摇身一变成了机器人监控.无人机监控.挖掘机监控等),除了提供工作模式这个切换开关,还需要对不同的工作模式启用禁用不同的 ...
- vue3 路由的使用
添加一个router.js 配置文件 import { createRouter, createWebHistory } from 'vue-router' createRouter:用来创建 路由 ...
- 前后端分离模式下Java Web开发中的技术栈概图
参考链接1:前后端的分离模式 参考链接2:浅谈前后端分离开发模式 参考链接3:前后端分离开发模式介绍
- 深入Python胶水语言的本质：从CPython到各类扩展机制
在开始深入讲解Python如何作为胶水语言之前,我们需要先了解Python语言本身的实现机制.这对于理解Python如何与C语言交互至关重要. CPython:Python的默认实现 当我们谈论Pyt ...
- [炼丹术]Yolov8训练使用总结
Yolov8训练使用总结 Yolov8训练使用总结 介绍 安装 Install pip install ultralytics Development git clone https://github ...
- 编译Ubuntu 24.04 LTS 内核(BuildYourOwnKernel)
1.配置环境 修改apt源 修改 /etc/apt/sources.list.d/ubuntu.sources ,添加 "deb-src"到 Types:,修改后的文件内容如下: ...
- Spring基础 02 | JdbcTemplate
JdbcTemplate Spring对Jdbc的Api简单封装 开发步骤 1.导入Spring-jdbc.spring-tx坐标 2.创建数据库表和实例 3.创建jdbcTemplate对象 4.执 ...
- Appium_测试步骤读取自外部文件：定制执行引擎
testcase.yaml: - id: home_search - id: search_input_text input: alibaba - id: name - id: current_pri ...