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=""]可加多个,以空格隔开,实际是一个整体,不方便找元素,多个只写一个认不出;
  • 简写方式.aClass{}只匹配引号里的一个类型;

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

  • [x] hidden:隐藏 区别 优先级高于{display:none}?hidden可以被CSS{display:block}挽回;

  • [x] id:全页面唯一?保证全局唯一?;

  • 不到万不得已,不用id ?多次使用相同id 不报错?;

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

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

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

  • 有忌讳 id='parent'时失效selftop

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

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

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

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

  • [x] 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 教程


·未完待续·

参考文章

相关文章