HTML 是李爵爷发明的

HTML 起手应该写什么

创建非中文目录（eg.html-demo-1 ）

项目分开，不同项目创建不同目录，不混用

用VSCode打开，新建index.html

使用Emmet语法：

!

然后敲

Tab

文件保存状态：小圆点–>未保存

  • <!DOCTYPE html>：文档类型，告诉浏览器，是哪一种?（SVG/XHTML）

  • <html lang="en"></html>：根目录标签，语言声名属性lang=,"en"改成"zh-CN"，中文许多不同版本，谷歌翻译；

  • <head></head>：不缩进，节约空间，里面一般写页面上看不见的元素；

    • <meta charset="UTF-8>：文件字符编码，改为和当前实际编码不同的话，可能出现乱码，UTF-8支持所有语言，GBK只支持中文简繁体等亚洲语言

      • <meta name="viewport" content="width=device-width,initial-scale=1.0">: viewport视口,可设置防止页面缩放，见CSS

      • <meta http-equiv="X-UA-Compatible" content="ie=edge">页面所支持 浏览器最新（最近版本）的内核

      • <title>Document</title>标题：显示在浏览器标签Tag上，可设置特殊效果

顺序无关，和加载CSS、JS时有关，以及<meta charset="UTF-8>影响编码显示

  • <body></body>：不缩进；

章节标签(文章/书的层级)

  • 标题 h1~h6

  • 章节 section：<section>某一章</section>嵌套<section>某一节</section>

  • 文章 article

  • 段落 p：一段话 Lorem Ipsum

  • 头部 header：区别于<head></head>标签，表示顶部的，置顶的

  • 脚部 footer：一般用于版权声明，网页特殊符号(HTML字符实体)

  • 主要内容 main

  • 旁支内容 aside

  • 划分区域 div 区分不同的整体

全局属性

所有标签都有的属性：

  • class：

  • 类型，样式标记；

  • [class=""]可加多个，以空格隔开，实际是一个整体，不方便找元素，多个只写一个认不出;

  • 简写方式.aClass{}只匹配引号里的一个类型；

  • contenteditable：可以使任何一个元素被编辑，用来做一个编辑器，编辑页面上的文字，比textarea好用；布尔属性，写了就生效，无值

  • hidden：隐藏 区别 优先级高于{display:none}？hidden可以被CSS{display:block}挽回；

  • id：全页面唯一？保证全局唯一？；

  • 不到万不得已，不用id ?多次使用相同id 不报错？；

  • 浏览器允许有多个相同id属性；用class就够了；

  • [id="xxx"]简写#xxx；

  • 和CSS相关，和JS相关，获取唯一id,有多个就不生效xxx.style.border=""，只用老司机可直接调用；

  • 有忌讳 id='parent'时失效self``top；

  • 控制台打window.所列出的所有属性名都不能被作为id名使用；

  • window已有的全局属性，不可被xxx.style.border=""覆盖,除非用document.getElementById('top')；

  • style：效果等同于style标签里，但style属性优先级更高，style属性不是CSS，是HTML标签的属性，语法相同而已；可由js设置xxx.style='10px solid red'不能有分号在属性里，js优先级最高，覆盖所有样式

  • tabindex：切换焦点 控制tab键的顺序，从1开始，自然数，不必是连续的；特殊值0，表示最后一个；特殊值-1，表示不可获取

  • title：鼠标移入，显示提示文字，值为要显示的字符串，显示所有完整内容

单行文字溢出：省略表示溢出

1
2
3

white-space:nowrap;/*不换行*/
text-overflow:ellipsis;/*溢出部分用省略号表示*/
overflow:hidden;/*溢出的文字隐藏*/

**<style></style>**标签看不见，一般写在head里，怎么使style标签显示在页面上？

  • Chrome 开发者工具调试 默认style{display:none}
  • 写到body里
  • 设置contenteditable属性
  • 加style{display:block}属性

用户可以在页面上该样式 然并卵 用于调试 调试技巧

默认属性

  • HTML出现得比CSS早

  • 默认自带样式user agent stylesheet

  • 浏览器自定义样式 不一定符合CSS语法 非标准写法 style规范

  • CSS reset 干掉浏览器默认样式

常用的内容标签，分别是什么意思

  • ol + li 有序列表

  • ul + li 无序列表

  • dl + dt +dd 描述 term 术语

HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格

  • a 超链接

  • strong 强调本身很重要

  • em 强调emphasis 语气重

  • code 代码 等宽字体

  • pre 预编译 pre包code

  • hr 分割线

  • br 换行

  • q 内联引用（inline）

  • blockquote 块级引用

更多详细，参考网道/WangDoc.com/HTML 教程

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简