HTML入门

柯云泽
178 阅读2分钟

HTML入门笔记

HTML的出生

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台 (如UNIX， Windows等)。

HTML起手式

Emmet ! 效果如下：

<!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>

charset：字符类型 默认UTF-8

viewport：视窗 防止页面缩放

title：网页标题

body：网页主体，包含内容等等

常用标签

  • 章节标签

    h1~h6：自动加黑加粗（数字越大字越大），h1通常作为大标题使用。

    section：章节，可嵌套（例如小说章节分节）

    article：文章

    p：段落

    header：顶部，头部（投放广告/声明）

    footer：底部（投放广告/声明）

    main：标记主要内容，使结构更加清晰

    aside：旁支内容（用作导航或者标注参考资料）

    div：划分，把网页分成块状

  • 全局属性（所有标签都有的属性）

    class：标记标签/分类.通常使用.ClassName 的方式设置样式。使得包含ClassName的class标签都要被设置样式。

    contenteditable：可编辑的内容，有此属性，用户可以编辑页面上任意一个元素。

    hidden：隐藏元素

    id:全局唯一（尽量不要用）

    style：设置样式，优先级 js > HTML > css

    tabindex：设置网页的Tab键选中顺序（正数表示顺序访问，0表示最后访问，-1表示不访问）

    title：显示完整内容，正常情况下会隐藏

  • 内容标签

    ol：order list 有序列表

    li：list item 列表项

    ul：unordered list 无序列表

    dl+dt+dd：

      dl：description list 描述列表

  dt：description tera 被描述的对象

  dd：description data 描述内容

    使用示例：

    <dl>
    <dt>腾讯</dt>
    <dd>国内top1的游戏公司</dd>
</dl>

    pre：区间内保留空格（多个连续空格/回车会缩成一个空格）

    hr：分割线

    br：分行，相当于“\n”

    a：插入链接

    em：区间内表示强调，默认为斜体字体

    strong：加粗字体

    code：区间内英文字体等宽，方便对齐。

    quote：表示引用，行

    blockquote：块级引用，会分行

  • 默认样式（ HTML本身带有的标签）

    User Agent：浏览器

    CSS reset：默认样式->好看的样式

avatar
文章
阅读
粉丝