HTML入门笔记1

dan_n
114 阅读2分钟

HTML的发明

  • Tim Berners-Lee，发明了万维网WWW。同时发明了HTML、HTTP和URL（前端的核心）
  • 万维网的直观感受：输入网址跳转网页URL->显示网页HTML->看不见的部分由HTTP搞定

HTML起手

Emmet 感叹号+enter

补充：Emmet设置 修改模板
juejin.cn/post/695180…
文件路径：
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/emmet/dist/node
打开emmetNodeMain.js

章节标签

  • h1~h6 标题
  • section 章节
  • p 段落元素 块级元素
  • header 网页或章节或区块的头部
  • footer 脚部，通常包含版权等信息
  • main 主要内容
  • aside 旁支内容
  • div 划分
<body>
  <header>顶部广告</header>
  <h1>文章标题</h1>
  <div>
    <main>
      <section>
        <h2>第一章</h2>
        <p>一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话</p>
        <section>
          <h3>1.1节</h3>
          <p>一段话一段话</p>
        </section>
        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>参考资料 123</aside>
  </div>
  <footer>&copy;版权所有</footer>
</body>

全局属性

  • class 类，元素可以有多个class，空格分隔
  • contenteditable 元素内容可编辑
  • hidden 隐藏元素
  • id
    • 表示全局唯一标签
    • 但是不到万不得已不要用，因为不保障唯一性，重复id不会报错
    • JavaScript可以直接通过元素id来获取该元素，前提是id的值没有与内置属性重名，例如window.parent, window.self, window.top
  • style 样式，优先级高于css
  • tabindex 用户不用鼠标而是用键盘操作，可以用Tab键遍历元素
    • 属性值为负整数会被忽略，通常写-1
    • 属性值为0排列在最后
    • 正整数访问顺序由小到大
  • title 鼠标悬浮提示，会完整显示

补充：单行文字溢出省略号

{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

内容标签

  • ol + li (ordered list + list item) 有序列表容器+列表项，有数字编号
  • ul + li (unordered list + list item) 无序列表
  • dl + dt + dd (description list + term + data) 描述列表+术语+描述
<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>
  • pre
    • 连续多个空格/回车/tab会被转成一个
    • 可以通过此标签使元素中文本按照原文件的编排展示
  • code 代码
    • 默认字体是等宽的
    • 行内元素，表示多行要放在<pre>内部
  • hr 水平线
  • br 换行
  • a 锚元素
    • href属性创建超链接
    • target属性(_self，_blank）
  • em 语气上的强调，斜体显示
  • strong 内容上的重要，粗体显示
  • q 行内引用元素
  • blockquote 块级引用元素
avatar
文章
阅读
粉丝