HTML入门笔记1

半瓶可乐
190 阅读5分钟

近期又开始系统复习HTML相关知识，写下一些资料，方便自己日后查看。

一、HTML的诞生

1990年，伟大的Doctor lee发明万维网(WWW)，同时HTML、HTTP和URL也被发明出来，历史并不久远，30年已经演变为声势浩荡的互联网浪潮，可见新兴的技术总是能够推进人类的发展；想到前两年因为互联网巨头们割据流量，让整个互联网上的信息变成一座座孤岛，互不相通，背离了万维网诞生的初衷，商业的逻辑总是与有抱负的伟人相左。

二、HTML开始应该写什么

利用emmet插件，可以高效的编写HTML文件，只要打出一个感叹号“！”，即可完成HTML文件整体的格式内容编写，省去了每次的重复劳动。其中文档头部的代码代表以下含义：

三、常用的章节标签

  1. h1- h6 ：代表了不同级别的标题，没什么好说的，h1最大
  2. section：代表章节，可以嵌套使用
  3. article： 代表文章
  4. p ：段落
  5. header：头部
  6. footer：脚步
  7. main： 主要内容
  8. aside：分支内容
  9. div：用于划分

四、全局属性有哪些

1、class：以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法；可以写成[class="xxx"]{添加样式} 或者更简单的 .xxx{添加样式}；前一种只能写标签的完整的xxx名称，后者可以不写全，只要标签的class属性中包含即可被设置。

2、contentediable：是一个枚举属性，表示元素是否可被用户编辑。甚至可以编辑元素的样式，亲测加了这个属性会让内部的超链接无法被访问。

 <div  contenteditable>

3、hidden：可以标签隐藏起来

<footer hidden>&copy; 版权所有</footer>

4、id：定义了一个全文档唯一的标识符 (ID)，但是重复了也不会报错。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。

<h3 id="xxx">1.2节</h3>

5、style：设置行内样式，优先级高于内部css中的样式设置

<section stlye='border:10px solid yellow'>

6、tabindex：tab键选中的顺序，可以不连续（1、3、200...），设置为0代表最后选择，负数表示永远选不中，不设置这个属性的元素则不会被选中。

<section tabindex=3 >

7、title：包含了表示咨询信息文本，和它属于的元素相关。这个信息通常存在，但绝不必要，作为提示信息展示给用户，通常会在鼠标移到元素上时显示一段工具提示文本

 <header tabindex=1 id="xxx" title='完整的内容'>

五、常用的内容属性有哪些

1、ol+li：表示有序列表，通常渲染为一个带编号的列表。

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

2、ul+li：表示一个内可含多个元素的无序列表或项目符号列表。

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

3、dl + dt + li ：一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

<dl>
  <dt>狐小</dt>
  <dd>大美女</dd>
</dl>

4、pre：元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。紧跟在 pre 开始标签后的换行符也会被省略。

<pre>
  L          TE
    A       A
</pre>

5、 code：呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

<p>Regular text. <code>This is code.</code> Regular text.</p>

6、hr：单标签，呈现一条线表示段落级元素之间的转换

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr>

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

7、br：换行

8、a：创建一个到其他网页，文件，同一页面内的位置，电子邮件地址或任何其他URL的超链

接。

<a href="http://www.mozilla.com/">
跳转到Mozilla
</a>

<!-- links to element on this page with id="attr-href" -->
<a href="#属性">
跳转到本页的某个部分
</a>

9、em：标记出需要用户着重阅读的内容， 着重部分默认会倾斜。  em元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

<p>
  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>

10、strong：表示文本十分重要，一般用粗体显示。

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

11、quote：可以展示引用的内容，默认没什么样式改变，写到行内

<quote>引用的内容写到这个标签里</quote>

12、blockquote：代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

先写到这里吧。

                       ———— 以上图片、示例代码、及文字部分来自杭州饥人谷教育科技、MDN

avatar
文章
阅读
粉丝