HTML 관련 사양 학습
앞의 단어
HTML은 웹 페이지의 구조를 설명하는 하이퍼텍스트 마크업 언어입니다. HTML 사양은 HTML 코드 스타일을 일관되게 만들어 HTML을 더 쉽게 이해하고 유지 관리할 수 있도록 해줍니다. 이 글에서는 HTML 스펙을 자세히 소개하겠습니다
전체 구조
[페이지 헤더]
1. 파일은 ""의 첫 번째 줄로 시작하는 것이 좋습니다. "< !DOCTYPE html>”
<!DOCTYPE html>
2을 사용합니다. 문서의 인코딩 문자 집합을 선언해야 하며 파일 자체의 인코딩과 일치해야 합니다. 해당 메타 문자 인코딩을 지정합니다. head 첫 번째 직계 하위 요소여야 합니다. UTF-8 인코딩<meta charset="utf-8">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-
<!-- 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>
id class name data-xxx src, for, type, href title, alt aria-xxx, role
title은 head의 직계 하위 요소여야 하며 charset 선언 바로 뒤에 있어야 합니다
<img src="#" alt="#" width="#" height="#">
favicon에 액세스할 수 있는지 확인하세요🎜🎜<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
CSS 및 JavaScript를 도입할 때 type 속성🎜 🎜 3. CSS 도입 시 rel="stylesheet"🎜🎜<button type="submit">提交</button><button type="button">取消</button>
URL의 프로토콜 부분인 경우 외부 리소스를 참조하는 내용은 페이지와 동일하므로 프로토콜 접두사를 생략하는 것이 좋습니다. 이는 CSS를 도입하기 위해 프로토콜 상대 URL을 사용하면 IE7/8에서 두 개의 요청을 보내기 때문입니다. 프로토콜 상대 URL 사용 여부는 페이지가 의도된 환경을 충분히 고려해야 합니다🎜🎜<input type="date">
코드 형식 🎜🎜[들여쓰기]🎜🎜 탭 1개 대신 공백 4개 사용(대부분의 편집기에서 설정 가능) 🎜🎜<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>
로그인 후 복사로그인 후 복사🎜🎜[이름 지정]🎜🎜 1. 클래스는 단어 사이에 -를 포함하여 모두 소문자로 이루어져야 합니다.🎜🎜 2 클래스는 해당 모듈이나 컴포넌트의 내용이나 기능을 나타내야 하며, 스타일 정보로 이름을 지정해서는 안 됩니다🎜🎜rrreee🎜🎜 3. 같은 페이지에서 동일한 이름과 를 사용하지 마세요. > 아이디 IE7 브라우저는 요소의 id 및 name 속성을 혼동하기 때문에 document.getElementById가 예상치 못한 요소를 얻을 수 있습니다. 따라서 요소🎜🎜[Label]🎜🎜 1의 id 및 name 속성의 이름을 지정할 때 매우 주의해야 합니다. 레이블 이름은 소문자를 사용해야 합니다🎜🎜 2. 자체 닫힘이 필요하지 않은 레이블의 경우, 자동으로 닫힐 필요는 없습니다🎜🎜 3. HTML5의 경우 닫는 태그의 생략은 허용되지만 닫는 태그의 생략은 허용되지 않는다고 규정하고 있습니다🎜🎜 4. HTML 태그는 태그의 의미를 따르고 태그 중첩 규칙을 준수해야 합니다🎜🎜 rrreee🎜🎜【댓글】🎜🎜 태그 클로저와 유사한 작성 방법을 사용하고 형식은 HTML로 통일됩니다. 형식은 CSS 주석과 통일됩니다🎜🎜댓글 시작: <!-- 댓글 복사--> (복사본 양쪽 끝에 공백) )🎜🎜 댓글 끝: <!-- /댓글 복사--> (라벨 닫기와 유사하게 복사 앞에 "/" 기호 추가)🎜🎜 시작 댓글만 허용됩니다🎜🎜rrreee🎜🎜[속성]🎜🎜 1. 속성 및 값 모두 소문자여야 합니다🎜🎜 2. 속성 값은 큰따옴표로 묶어야 합니다🎜🎜 3. Boolean 유형 속성의 경우 속성 값을 추가하지 않는 것이 좋습니다🎜🎜 4. 사용자 정의 속성 앞에 <code>xxx- , data-🎜🎜 5 사용을 권장합니다. 스타일 태그와 스크립트 태그의 type 속성은 생략 가능🎜🎜rrreee🎜🎜【속성 순서】🎜🎜 HTML 가독성을 보장하려면 속성이 특정 순서로 표시되어야 합니다 🎜🎜rrreee🎜
<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>
特殊元素
【图片】
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、只在必要的时候开启音视频的自动播放
위 내용은 HTML 관련 사양 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7434
15
1359
52
76
11
29
19
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까?
Feb 07, 2025 am 11:57 AM
이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다
