浏览器（内核）
- Chrome（Blink）
- Firefox （Gecko）
- Safari （Webkit）
- Opera （Presto）
- IE (Trident)
meta标签：
指定编码字符集，告诉浏览器用哪种字符集解析文件。
utf-8字符集：
包含世界上所有的文字。（被称为万国码）
保存文件时报存格式要和mate标签指定的字符集格式保持一致，不然还是会乱码
标签分类
- 单标签：不需要包裹内容的。
- 双标签：需要包裹内容的。
标签的作用
- 标签的作用不是给标签内的东西设置样式，设置样式其实是浏览器干的事，标签只负责让浏览器识别它是什么，浏览器会再根据它的类型设置对应的样式。
DTD文档声明
-
样式为:
<doctype html>，大小写没限制，都行。 -
由于HTML先后有多个规范出台，不同规范可能存在语法差异，所以要搞用DTD文档告诉浏览器我这是用哪一种规范写的。
- DTD文档声明必须写在文件的第一行！！！
<DOCTYPE HTML> #文件第一行！！！
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
- 不写DTD文档声明文件也能正常运行，但这是规范要求，所以必须要写。
Web标准规范
- Web标准有很多规范，而html5规范是向下兼容的，采用html5规范的文档可以适用于任意规范。
Webtorm操作技巧
-
快速新建文件：
Ctrl + Alt +Insert -
光标跳动到行末：
End -
光标跳动到行首：
Home -
光标多行闪烁：按住
Alt，上下拖动鼠标 -
快速复制光标所在行：
Ctrl + D -
快速删除光标所在行：
Ctrl + X -
快速给内容包裹标签：选中内容，按下
Ctrl + Alt + T，再按回车输入标签名就好了。 -
设置文本超过屏幕自动换行：
在Webpack里，进入File--Setting--Editor--General，在Soft Wraps里勾选Use soft wraps in editor，点击OK设置完成。 -
快速上下移动选中内容:
Ctrl +Shift + ↑（方向键上）
Ctrl +Shift + ↓（方向键上） -
快速合并/展开标签:
选中标签，按下
Ctrl+-
Ctrl++ -
快速新启一行:
Shift + Enter -
生成标签结构
各标签作用
（这是不严谨的说法，因为标签其实只负责标记，这里应该理解成浏览器对各个标签的渲染效果）
- p标签：让元素独占一行
- hr标签：生成一条独占一行的分割线
注释
- 语法：
<!-- 注释内容 -->
- 注释快捷键：
Ctrl + /
img标签
- 作用：插入图片
属性
- src（设置图片路径）
<img src="url地址">
- width、height（指定宽高）
<img src="url地址" width="100px" height="100px">
不指定宽高时将是默认宽高，指定宽高中的一方，图片会等比例变化。
<img src="url地址" width="100px">
或
<img src="url地址" height="100px">
- title(鼠标悬停时，弹出图片描述框，内容就是title的值)
<img src="url地址" width="100px" title="这是一张图片">
-alt（图片加载失败时显示的信息）
<img src="url地址" width="100px" alt="对不起，图片不见了~" >
img标签不会独占一行
a标签
- 属性
href
<a href="url">链接</a>
taget
<a href="url" taget="-self"> 链接</a> 在当前页面打开链接（默认）
<a href="url" taget="-blank"> 链接</a> 在新的网页中打开链接
title
<a href="url" title="这是标题提示">链接</a>
列表
- 无序列表
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
- 有序列表
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
表格
表格结构：
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
效果是一个三行三列的表格,如下图
| 1.1 | 1.2 | 1.3 |
|---|---|---|
| 2.1 | 2.2 | 2.3 |
| 3.1 | 3.2 | 3.3 |
表格宽高默认由内容撑开，也可以通过width、height属性设置。
表格border默认是0
网友评论