前面的话
HTML是描述网页结构的超文本标记语言，HTML规范能够使HTML代码风格保持一致，使得HTML更容易理解和维护。本文将详细介绍HTML规范
整体结构
【页面头部】
1、文件应以“”首行顶格开始，推荐使用“<!DOCTYPE html>”
<!DOCTYPE html>
2、必须声明文档的编码charset，且与文件本身编码保持一致，指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">
<meta charset="utf-8">
3、根据页面内容和需求填写适当的keywords和description
<meta name="description" content="不超过150个字符"><meta name="keywords" content="">
4、页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后
<head><meta charset="UTF-8"><title>页面标题</title></head>
【资源引入】
1、保证 favicon 可访问
<link rel="shortcut icon" href="path/to/favicon.ico">
2、引入 CSS 和 JavaScript 时无须指明 type 属性
3、引入 CSS 时必须指明 rel="stylesheet"
<link rel="stylesheet" href="page.css?1.1.11">
4、使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部
5、移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js?1.1.11"></script>
【结构优化】
1、尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度
2、结构顺序和视觉顺序基本保持一致，按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前
3、结构、表现、行为三者分离，避免内联
4、每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾空格
5、对于内容较为简单的表格，建议将tr写成单行
6、可以在大的模块之间用空行隔开，使模块更清晰
代码格式
【缩进】
使用4个空格代替1个Tab（大多数编辑器中可设置）
<ul><li>first</li><li>second</li></ul>
【命名】
1、class 必须单词全字母小写，单词间以 - 分隔
2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名
<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>
3、同一页面，应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心
【标签】
1、标签名必须使用小写字母
2、对于无需自闭合的标签，不需要自闭合
3、对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签
4、HTML 标签的使用应该遵循标签的语义，且要符合标签嵌套规则
Hello StyleGuide!
Hello StyleGuide!
<ul><li>first</li><li>second</li></ul>
- first
- second
【注释】
采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式
开始注释：（文案两头空格）
结束注释：（文案前加“/”符号，类似标签的闭合）
允许只有开始注释
<!-- 头部 --><div class="g-hd"><!-- LOGO --><h1 class="m-logo"><a href="#">LOGO</a></h1><!-- /LOGO --><!-- 导航 --><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li><!-- 更多导航项 --></ul><!-- /导航 --></div><!-- /头部 -->
【属性】
1、属性和值全部小写
2、属性值必须用双引号包围
3、布尔类型的属性，建议不添加属性值
4、自定义属性建议以 xxx- 为前缀，推荐使用 data-
5、可以省略style标签和script标签的type属性
<!-- good --><table cellspacing="0">...</table><!-- bad --><table cellSpacing="0">...</table><!-- good --><script src="esl.js?1.1.11"></script><!-- bad --><script src='esl.js'></script><script src=esl.js></script>
【属性顺序】
HTML 属性应该按照特定的顺序出现以保证易读性
id class name data-xxx src, for, type, href title, alt aria-xxx, role
特殊元素
【图片】
1、禁止 img 的 src 取值为空，否则会导致部分浏览器重新加载一次当前页面
2、为图片添加 alt 属性，提高图片加载失败时的用户体验
3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页面尺寸
4、为图片添加 width 和 height 属性，以避免页面抖动
<img src="#" alt="#" width="#" height="#">
5、有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载
无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现
【表单】
1、有文本标题的控件使用 label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
2、使用 button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交
<button type="submit">提交</button><button type="button">取消</button>
3、在针对移动设备开发的页面时，根据内容类型指定输入框的 type 属性，能获得友好的输入体验
<input type="date">
【多媒体】
1、在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素，并使用退化到插件的方式来对多浏览器进行支持
<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><object width="100" height="50" data="audio.mp3"><embed width="100" height="50" src="audio.swf"></object></audio><video width="100" height="50" controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg"><object width="100" height="50" data="video.mp4"><embed width="100" height="50" src="video.swf"></object></video>
2、只在必要的时候开启音视频的自动播放
Atas ialah kandungan terperinci HTML相关规范学习. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AMHtmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini
HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AMHTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PMHTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AMHTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AMAnexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
Bagaimana cara menggunakan susun atur flexbox CSS untuk mencapai penjajaran yang berpusat pada kesan segmentasi garis putus -putus dalam menu?Apr 05, 2025 pm 01:24 PMBagaimana untuk merancang kesan segmentasi garis bertitik di menu? Semasa merancang menu, biasanya tidak sukar untuk menyelaraskan kiri dan kanan antara nama hidangan dan harga, tetapi bagaimana pula dengan garis bertitik atau titik di tengah ...
Apakah elemen HTML yang digunakan oleh editor kod dalam talian untuk melaksanakan input kod?Apr 05, 2025 pm 01:21 PMAnalisis elemen HTML dalam editor kod web Banyak editor kod dalam talian membolehkan pengguna memasukkan kod HTML, CSS, dan JavaScript. Baru -baru ini, seseorang mencadangkan ...
React Static Page Construction: Bagaimana untuk mengelakkan mampatan kod dengan React-App-Rewired?Apr 05, 2025 pm 01:18 PMMengenai cara mengelakkan mampatan kod ketika membina halaman statik menggunakan banyak pemaju yang diberitahu react-app yang ingin disampaikan kepada ...
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
