{"id":17035883,"url":"https://github.com/dabeng/html-basics","last_synced_at":"2026-05-03T09:31:54.837Z","repository":{"id":76025282,"uuid":"195322954","full_name":"dabeng/html-basics","owner":"dabeng","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-27T02:15:20.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-28T02:22:46.352Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dabeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-05T02:04:19.000Z","updated_at":"2020-11-27T02:15:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"20e9d047-3997-4bba-b340-f71cde07b935","html_url":"https://github.com/dabeng/html-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fhtml-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fhtml-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fhtml-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabeng%2Fhtml-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabeng","download_url":"https://codeload.github.com/dabeng/html-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031345,"owners_count":20549913,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T08:48:27.763Z","updated_at":"2026-05-03T09:31:54.780Z","avatar_url":"https://github.com/dabeng.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML\n## Miscellaneous\n### Space\n```html\n\u0026nbsp;\n```\n半角的不断行的空白格（推荐使用）。这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可少的元素。\n\n```html\n\u0026ensp;\n```\n半角的空格。此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。\n\n```html\n\u0026emsp;\n```\n全角的空格。此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。\n## Semantic\n### Basic HTML structure of classic website layout\n```html\n\u003cdiv class=\"container\"\u003e\n         \n    \u003cheader\u003e\n        \u003cnav\u003e\n          \u003cul\u003e\n            \u003cli\u003e\u003c/li\u003e\n            \u003cli\u003e\u003c/li\u003e\n            \u003cli\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/nav\u003e\n        \u003cbutton\u003e\u003c/button\u003e\n    \u003c/header\u003e\n \n    \u003cdiv class=\"wrapper\"\u003e\n        \u003caside class=\"sidebar\"\u003e\n            \u003ch3\u003e\u003c/h3\u003e\n        \u003c/aside\u003e\n        \u003csection class=\"main\"\u003e\n            \u003ch2\u003e\u003c/h2\u003e\n            \u003cp\u003e\u003c/p\u003e\n        \u003c/section\u003e\n    \u003c/div\u003e\u003c!-- /wrapper --\u003e\n \n    \u003cfooter\u003e\n        \u003ch3\u003e\u003c/h3\u003e\n        \u003cp\u003e\u003c/p\u003e\n    \u003c/footer\u003e\n\u003c/div\u003e\u003c! -- /container --\u003e\n```\n### \u0026lt;section\u0026gt; vs \u0026lt;div\u0026gt;\n`\u003csection\u003e tag has a semantic meaning unlike \u003cdiv\u003e. semantic tags describe their meaning both to the developer and the browser. Basically, the \u003csection\u003e tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.`\n  \n`On the other hand, \u003cdiv\u003e has no meaning, typically used for grouping elements and styling them via CSS.If you just need to group content together for styling purposes you should use a \u003cdiv\u003e element rather than a \u003csection\u003e.`\n### \u0026lt;section\u0026gt; vs \u0026lt;article\u0026gt;\n`The \u003carticle\u003e tag should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like news articles, blog posts, or user comments.`\n\n`The \u003csection\u003e element is used to represent a group of related content. This is similar to the purpose of an \u003carticle\u003e element with the main difference being that the content within a \u003csection\u003e element doesn’t necessarily need to make sense out of the context of the page.`\n## Template\n## ARIA\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2Fhtml-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabeng%2Fhtml-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabeng%2Fhtml-basics/lists"}