HTML入门笔记1

Dorothy101
232 阅读3分钟

HTML学习入门笔记

1. HTML 是谁发明的

HTML诞生于1990年左右，发明者为Tim Berners-Lee，他自己写了第一个服务器和浏览器，并且用自己写的浏览器访问了自己写的服务器，发明了WWW，以及HTML, HTTP,URL.

2. HTML 起手式

我们可以使用 JS Bin, VS Code, 以及Codesandbox 编写HTML的代码.

HTML起手式，是指Emmet ! ，即先输入一个 ! ，再按 Tab 键，则出现以下代码块：

   <!DOCTYPE html>                 <!--文档类型 -->
    <html lang="en">               <!--语言 -->
    <head>
        <meta charset="UTF-8">     <!--文件的字符编码 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>    <!--标题-->
    </head>
    <body>

    </body>
    </html>

3. 常用的表章节的标签

  • h1~h6 标题

    h1~h6元素代表6个不同级别的标题(Heading)，其中h1级别最高，h6级别最低.

  • section 章节

    表示一节内容，一般包括标题和一部分代码块。

  • article 文章

    表示一段文章，是一种独立的结构.

  • p 段落

    p代表paragraph, 用于表示一段段落

  • header 头部

    放置在一段body的头部，在内容的顶部展示介绍性内容或者广告。

  • footer 脚部

    放置在一段body的脚部，在内容的底部展示版权声明或者广告。

  • main 主要内容

    显示body的主题部分和主要功能。

  • aside 旁支内容

    显示body的旁支部分和其他独立内容。

  • div 划分

    文档分区元素。

4. 全局属性

全局属性，即所有标签都具有的属性。

  • class

    类，可以通过此类给该元素修改样式。

  • contenteditable

    content editable, 表示内容可以被用户编辑。

  • hidden

    隐藏此元素不在浏览器显示。

  • id

    定义唯一标识符，该标识符在整个文档必须是唯一的。但是不要轻易使用，除非走投无路非用不可。因为它的全局唯一性不被保障，即使有两个重复的id，html也不会报错。

    js可以获取id.

    id的另外一个麻烦之处在于，如果将id赋值为windows已经具有的属性关键词，则使用无效。但是关键词又特别多，所以尽量避免使用id属性。

  • style

    声明该元素的样式。默认样式很丑，通过这里设置重新定义文档样式。

    优先级：js的style > style作为元素属性 > 在head 里面用style标签写的样式

  • tabindex

    整数属性，指示元素能否参与顺序键盘导航，其值代表利用键盘访问的顺序位置。

    若为负值，表示其不可被Tab 访问；

    若为正值，表示可被Tab 访问，其访问顺序与元素在页面上的物理位置无关；

    若值为0，表示可被Tab 访问，当访问遍历所有正值元素后，才能访问0值元素。

  • title

    包含表示与其所属元素相关信息的文本。当鼠标悬浮在元素上时，浮现含title的内容提示。

5. 常用的内容标签

  • ol+li

    ordered list+ list item, 表示有序列表内包含多个列表元素。

  • ul+li

    unordered list+ list item, 表示无序列表内包含多个列表元素。

  • dl+dt+dd

    description list + term + data, dl是一个包含术语定义及描述的列表，dt是dl的子元素，表示在一个定义列表中声明一个术语，dd是dt的子元素，用于描述列表(dl)元素中的一个术语(dt).

  • pre

    预定义格式文本。在该元素中的文本通常按照原文件中的编排，不会在展示中省略换行符和空白符。

  • hr

    表示段落元素之间的主题转换。类似知乎的分割线。

  • br

    表示在文本的该处生成一个换行。

  • a

    anchor, 通过其herf 属性创建一个超链接。

  • strong

    表示文本本身内容的重要性，一般会加粗显示。

  • em

    emphasise, 强调。标记处需要着重阅读的内容。表示语气上的强调。

  • code

    呈现一段代码。与其它文本不同的是，代码段的各个字母都是等宽的。

  • q

    quote, 引用。引用短文本。

  • blockquote

    引用一块元素，其中的文字是引用内容。引用长文本。

部分参考来自此链接

avatar
文章
阅读
粉丝