HTML入门笔记

樱桃小肚子
141 阅读5分钟

1.HTML是谁发明的？

HTML是在1990年左右由Tim Berners-Lee发明的。

2.HTML起手怎么写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3.常用的表章节的标签有哪些，分别的意思

  • h1-h6标题元素呈现了六个不同的级别的标题，h1级别最高，而h6级别最低；

下面的代码展示了所有可用的标题级别。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • section元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。例如，导航菜单应该包含在元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在section里。 使用的代码：
<section>
  <h1>标题</h1>
  <p>内容内容段落段落</p>
</section>

  • article元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

  • p元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，p 是块级元素。 示例代码

<p>这是第一个段落。这是第一个段落。
   这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。
   这是第二个段落。这是第二个段落。</p>
  • header元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。通常在头部。 示例代码：
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>
  • footer 元素表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。 示例代码：
<footer>
  &copy该文章参考自mdn
</footer>
  • main元素呈现了文档的body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。 示例代码：
<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  
  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>
  • aside元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。 示例代码
<article>
  <p>
    迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989 年首次登上银幕。
  </p>
  <aside>
    在首次发行期间，该片便收获了 8700 万美元的票房。
  </aside>
  <p>
    更多有关该电影的信息…
  </p>
</article>

div元素(或HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。 示例代码：

<div>
  <p>这里可以是任何内容，比如 &lt;p&gt;,
  &lt;table&gt;，一切由你作主！</p>
</div>

4.全局属性

  • class的值是一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。

  • contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。

  • hidden是一个布尔属性，表示一个元素尚未或者不再相关。例如，它可以被用来隐藏一个页面元素直到登录完毕。如果一个元素设置了这个属性，它就不会被显示。

  • id全局属性定义了一个全文档唯一的标识符 (ID)。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。但是万不得已尽量不要用到id。

  • style全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 元素的主要目的是快速装饰。例如用于测试目的。

  • tabindex全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

使用：

① tabindex=负值 (通常是tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用JS做页面小组件内部键盘导航的时候非常有用。

②tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的。

③ tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定。

  • title全局属性 包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户。

5.内容标签

ol + li 有序列表

ul + li 无序列表

dl + dt + dd 术语定义以及描述的列表，通常用于展示词汇表或者元数据

pre 在该元素中的文本通常按照原文件中的编排

code 一般呈现一段计算机代码，它以浏览器的默认等宽字体显示

hr 分割线

br 换行

a 超链接

em 强调，一般表示语气强调

strong 强调，本身内容强调

quote 引用

blockquote 块级引用

avatar
文章
阅读
粉丝