0.学习准备工具
- 推荐书籍：网道HTML教程
- HTML权威资料：MDN
- vscode插件推荐：prettier-code formatter,可以自动格式化。vscode自动格式化设置：文件->首选项->设置->auto save->选择onfocuschange;format on save勾选
- 练习的JSBin网站
- 代码沙盒，可以创建多文件，是一个网页版的vscode
1.HTML是谁发明的？
- 什么是HTML?
超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。
- HTML的创始人是谁？
英国科学家蒂姆·伯纳斯·李于1989年发明了万维网，他发明了三项关键技术(HTML、HTTP
、URL )来使万维网能正常工作。
- WWW（万维网）与HTML、HTTP、URL的关系？
WWW是基于客户机/服务器方式的信息发现技术和超文本技术的综合。WWW服务器通过超文本标记语言(HTML)把信息组织成为图文并茂的超文本，利用链接从一个站点跳到另个站点。
万维网正常工作必须解决的问题：[1]
- 怎样标志分布在整个因特网上的成千上万个万维网文档？
- 用什么样的方式来让客户程序与服务器程序通信？
- 怎样使不同作者创造的不同万维网文档都能在因特网上正常显示出来，同时又能使用户清楚地知道什么地方存在着什么样的链接？
为了解决第一个问题，万维网WWW使用了统一资源定位符URL（Uniform Resoutce Locator）来标志万维网上的各种文档，而且使每一个文档在整个因特网的范围内都具有唯一的标识符 URL。
为了解决第二个问题，万维网客户程序与万维网服务器程序之间的通信就必须遵守严格的协议，这就是超文本传输协议HTTP（HyperText Transfer Protocol），这也是为什么HTTP是一个应用层协议，因为它运行在应用程序上，使用传输层的TCP协议进行可靠的传送。
为了解决第三个问题，万维网WWW使用超文本标记语言HTML（HyperText Markup Language），使得万维网页面（前端）的设计者可以很方便地用链接从本页面的某处链接到因特网的任何一个万维网页面。
2.HTML 起手应该写什么？
首先，在vscode中建立一个空文档，选择编程语言为HTML；其次，按下!（英文状态下），再按下tab键，就会出现下图的内容。
3.常用的表章节的标签有哪些，分别是什么意思？
- h1~h6
- section
- article
- p
- header
- footer
- main
- aside
- div
1.<h1>–<h6>标题(Heading)元素呈现了六个不同的级别的标题，<h1>级别最高，而<h6>级别最低。
2. <section>章节元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
3. <article>文章元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
从图中可以看到section和article的效果是一样的。
问：那么section和article的区别是什么呢？
答：div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。 原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。[2]
4. <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
5. <header>头部元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
6. <footer> 脚部元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
7. <main>元素呈现了文档的<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
8. <aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
9. <div>元素(或HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
4.全局属性有哪些？
全局属性是所有标签都有的属性，有：
- class
- contenteditable
- hidden
- id
- style
- tabindex
- title
1.class的值是一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
2.contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。
3.hidden是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。
4.id全局属性定义了一个全文档唯一的标识符 (ID)。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。
不到万不得已，不要用id。id的标签不可覆盖已有的全局属性！！！
5.style全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及<style> 元素的主要目的是快速装饰。例如用于测试目的。
6.tabindex全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。
- tabindex=0,它的相对顺序是最后一个
- tabindex=-1,不能通过导航键来访问到该元素
7.title全局属性 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。
5.常用的内容标签有哪些，分别是什么意思（a、strong、em、code、pre 等等）
- ol + li
- ul + li
- dl +dt +dd
- pre
- code
- hr
- br
- a
- em
- strong
- quote
- blockquote
1.ol +li 有序号的列表
2.ul + li 无序号的列表
3.dl + dt + dd描述列表
4.pre显示文本中的空白符
5.code呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
6.hr是一个水平线
7.br换行
8.a超链接
9.em强调（斜体）
10.strong重要(加粗)
11.quote引用 和blockquote换行引用
分享完毕，还记得写了什么吗？主要介绍了：
- HTML的发明人
- HTML的起手式
- 9个常用的表章节的标签(h1~h6; section; article; p; header; footer; main; aside; div)
- 7个全局属性(class; contenteditable; hidden; id; style; tabindex; title)
- 12个常用的内容标签(ol + li; ul + li; dl +dt +dd; pre; code; hr; br; a; em; strong; quote; blockquote)
参考
- ^https://www.cnblogs.com/miracletimes/p/4164659.html
- ^https://www.jianshu.com/p/b818ceeedd13
7385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
