1.H5课程
HTML+CSS
JavaScript
nodeJS
Vue
H5新特性
微信开发
2.技术点
HTML
- 定义页面结构
CSS
- 定义页面样式
JavaScript
- 定义页面逻辑
3.准备
编辑器
- sublime
- notepad++
- vim
- atom
- dreamweaver
- webstrom(集成环境)
浏览器
- 主流浏览器
- chrome 内核 webkit
- Safari 内核 webkit
- firfox 内核 Trident
- 壳浏览器
- Opera google 内核
- 360安全 双核 google 内核/IE
- 360极速 双核 google/IE
- UC
- 猎豹
- 百度浏览器
- 淘宝浏览器
字符集编码
- ASCII码
- 汉字编码
- GB2312
- GBK
- 国际通用编码
- UTF-8
计算机存储单位
- 字节B（Byte）
- 位（比特）b(bit)
4.关于HTML
什么是HTML
- 超文本标记语言
5.HTML基本语法
HTML标签
- 单标签
<标签名>或</标签名> - 双标签
<标签名>内容</标签名> - 也叫元素
属性
- 属性属于标签
- 一个标签可以有多个属性 ，每个属性有不同的意义
- 属性值最好写在双引号中
代码规范
- 缩进 Tab或4个空格
注释
<!-- 注释内容 -->
6.HTML主体结构标签
文档说明
<!DOCTYPE HTML>
html标签
<html></html>
head标签
<heade></head>- 里面会包含诸如页面标题。搜索引擎信息等相关的标签
body标签
<body></body>- 页面的主体内容
- 属性
- background
- bgcolor
- text
- link 超链接默认颜色
- vlink 点击过后的颜色
- alink 正在点击的颜色
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转</title>
</head>
<body bgcolor="#aaffaa" text="white" link="green" alink="white" vlink="orange">
<h1>小同志，不错啊！</h1>
<hr>
<a href="http://unclealan.cn">博客</a>
</body>
</html>
7.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="description" content="80字之内一段话">
定义网站标题图标
<link rel="shortcut icon" href="图片地址.ico">
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>同志交友</title>
<!-- 设置字符集 -->
<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="description" content="全国最后最大最丰富的同志交友网站">
<!-- 定义网站标题 图标 -->
<link rel="shortcut icon" href="imgPenguins.ico">
</head>
<body>
<h1>header标签内容</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga qui, ullam aspernatur sequi! Iure magnam adipisci quidem optio nulla nemo nesciunt voluptate! Similique culpa modi eos, id iste deleniti, alias!</p>
</body>
</html>
8.格式排版标签
换行标签 br
<br />这是个单标签
分割线 hr
<hr />这是个单标签- 语义：段落与段落之间的分割
- 属性
- width
- size
- align
- noshade
段落标签 p
<p></p>- 语义：表示段落
- 属性
- align:left/right/center
原样输出标签 pre
<pre></pre>- 语义：需要原格式输出 显示代码
标题标签 hn
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
居住标签 center
<center></center>- 不建议使用