写代码啦
HTML入门笔记1
回复数(1) 浏览数(108)
isak 11月08日 18:06 最后回复来自: 白色石头 学习
{{topic.upvote_count || 0}} 编辑 回复

  • HTML是谁发明的
    蒂姆·伯纳斯-李

  • HTML 起手应该写什么
    输入感叹号，然后按tab键

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body></body>
    </html>

  • 常用的表章节的标签(全局属性列表)

  1. h1~h6
    标题标签，用来展示文档或章节的标题，由于 h 元素拥有确切的语义，应该慎重地选择恰当的标签层级来构建文档的结构。不要利用标题标签来改变同一行中的字体大小

  2. section
    表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题
    section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素
    至于何时使用，基本上可以这两点：
    section 不是一个专用来做容器的标签，专用的是 div
    section 里应该有 标题（h1~6），但文章中推荐用 article 来代替
    我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）

  3. article
    定义独立的内容，一般用于博客/论坛/新闻的正文区域
    内容本身必须是有意义的且必须是独立于文档的其余部分
    潜在来源：论坛帖子、博客文章、新闻故事、评论

  4. p
    表示一个段落，通常用于文章分段

  5. header
    定义文档的页眉，通常作为介绍内容或者导航链接栏的容器，在一个网页中，可以使用多个header标签，表示各个区域的页眉
    header标签只是起到语义化的作用，它对内容是没有任何显示效果的，和div标签一样

  6. footer
    footer标签定义文档或者文档的一部分区域的页脚
    一般情况下footer标签会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等

  7. main
    main标签规定文档的主要内容
    在一个文档中，不能出现一个以上的main标签
    main标签的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。

  8. aside
    aside元素在网站中主要有以下两种使用方法
    1）被包含在article标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
    2）在article标签之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接，博客中的其它文章列表、广告单元等。

  9. div
    div标签是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用

  • 全局属性有哪些

  1. class
    规定元素的类名,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
    一个元素可以用多个类名，每个类名用空格分隔，多个元素可以拥有同一个类名

  2. contenteditable
    一个枚举属性（enumerated attribute），表示元素是否可被用户编辑
    true 或者空字符串，表明元素是可被编辑的；
    false，表明元素不能被编辑。

  3. hidden
    对元素进行隐藏

  4. id
    定义唯一标识符（ID），该标识符在整个文档中必须是唯一的
    label标签的for属性可以与form表单的控件进行关联，而for属性的值就是form表单控件的id
    在js中可以直接通过元素的id来操作元素，但是如果id的值是关键字的话就会导致无法正常操作元素，所以不建议使用该方式操作元素，应该使用document.getElementById来操作元素

  5. style
    用于声明元素的css样式，建议在单独的文件中定义样式。 该属性和style标签主要用于快速样式化，例如用于测试目的。
    style属性中的css样式的优先级是除了important之外最高的

  6. tabindex
    用于管理键盘焦点，决定元素是否能被选中，以及按下 tab 键过程中被选中的顺序，属性值为整数
    tabindex值正数时按tab键时元素会按顺序依次获取焦点，为0的时候该元素获取焦点的顺序是排在最后的，值为负数时不能通过tab来获取焦点

  7. title
    title 属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本，但是移动设备上，该属性就比较鸡肋
    如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么可以使用title属性
    可参考正确使用HTML title属性

  • 常用的内容标签

  1. ol+li
    ol标签定义了一个有序列表. 列表排序以数字来显示,使用li 标签来定义列表选项
    li中可再嵌套ol或者ul标签，如：

    <ol>
    <li>
    第一项
    <ol>
    <li>a</li>
    <li>b</li>
    </ol>
    </li>
    <li>第二项</li>
    </ol>

  2. ul+li
    ul标签定义无序列表，用法与ol标签一样，根据场景需要来决定使用ol还是ul标签

  3. dl+dt+dd
    dl标签定义描述列表，dt是列表的标题，dd是列表内容，类似ul或者ol标签

    <dl>
    <dt>列表标题1</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dt>列表标题2</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    </dl>

  4. pre
    pre标签可定义预格式化的文本,
    在html中多个空格或者换行符会被合并成一个，被包围在pre标签元素中的文本通常会保留多个空格和多个换行符。而文本也会呈现为等宽字体

  5. hr
    显示为一条水平线，用来分隔 HTML 页面中的内容
    hr标签没有结束标签

  6. br
    br标签插入了一个换行符，是一个空标签，和hr标签一样，没有结束标签

  7. a
    a标签定义超链接
    作用是跳转到外部页面、跳转到内部锚点、跳转到邮箱或者电话

  8. em
    em标签表示强调，文字默认是斜体的

  9. strong
    strong标签表示更强烈的强调，文字默认是加粗的
    em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，em的字体是斜体的，所以阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，strong的字体是加粗的，所以看见某文时，立刻就会凸显出关键词

  10. code
    用于显示一段代码文本，在不设置字体大小的情况下，标签中的字体会比标签外的字体小，因为是内联元素，所以不会保留换号符，若要保留标签内的文本格式，可以把code标签嵌套在pre标签中

  11. q
    用于引用一段话，内联元素，默认样式会在文本前后各添加一个双引号

  12. blockquote
    用法同q标签，不同的是blockquote是块级元素，并且上下左右都有间距，不会自动添加双引号

    blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    }

isak 学习
{{topic.upvote_count || 0}}

  • HTML是谁发明的
    蒂姆·伯纳斯-李

  • HTML 起手应该写什么
    输入感叹号，然后按tab键

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body></body>
    </html>

  • 常用的表章节的标签(全局属性列表)

  1. h1~h6
    标题标签，用来展示文档或章节的标题，由于 h 元素拥有确切的语义，应该慎重地选择恰当的标签层级来构建文档的结构。不要利用标题标签来改变同一行中的字体大小

  2. section
    表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题
    section不是通用容器元素。如果仅仅是用于设置样式或脚本处理，应用div元素。一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素
    至于何时使用，基本上可以这两点：
    section 不是一个专用来做容器的标签，专用的是 div
    section 里应该有 标题（h1~6），但文章中推荐用 article 来代替
    我们可以理解为一个非文章段落，有明确 id 的一个特殊模块容器（不是专用以包住块的容器）

  3. article
    定义独立的内容，一般用于博客/论坛/新闻的正文区域
    内容本身必须是有意义的且必须是独立于文档的其余部分
    潜在来源：论坛帖子、博客文章、新闻故事、评论

  4. p
    表示一个段落，通常用于文章分段

  5. header
    定义文档的页眉，通常作为介绍内容或者导航链接栏的容器，在一个网页中，可以使用多个header标签，表示各个区域的页眉
    header标签只是起到语义化的作用，它对内容是没有任何显示效果的，和div标签一样

  6. footer
    footer标签定义文档或者文档的一部分区域的页脚
    一般情况下footer标签会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等

  7. main
    main标签规定文档的主要内容
    在一个文档中，不能出现一个以上的main标签
    main标签的主要目的是将 ARIA 的地标性作用 main 映射到 HTML 中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。

  8. aside
    aside元素在网站中主要有以下两种使用方法
    1）被包含在article标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。
    2）在article标签之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是友情链接，博客中的其它文章列表、广告单元等。

  9. div
    div标签是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用

  • 全局属性有哪些

  1. class
    规定元素的类名,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。
    一个元素可以用多个类名，每个类名用空格分隔，多个元素可以拥有同一个类名

  2. contenteditable
    一个枚举属性（enumerated attribute），表示元素是否可被用户编辑
    true 或者空字符串，表明元素是可被编辑的；
    false，表明元素不能被编辑。

  3. hidden
    对元素进行隐藏

  4. id
    定义唯一标识符（ID），该标识符在整个文档中必须是唯一的
    label标签的for属性可以与form表单的控件进行关联，而for属性的值就是form表单控件的id
    在js中可以直接通过元素的id来操作元素，但是如果id的值是关键字的话就会导致无法正常操作元素，所以不建议使用该方式操作元素，应该使用document.getElementById来操作元素

  5. style
    用于声明元素的css样式，建议在单独的文件中定义样式。 该属性和style标签主要用于快速样式化，例如用于测试目的。
    style属性中的css样式的优先级是除了important之外最高的

  6. tabindex
    用于管理键盘焦点，决定元素是否能被选中，以及按下 tab 键过程中被选中的顺序，属性值为整数
    tabindex值正数时按tab键时元素会按顺序依次获取焦点，为0的时候该元素获取焦点的顺序是排在最后的，值为负数时不能通过tab来获取焦点

  7. title
    title 属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本，但是移动设备上，该属性就比较鸡肋
    如果你想对使用手机，平板电脑和辅助技术的用户隐藏某些内容，而只对键盘用户显示，那么可以使用title属性
    可参考正确使用HTML title属性

  • 常用的内容标签

  1. ol+li
    ol标签定义了一个有序列表. 列表排序以数字来显示,使用li 标签来定义列表选项
    li中可再嵌套ol或者ul标签，如：

    <ol>
    <li>
    第一项
    <ol>
    <li>a</li>
    <li>b</li>
    </ol>
    </li>
    <li>第二项</li>
    </ol>

  2. ul+li
    ul标签定义无序列表，用法与ol标签一样，根据场景需要来决定使用ol还是ul标签

  3. dl+dt+dd
    dl标签定义描述列表，dt是列表的标题，dd是列表内容，类似ul或者ol标签

    <dl>
    <dt>列表标题1</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dt>列表标题2</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    </dl>

  4. pre
    pre标签可定义预格式化的文本,
    在html中多个空格或者换行符会被合并成一个，被包围在pre标签元素中的文本通常会保留多个空格和多个换行符。而文本也会呈现为等宽字体

  5. hr
    显示为一条水平线，用来分隔 HTML 页面中的内容
    hr标签没有结束标签

  6. br
    br标签插入了一个换行符，是一个空标签，和hr标签一样，没有结束标签

  7. a
    a标签定义超链接
    作用是跳转到外部页面、跳转到内部锚点、跳转到邮箱或者电话

  8. em
    em标签表示强调，文字默认是斜体的

  9. strong
    strong标签表示更强烈的强调，文字默认是加粗的
    em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，em的字体是斜体的，所以阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，strong的字体是加粗的，所以看见某文时，立刻就会凸显出关键词

  10. code
    用于显示一段代码文本，在不设置字体大小的情况下，标签中的字体会比标签外的字体小，因为是内联元素，所以不会保留换号符，若要保留标签内的文本格式，可以把code标签嵌套在pre标签中

  11. q
    用于引用一段话，内联元素，默认样式会在文本前后各添加一个双引号

  12. blockquote
    用法同q标签，不同的是blockquote是块级元素，并且上下左右都有间距，不会自动添加双引号

    blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    }

108
回复 编辑

热门主题

你在学习中踩过的那些坑——为自己总结，也为他人指路
编程学习资源推荐「 圆桌会·第6期」
JS语法
大家每天学习多久呢？「 圆桌会·第5期」
var let和const的区别