HTML基础

Posted on Edited on In ,

介绍

超文本标记语言(Hypertext Markup Language, HTML)是一个可以用来结构化 Web 内容并给予其含义和目标的编码语言。

HTML 并不是真正的的程序语言，它是一种标记语言.

它由一系列的元素（elements）所组成，不同的元素各有功用.

HTML5 是定义 HTML 标准的最新的版本。是一个新版本的 HTML 语言，具有新的元素，属性和行为.

doctype

doctype 是文档类型说明.

<!DOCTYPE html>有什么作用?

告诉浏览器的语言解析器用什么类型解析文档

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）

设定文档语言

<html lang="zh-CN">

  • SEO(搜索引擎优化)
  • 有利于视障人士通过读屏器阅读

HTML 头部

元数据<meta>:

指定文档编码: <meta charset="UTF-8">

适配移动页面: <meta name="viewport" content="width=device-width, initial-scale=1.0">

设置 referer: <meta name="referrer" content="never">

添加页面描述: <meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大...>

定制页面图标: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

应用 CSS 和 JS

1
2
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
  1. link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
  2. 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
  3. import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
  4. link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

src 与 href 的区别

区别：src 用于替代这个元素，而 href 用于建立这个标签与外部资源之间的关系

<link href="style.css" rel="stylesheet" />浏览器加载到这里的时候，html 的渲染和解析不会暂停，css 文件的加载是同时进行的

<script src="script.js"></script>当浏览器解析到这句代码时，页面的加载和解析都会暂停直到浏览器拿到并执行完这个 js 文件

标签

行内元素有：a b span img input select strong（强调的语气）

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

空(void)标签就是不用加闭标签的标签，也可以叫闭元素。如：

  • <area>
  • <base>
  • <br>
  • <col>
  • <colgroup> when the span is present
  • <command>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <keygen>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <track>
  • <wbr>

可替换标签

宽高由自己决定的元素，如：

  • <img>
  • <video>
  • <input>
  • <button>

总结:

常见块级

div:文档节

section:文档节

nav:导航

header:页眉

article:文章

aside:文章侧栏

footer:页脚

details:元素的细节

summary:details 元素可见的标题

dialog:对话框窗口

h1,h2,h3,h4,h5,h6:标题

p:段落

ul:无序列表

ol:有序列表

dir:目录列表

li:项目

dl:列表

dt:列表项目

dd:项目描述

menu:命令的菜单,列表

menuitem:菜单项目

command:命令按钮

form:表单

fieldset:围绕元素的边框(可用于表单内元素分组)

legend:在边框上的标题

select:选择列表(内联元素)

optgroup:组合选择列表选项

option:选择列表选项(也可做 datalist 选项)

datalist:下拉列表(id 要与 input 中 list 属性值绑定)

table:表格

caption:表格标题

thead:组合表头内容(th)

tbody:组合主体内容(td)

tfoot:组合表注内容(td)

tr:表格行

th:表头单元格

td:表格单元

col:表格列属性;(空标签)

colgroup:表格格式化列组;

iframe:内联框架

figure:媒介内容分组

figcaption:figure 标题

map:图像映射

area:图像区域

canvas:图形容器(脚本来绘制图形)

video:视频

source:媒介源

track:文本轨道

audio:声音内容

br:换行(空标签)

hr:水平分割线(空标签)

pre:格式文本

blockquote:块引用

address:文档联系信息

center:居中文本(不赞成使用)

spacer:在水平和垂直方向插入空间(空元素)

常见行内标签

span:内联容器

abbr:缩写

em:强调

strong:粗体强调

mark:突出显示的文本

b:粗体

i:斜体

bdi:文本方向

bdo:文字方向

big:大字体

small:小字体

sup:上标

sub:下标

del:被删除的文本

strike:删除线

s:删除线

ins:被插入的文本

u:下划线

nobr:禁止换行

wbr:单词换行时机(空标签)

tt:打字机文本

kbd:键盘文本

time:日期/时间

cite:引用

q:短引用(“”)

font:字体设定(不常用)

acronym:缩写(html5 不支持)

dfn:字段(不常用)

a:锚点

img:图片

embed:内嵌(空标签)

label:input 标记(点击文本触发控件)

input:输入框

button:按钮

keygen:生成秘钥(空标签)

textarea:多行文本输入框

output:输出结果

ruby:中文注音

rt:注音

rp:浏览器不支持 ruby 元素显示的内容

progress:进度条

meter:度量

var:定义变量

code:计算机代码文本

samp:计算机代码样本

select:下拉列表

文本

HTML 包括六个级别的标题， <h1> – <h6>。

通常一个页面只有一个<h1>，请尽量按顺序使用 <h1> – <h6>。

段落:<p></p>

无序列表: <ul><li></li></ul>

有序列表: <ol><li></li></ol>

描述列表:

1
2
3
4
<dl>
  <dt>吃藕</dt>
  <dd>chi ou = 吃藕 = 丑 例句：被老板忽悠剪了个吃藕的发型。<dd>
</dl>

缩写:

1
2
3
<p>
  最近大家都在学 <abbr title="Hypertext Markup Language">HTML</abbr>。
</p>

时间:<time datetime="2016-01-20">2016年1月20日</time>

特殊字符:

符号 代码
< <
> >
“ "
‘ '
& &
空格  

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容。

i内容展示为斜体，em表示强调的文本；

自然样式标签:

b, i,u,s, pre

语义样式标签:

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

图片

普通图片:

1
2
<!-- 显示 Vue.js logo -->
<img src="https://vuejs.org/images/logo.png" alt="Vue.js logo" width="200">

带说明的图片(比如博客头像):

1
2
3
4
5
6
7
<figure>
  <img src="https://c-ssl.duitang.com/uploads/item/201608/12/20160812105654_JaZUi.thumb.700_0.jpeg"
       alt="我是说明,小新"
       width="60"
       height="60">
  <figcaption>小新</figcaption>
</figure>

表格

简单表格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<table>
  <thead>
    <tr>
      <th>球员</th>
      <th>号码</th>
      <th>身高</th>
      <th>体重</th>
      <th>生日</th>
      <th>国籍</th>
      <th>出生地</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>勒布朗·詹姆斯</td>
      <td>23</td>
      <td>2.03米/6英尺8英寸</td>
      <td>113.4公斤</td>
      <td>1984年12月30日</td>
      <td colspan="2">美国</td>
    </tr>
    <tr>
      <td>凯里·欧文</td>
      <td>2</td>
      <td>1.91米/6英尺3英寸</td>
      <td>88公斤/193磅</td>
      <td>1992年3月23日</td>
      <td>美国/澳洲</td>
      <td>澳洲</td>
    </tr>
    <tr>
      <td>凯文·乐福</td>
      <td>0</td>
      <td>2.08米/6英尺10英寸</td>
      <td>110公斤/243磅</td>
      <td>1988年9月7日</td>
      <td colspan="2">美国</td>
    </tr>
  </tbody>
</table>

<style>
table {
  border-collapse: collapse;
  //表格线合并
}
th, td {
  border: 1px solid green;
  //设置边框
}
</style>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="login">
//设置登录框
  <input type="text" name="sex" placeholder="可以显示未输入前的字">
  //输入框
  <form action="/getInfo" method="get">
      <div class="submit">
         <button>提交😁</button>
      </div>
    <div class="username">
      <label for="username">姓名</label>
      <input id="username" type="text" name="username" value="ruo">
      //文本类型输入框
    </div>
    <div class="password">
      <label for="password">密码</label>
      <input id="password" type="password" name="password" placeholder="输入密码">
    //密码类型输入框
    </div>
    <div class="hobby">
      <label>爱好</label>
      <input type="checkbox" name="hobby" value="read"> 读书
      <input type="checkbox" name="hobby" value="music"> 听歌
      <input type="checkbox" name="hobby" value="study"> 学习
      //多选框(复选框)
    </div>
    <div class="sex">
      <label>性别</label>
      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女
      //单选框
    </div>
    <div class="file">
      <input type="file" name="myfile" accept="image/png">
      //上传文件按钮
    </div>
    <div class="select">
      <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
      </select>
      //下拉框,默认上海
    </div>
    <div class="textarea">
      <textarea name="article">
         多行文本，注意和 type=text的区别
      </textarea>
      //下面是四种按钮提交方式
      <input type="hidden" name="csrf" value="12345623fafdffdd">
        <input type="button" value="Buttom" /> 不会提交
        <input type="submit" value="Submit" /> 会提交
        <input type="reset" value="Reset" /> 重置输入
    </div>
  </form>
</div>

表单提交中Get和Post方式的区别

  1. Get一般用于从服务器上获取数据，Post向服务器传送数据
  2. Get传输的数据是拼接在 Url 之后的，对用户是可见的；Post的传输数据对用户是不可见的
  3. Get传送的数据量较小，不能大于 2KB。Post传送的数据量较大，一般被默认为不受限制
  4. Get安全性非常低，Post安全性较高
  5. 在 FORM 提交的时候，如果不指定 Method，则默认为Get请求

label 标签的作用

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

超链接

1
2
3
4
5
6
7
8
9
//简单链接:
<a href="https://github.com/fe13">FE 13</a>
//title属性:
<a href="https://github.com/fe13" title="可能是未来中国最火的前端工程师的聚集地">FE 13</a>
//外部链接:
//将target设置成_blank时，点击链接浏览器会新开一个 Tab 打开该网页。
<a href="https://github.com/fe13" title="可能是未来中国最火的前端工程师的聚集地" target="_blank">FE 13</a>
//返回顶部链接:
<a href="#">返回页面顶部</a>

文档内部链接:

用于定位到文档的某一部分，<a> 的 href 要对应文档内某个元素的 id（id 的值在文档内要唯一）

1
2
<a href="#email链接">Email链接</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">表单相关标签</a>

图片链接:

1
2
3
<a href="https://github.com/fe13" title="可能是未来中国最火的前端工程师的聚集地">
  <img src="https://avatars0.githubusercontent.com/u/28950695?v=3&s=200" height="100">
</a>
1
2
3
4
5
6
下载链接:
<a href="https://angular.io/resources/images/logos/angular/angular.svg" download>下载 Angular Logo</a>
电话链接:
<a href="tel:+8613701234567">+86 13701234567</a>
Email 链接:
<a href="mailto:xiaoxin@xiaoxin.cn">发封邮件给小新</a> <br>

文档结构

页头 <header>

导航栏 <nav>

主内容 <main>，后面一般接 <article>,<section>,<div>

侧边栏 <aside>

页尾 <footer>

语义化 HTML

选择合适的标签、使用合理的代码结构，便于开发者和视觉障碍人士阅读，同时让浏览器的爬虫和机器很好地解析。

相对路径

同一站点尽量使用相对路径。

1
2
3
4
5
6
<!-- index.html -->
<img src="images/logo.png">
/* app.css */
.container {
  background: url('../images/background.png');
}

绝对路径

https://github.com/fe13/fe/blob/master/README.md

浏览器内核

主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]

Gecko内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等

Presto内核：Opera7 及以上。      [Opera 内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome 等。   [ Chrome 的：Blink（WebKit 的分支）]

HTML5 新特性

  1. 语义化标签: header footer main article nav section aside等
  2. 增强型表单: date name email range search tel
  3. 视频音频: video audio
  4. canvas绘图, svg绘图
  5. 地理定位: geolocation
  6. 拖放 API: drag
  7. web worker: 是运行在后台的 js 脚本
  8. webstorage: localStorage sessionStorage
  9. webSocket: HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

如何实现浏览器内多个标签页之间的通信

  1. 使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
  2. websocket 协议
  3. webworker