《HTML入门笔记1》

知有
143 阅读3分钟

HTML入门笔记1

  1. HTML 是谁发明的

    2. HTML的英文全称是 Hyper Text Markup Language，由英国的Tim Berners-Lee（李爵士）发明。

  2. HTML 起手应该写什么

    3. <!DOCTYPE html>    （文档类型）
<html lang="en">    (定义文档语言，中文："zh-CN")
<head>              (包含在head里的内容为隐藏的，不显示在网页中)
    <meta charset="UTF-8">     （文件的字符编码，"UTF-8"为万国码）
    <meta http-equiv="X-UA-Compatible" content="IE=edge">（告诉IE使用最新内核）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">（针对移动端网页的优化，禁止缩放，兼容手机）
    <title>Document</title>  （文档标题）
</head> 
<body>  （文档主体部分）
    
</body>
</html>

  3. 常用的表章节的标签有哪些

    • 标题标签 h1～h6
      head的缩写，每个标题独占一行，重要性依次递减
    • 章节标签 section
      定义文档的某个区域，表示这块内容是一个整体。
    • 段落标签 p
      每个段落为一块，段落之间会有明显空隙
    • 头部标签/页眉 header
      定义文档或者文档的一部分区域的页眉，一般作为介绍内容或者导航链接栏。
    • 脚部标签/页脚 footer
      在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
    • 主要内容 main
    • 旁支内容 aside
    • 划分 div
      可用于网页布局

  4. 全局属性有哪些

    • class
      （给标签分类，或者给标签一个标记）
    • contenteditable
      可以使任何一个元素被编辑
    • hidden
      可以被用来隐藏一个页面元素，可以通过display:block来显示出来
    • id
      如果添加的元素是全页面唯一的，可以用id，但id的唯一性并不确定，尽量不用id，而用class。另外 window已有的全局属性，不能通过标签覆盖（在console中输入.window可以查询到）如：parent/top/self...
    • style
      规定元素的行内样式。优先级是最高的。如果css、html、js同时出现不同的style，最终以js内容呈现。
    • tabindex
      页面上所有可交互的东西都可以用tab键访问，tabindex用来控制tab的访问顺序。可以是tabindex=1.2.3...连续性数字，也可以是非连续性数字，按数字从小到大顺序访问，特殊值 0表示最后一个访问，-1表示不访问。
    • title标题
      title属性规定关于元素的额外信息。 鼠标悬停在该元素时，会展示信息。

  5. 常用的内容标签有哪些

    • ol+li 有序列表
      (ordered list) ol中可以含有多个li，但不能含有任何除了li之外的子元素。
    • ul+li 无序列表
      (unordered list) 默认样式为圆点
    • dl+dt+dd 定义列表
      dl (description list)描述列表
      dt (description term)被描述的对象
      dd (description data)描述内容
    • pre 预格式化文本
      被包围在 pre 标签元素中的文本会保留空格和回车。
    • hr
      水平分割线
    • br
      换行,(break)
    • a 超链接
          <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

      href 用来指定链接目标的url地址<br>
target 用于指定链接页面的打开方式<br>
_self为默认值（当前窗口打开），_blank为在新窗口中打开。<br>
（安装Death to _blank插件，可以把所有的页面都变成当前窗口打开）
    • em
      (emphasis) 语气很重要，字体倾斜，起到强调作用
    • strong
      内容本身很重要，字体加粗，起到强调作用
    • quote 引用
      默认是没有呈现效果的，只起到表示引用的作用，且默认是内联不会换行。
    • blockquote
      换行/块级引用，浏览器通常会对 blockquote 元素进行缩进。

    额外知识：溢出省略

    white-space: nowrap; (不要换行)
text-overflow: ellipsis; (溢出的部分省略)
overflow: hidden;（省略的部分用...表示）

    ©本文为Easar的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

avatar
文章
阅读
粉丝