HTML 入门笔记1

HTML概况

万维网 WWW = URL + HTML + HTTP。

Tim Berners-Lee发明了HTML

HTML 标签(18个->大约110个)

只学习狭义的HTML5 新旧32个标签

HTML5技术集合

新标签、新属性
新的通信技术：WebSockets、WebRTC等
离线存储技术：LocalStorage、断网检测
多媒体技术：视频、音频
图像技术：Canvas、SVG、WebGL
Web增强技术：History API、全屏
设备相关技术：摄像头、触摸屏
新的样式技术：CSS3新的布局Flex、Grid

正确的学习方法

把所有标签读一遍，了解其内容
全部忘掉，只记住div和span
开始学习CSS
找一个页面仿写
发现更适合的标签，就替换原有标签
继续写页面

体系化学习

如何学习一门语言

语法(怎么写代码)
如何调试(怎么知道自己代码哪里写错了)
在哪查资料(抄代码)
标准制定者是谁

如何学

Copy-抄文档、抄老师
Run-放在自己的机器上运行
Modify-加入一点自己的想法，然后重新运行

HTML起手式

<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--页面语言，可以改成zh-CN-->
<head>
    <meta charset="UTF-8"><!--文件的字符编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--禁用缩放，兼容手机-->
    <title>Document</title><!--告诉IE使用最新内核-->
</head>
<body>
    
</body>
</html>

CSS Reset

来自腾讯官网

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100px;
}
body {
  color: #fff;
  line-height: 1.5;
  font-size: 14px;

  font-family:'PingFangSC-Regular', 'helvetica neue', tahoma, 'PingFang SC', 'microsoft yahei', arial, 'hiragino sans gb', sans-serif;
  -webkit-font-smoothing: antialiased;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: 0;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
textarea {
  resize: none;
}
img {
  border: 0;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
}
a,a:hover,a:active,a:visited,a:link,a:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline:none;
  background: none;
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-variant: normal;
}

HTML 标签

英语

单词	翻译	单词	翻译
heading	标题	order	顺序
body	身体、正文	ordered	有序的
paragraph	段落	unordered	无序的
section	章、节	description	描述
article	文章	term	术语
main	主要	data	数据
aside	旁边	quote	引用
anchor	锚、定点	block	块
strong	强壮、重要	inline	行内
emphasis	强调、重读	break	打破

章节标签

表示文章/书的层级

标题h1~h6
章节section
文章article
段落p (paragraph)
头部header(区分head)
底部footer
主要内容main
侧边内容aside

==划分div==

 <body>
    <header>顶部广告</header>
    <main class="middle border">
      <h1 contenteditable>文章标题</h1>
      <section>
        <h2>第一章</h2>
        <p>
          这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
        </p>
        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>
        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3 4 5
    </aside>
    <footer>&copy; yangbin1215所有</footer>
  </body>

全局属性

所有标签都具有的属性

class 类选择器可配合css使用
contentedition 元素可编辑
hidden 隐藏标签将style标签放在中并设置｛display:block｝使其在页面中可见。
id 全局的唯一标识，然并卵，浏览器不会报错，不到万不得已不使用。
style 元素样式，写法与CSS相同，优先级高于CSS，可以被JavaScript覆盖。
tabindex 用于元素被tab键检索，属性值大于0按顺序检索，等于0最后检索，小于0不被检索。
title 显示完整内容可配合CSS中的overflow使用

内容标签

ol + li 有序列表和列表项 ordered list list item
ul +li 无序列表和列表项 unordered list
dl + dt + dd 描述某项事物 dt事物名称 dd 描述内容 description + term + data
per 浏览器会将多个空格、回车、tab合并成一个空格，per标签可以将这些保留 preview
hr 分割线
br 换行 break
a 超链接标签 (anchor 锚)
em 强调内容呈斜体表示语气上的强调 emphasis
strong 强调内容呈粗体强调内容强调本质
code 代码块内容等宽
q 引用 quote
blockquote 引用块