HTML
- 定义页面结构
CSS
- 定义页面样式
JavaScript
- 定义页面逻辑
准备
编辑器
- sublime
- notepad++
- vim
- atom
- dreamweaver
- webstorm (集成环境)
浏览器
-
主流浏览器
- chrome 内核 webkit
- Safari 内核 webkit
- firfox 内核 gecko
- IE 内核 Trident
-
壳浏览器
- Opera google内核
- 360安全 双核 google内核/IE
- 360极速 双核 google/IE
- UC
- 猎豹
- 搜狗
- 百度浏览器
- 淘宝浏览器
字符集编码
-
ASCII 码
-
汉字编码
- GB2312
- GBK
-
国际通用编码
- UTF8
计算机存储单位
- 字节 B (Byte)
- 位(比特) b (bit)
- 1B = 8bit
关于HTML
什么是HTML
- 超文本标记语言
HTML的发展历史
- 最新版HTML5
- 之前的版本 XHTML1.0
- 再之前才是 HTML4
HTML基本语法
HTML标签
- 单标签
<标签名>或<标签名/> - 双标签
<标签名>内容</标签名> - 也叫 元素
属性
- 属性属于标签
- 一个标签可以有多个属性，每个属性有不同的意义
- 属性值最好写在双引号中
代码规范
- 缩进 Tab或4个空格
注释
- 快捷键ctrl+/
<!-- 注释内容 -->
HTML 主体结构标签
文档声明
<!doctype html>
html标签
<html></html>
head标签
<head></head>- 里面会包含 诸如页面标题，搜索引擎信息等相关的标签
body标签
<body></body>- 页面的主体内容
- 属性
- background
- bgcolor
- text
- link 超链接默认颜色
- vlink 点击过后的颜色
- alink 正在点击的颜色
<body bgcolor="blue" text="white" alink="black" vlink="green"> </body>
head头部标签
标签
<title></title>定义标题<meta /><link href=""></link>
meta功能
-
定义字符集编码
<meta charset="utf-8"><meta http-equiv="content-type" content="text/html;charset=utf-8">
-
刷新或跳转
<meta http-equiv="refresh" content="3"><meta http-equiv="refresh" content="3;url=http://unclealan.cn">
-
设置关键字
<meta name="keywords" content="每个次用英文,隔开">
-
设置页面描述
<meta name="desctiption" content="80字之内一段话">
定义网站标题图标
<link rel="shortcut icon" href="图片地址.ico">
格式排版标签
换行标签 br
<br />
分隔线 hr
<hr />- 语义：段落与段落之间的分割
- 属性
- width
- size
- align
- noshade
段落标签 p
<p></p>- 语义：表示段落
- 属性
- align : left/right/center
原样输出标签 pre
<pre></pre>- 语义：需要原格式输出 显示代码
标题标签 hr
<h1></h1>一级标题<h2></h2>二级标题<h3></h3>三级标题<h4></h4>四级标题<h5></h5>五级标题-
`<h6></h6>` 六级标题
居中标签
<center></center>- 不建议使用
如何插入图像
<img src="k.jpg" alt="心心相印" width="200" height="200">
定义网站图标
<link rel="shortcut icon" href="tb.ico">
在一个新的网页打开一个百度网站
<a href="http://baidu.com" target="_blank">