{"id":22180481,"url":"https://github.com/levelopers/html-fundamentals","last_synced_at":"2026-01-05T12:45:28.278Z","repository":{"id":102423206,"uuid":"480079783","full_name":"levelopers/html-fundamentals","owner":"levelopers","description":"interview questions","archived":false,"fork":false,"pushed_at":"2022-04-11T13:57:06.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-29T23:29:46.265Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/levelopers.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-04-10T16:48:37.000Z","updated_at":"2022-04-10T16:48:37.000Z","dependencies_parsed_at":"2023-07-16T09:45:56.044Z","dependency_job_id":null,"html_url":"https://github.com/levelopers/html-fundamentals","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/levelopers%2Fhtml-fundamentals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levelopers%2Fhtml-fundamentals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levelopers%2Fhtml-fundamentals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levelopers%2Fhtml-fundamentals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/levelopers","download_url":"https://codeload.github.com/levelopers/html-fundamentals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245331886,"owners_count":20598060,"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-12-02T09:18:24.373Z","updated_at":"2026-01-05T12:45:28.252Z","avatar_url":"https://github.com/levelopers.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# html fundamental\n\n### HTML 区块元素\u0026内联元素：\n\n\u003cdetails\u003e\n\u003csummary\u003e区块元素\u003c/summary\u003e\n\n```\n\u003caddress\u003e        定义地址\n\u003ccaption\u003e        定义表格标题\n\u003cdd\u003e        定义列表中定义条目\n\u003cdiv\u003e        定义文档中的分区或节\n\u003cdl\u003e        定义列表\n\u003cdt\u003e        定义列表中的项目\n\u003cfieldset\u003e        定义一个框架集\n\u003cform\u003e        创建表单元素\n\u003ch1\u003e\u003ch2\u003e\u003ch3\u003e\u003ch4\u003e\u003ch5\u003e\u003ch6\u003e        标题元素\n\u003chr\u003e        水平线\n\u003clegend\u003e        给fieldset元素定义标题\n\u003cli\u003e        定义列表项目\n\u003cnoframes\u003e        为那些不支持框架的浏览器显示文本，放置于frameset标签内\n\u003cnoscript\u003e        为那些不支持脚本的浏览器显示文本\n\u003col\u003e        有序列表\n\u003cul\u003e        无序列表\n\u003cp\u003e        定义段落\n\u003cpre\u003e        定义预格式化文本\n\u003ctable\u003e        定义表格\n\u003ctbody\u003e        定义表格主体\n\u003ctd\u003e        表格中的标准单元格\n\u003ctr\u003e        表格中的行\n\u003ctfoot\u003e        表格中的页脚\n\u003cth\u003e        定义表头单元格\n\u003cthead\u003e        定义表格的表头\n```\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e内联元素\u003c/summary\u003e\n\n```\n\u003ca\u003e        可定义锚以及超链接\n\u003cabbr\u003e        表示一个缩写形式\n\u003cacronym\u003e        表示只取title中首字母的缩写形式\n\u003cb\u003e        字体加粗\n\u003cbdo\u003e        可覆盖默认的文本方向\n\u003cbig\u003e        大号字体加粗\n\u003cbr\u003e        换行\n\u003ccite\u003e        引用进行定义\n\u003ccode\u003e        定义计算机代码文本\n\u003cdfn\u003e        定义一个定义项目\n\u003cem\u003e        定义为强调的内容\n\u003ci\u003e        斜体文本效果\n\u003cimg\u003e        向网页中嵌入一张图像\n\u003cinput\u003e        输入框\n\u003ckbd\u003e        定义键盘文本\n\u003clabel\u003e        为input进行标记/标注\n\u003cq\u003e        定义短的引用\n\n\u003cs\u003e    表示不准确不相关，却不应当给予删除的内容\n\n\u003csamp\u003e        定义样本文本\n\n\u003cselect\u003e        定义单选或者多选菜单\n\u003csmall\u003e        呈现小号字体效果\n\u003cspan\u003e        组合文档中的行内元素\n\u003cstrong\u003e        语气更强的强调内容\n\u003csub\u003e        定义下标文本\n\u003csup\u003e        定义上标文本\n\u003ctextarea\u003e        多行文本输入控件\n\u003ctt\u003e        打字机或者等宽的文本效果\n\u003cvar\u003e        定义变量\n```\n\u003c/details\u003e\n\n---\n\n### css权重\n\n每一个css的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；\n\ncss通过css选择器的权重占比，来计算css选择规则的总权值，从而确定 定义样式规则的 优先级次序；\n\n权重等级:\n\n- 第一等级：代表 内联样式，如 style=\"\"，权值为 1,0,0,0；\n\n- 第二等级：代表 ID选择器，如 #id=\"\", 权值为 0,1,0,0；\n\n- 第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；\n\n- 第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；\n\n- 此外，通用选择器（*），子选择器（\u003e）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；\n\n权值比较 规则：\n- 是从高到低逐级将等级位上的权重值\n- 低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的\n\n---\n\n### html 元素\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element\n\n#### \u003cmark\u003e内容分区\u003c/mark\u003e\n\n`\u003carticle\u003e`:The `\u003carticle\u003e` HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). \n\n#### \u003cmark\u003e文本内容\u003c/mark\u003e\n\n`\u003cblockquote\u003e`.`cite`: This attribute is intended to point to information explaining the context or the reference for the quote.\n\n`\u003cdl\u003e`: description list\n`\u003cdt\u003e`: description term\n`\u003cdd\u003e`: description detail\n\n`\u003chr\u003e`: represents a thematic break between \u003cu\u003eparagraph-level\u003c/u\u003e elements\n\n`\u003cmenu\u003e`: is a semantic alternative to `\u003cul\u003e`\n\n`\u003cpre\u003e`: represents preformatted text which is to be presented exactly as written in the HTML file\n\n#### \u003cmark\u003e内联文本\u003cmark\u003e\n\n`\u003cabbr\u003e`: represents an abbreviation or acronym; the optional `title` attribute can provide an expansion or description for the abbreviation.\n\n`\u003cbdi\u003e`: 双向隔离元素 ( `\u003cbdi\u003e` ) 告诉浏览器的\u003cu\u003e双向算法\u003c/u\u003e将其包含的文本与周围的文本隔离，\n\n`\u003cbdo\u003e`: 双向文本替代元素 (`\u003cbdo\u003e`) 改写了文本的方向性\n\n`\u003ccite\u003e`: 引用（ Citation）标签 (`\u003ccite\u003e`) 表示一个作品的引用，且必须包含作品的标题。\n\n`\u003cdata\u003e`: 将一个指定内容和机器可读的翻译联系在一起\n\n`\u003cdfn\u003e`: 定义元素 (`\u003cdfn\u003e`) 表示术语的一个定义。(一般与`\u003cdt\u003e\u003cdfn title=\"cascade\"\u003e\u003c/dt\u003e`连用)\n\n`\u003ckbd\u003e`: 键盘输入元素 (`\u003ckbd\u003e`) 用于表示用户输入 (\u003ckbd\u003ectrl\u003c/kbd\u003e)\n\n`\u003cmark\u003e`: 标记文本元素 (`\u003cmark\u003e`) 表示为引用或符号目的而标记或突出显示的文本，\n\n`\u003cruby\u003e`: 被用来展示东亚文字注音或字符注释。\n`\n\u003cruby\u003e\n  汉 \u003crp\u003e(\u003c/rp\u003e\u003crt\u003ehan\u003c/rt\u003e\u003crp\u003e)\u003c/rp\u003e\n  字 \u003crp\u003e(\u003c/rp\u003e\u003crt\u003ezi\u003c/rt\u003e\u003crp\u003e)\u003c/rp\u003e\n\u003c/ruby\u003e\n`\n\n`\u003cs\u003e`: (Strikethrough)使用删除线来渲染文本。\n\n`\u003csamp\u003e`: 用于标识计算机程序输出\n\n`\u003csub\u003e`: (Subscript element) 与主要的文本相比，应该展示得更低并且更小。H\u003csub\u003e2\u003c/sub\u003eO\n\n`\u003csup\u003e`: (Superscript element) 与主要的文本相比，应该展示得更高并且更小。5\u003csup\u003e2\u003c/sup\u003e\n\n`\u003cu\u003e`: (表意不清标注元素）表示一个需要标注为\u003cu\u003e非文本化（non-textual）\u003c/u\u003e的内联文本域\n\n`\u003cvar\u003e`: 标签表示变量的名称\n\n`\u003cwbr\u003e`: (Line Break Opportunity element) 其中浏览器可以选择来换行\n\n#### \u003cmark\u003e图片和多媒体\u003c/mark\u003e\n\n`\u003cmap\u003e`: 与 `\u003carea\u003e` 属性一起使用来定义一个图像映射 (一个可点击的链接区域).\n\n`\u003carea\u003e`: 在图片上定义一个热点区域，可以关联一个超链接。\n\n`\u003caudio\u003e`: 可以包含一个或多个音频资源,也可以使用 MediaStream 将这个元素用于流式媒体\n\n- autoplay: 音频会尽快自动播放，不会等待整个音频文件下载完成。\n- crossorigin: 支持cors\n- anonymous: 在发送跨域请求时不携带验证信息\n- use-credentials: 在发送跨域请求时携带验证信息\n- currentTime: 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置\n- preload: `none` 不会缓存；`metadata` 获取长度；`auto` 缓存（默认）\n\n`\u003ctrack\u003e`: 被当作媒体元素—audio 和 video的子元素来使用。它允许指定时序文本字幕\n\n#### \u003cmark\u003e内嵌内容\u003c/mark\u003e\n\n`\u003ciframe\u003e`: 内联框架元素 (`\u003ciframe\u003e`) 表示嵌套的 (为了静态文本或svg)\n\n`\u003cembed\u003e`: 外部内容嵌入元素 (可以被编程)\n\n`\u003cobject\u003e`: 嵌入对象元素 (for older browser)\n \n`\u003cpicture\u003e`: 通过包含零或多个 source 元素和一个 img 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 `\u003csource\u003e` 元素，如果没有匹配的，就选择 `\u003cimg\u003e` 元素的 src 属性中的 URL。\n\n#### \u003cmark\u003e编辑标识\u003c/mark\u003e\n\n`\u003cins\u003e`: 定义已经被插入文档中的文本。\n\n#### \u003cmark\u003e表格\u003c/mark\u003e\n\n`\u003ctable\u003e`: 属性\n\n- align: `left`,`center`,`right`\n- bgcolor\n- border: 是否有边框\n- cellpadding: 单元格padding\n- cellspacing： 单元格间距 (边距坍缩)\n- frame: 控制边框方向显示 (`above`,`lhs`,`box`...)\n- rules: 定义了在一个表格中规则的显示位置 (`groups`,`rows`,`all`...)\n- summary: 定义了一个替代文本\n\n`\u003ccolgroup\u003e`: 表格列组, 用来定义表中的一组列表 (可以给表格列加样式)\n\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevelopers%2Fhtml-fundamentals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flevelopers%2Fhtml-fundamentals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevelopers%2Fhtml-fundamentals/lists"}