初识HTML

HTML基础

Hyper text markup language 超文本标记语言

超文本：网页中可以包含图片、文字、视频、音频、文本框等元素;
标记（标签）：在网页中给网页元素做标记（右键，查看网页源代码）
超链接：实现页面之间的跳转

Sublime常用快捷键

windows+D 返回桌面
windows+R 运行dos
windows+E 打开我的电脑
Alt+Tab 切换软件
Ctrl+Tab 软件内部文档间切换
F2 重命名

Web标准

结构标准：HTML HyperText Mark Language 超文本标记语言
表现标准：CSS Casading Style Sheets 层次样式表
行为标准：javaScript
- ECMAScript javaScript标准
- DOM Document Object Model 文档对象模型
- BOM Browser Object Model 浏览器对象模型

浏览器简介

浏览器涉及技术：浏览器内核，渲染引擎 SEO,Search Engine Optimization(搜索引擎优化)。

浏览器内核：分为两部分：渲染引擎和JS引擎，决定了浏览器如何显示网页的内容、页面格式等

ie trident
firefox gecko
chrome/safari webkit
chrome blink
opera persto

浏览器和服务器的那点事

http协议：超文本传输协议、浏览器和服务器之间的对话（通信的协议）。
https：加密的过程
url协议：规定url地址的格式
协议规定格式：scheme:定义因特网服务类型
host：定义域主机端口：网页默认80端口
path：路径
filename：文件名

HTML结构

<! Doctype html>   <!--声明文档类型-->
<html> <!--根标签-->
<head> <!--头部标签-->
<title>标题</title> <!--网页标题标签-->
</head>
<body>
 	<div>网页主体</div> <!--网页主体标签-->
</body>
</html>
解析：
  <! Doctype html>    
  <html>             
  <head>          
  <title></title>    
  </head>
  <body></body>   
  </html>

注：文档的后缀名只能决定打开方式，不能修改文档类型

HTML标签的分类

单标签
- <! Doctype html>
- <img src="" alt=""/>
双标签
- <html></html>
- <head></head>
- <title></title>
- <body></body>
- …

HTML关系

并列关系（同级）
- <head></head> 和 <body></body>
包含关系（嵌套）
- <head><title>标题</title></head>

开发工具

DreamWeaver：很老的一个软件偏设计师使用
Sublime:轻量级的软件，有很多好用的插件
WebStorm:重量级软件，功能强大

Sublime 常用的快捷键

html:xt + tab html结构
html:5 + tab html结构
Ctrl+shift+D 快速复制
Ctrl+shift+K 快速删除一行
Ctrl+shift+↑/↓ 快速上下移动一行
Tab 补全标签
Ctrl+鼠标左键 选中多行
Ctrl+L 选中一行
Ctrl+H 替换别的标签
Alt+shift+2 查看布局
Alt+V 显示/隐藏菜单栏
ctrl+shift+p + move指令移动文件

HTML标签

单标签

1
2
3

1	<!--注释: 快捷键Ctrl+/--> 
2	<br/>  换行
3	<hr/>  水平线

双标签

段落标签：<p></p>
文本标签：<font></font>

标题标签：

1	<h1></h1>
2	<!--h1只能出现一次，出现多了不利于搜索引擎-->
3	<h2></h2>
4	<h6></h6>

标题系列取值只能取到h6

文本格式化标签
- 加粗 , 常用strong
- 倾斜 , 常用em
- 删除线标签 , 常用del
- 插入文本： , 常用ins
- 上下标标签：,
  注意：使用strong em del ins 更有意义

图片标签

<img src="Legolas.jpg" alt="我的男神" title="legolas" width="500" />

仅指定宽或高时，等比例缩放。

src 图片来源（路径）, alt 替换文本.
title 提示文本（鼠标放到图片上显示的文字;
width 图片显示的宽度
height 图片显示的高度

相对路径和绝对路径（相对路径的可移植性好）

相对路径：
- 文档（html/图片）在同一个文件夹，直接写图片（文档）名字 <img src="Legolas.jpg" alt="legolas" height="300" />
- 文档不在同一个文件夹，在上级文件中 <img src="../1.jpg" alt="legolas" height="300" />
- 文档不在同一个文件夹，在上两级文件中 <img src="../../Hydrangeas.jpg" alt="菊花" height="300" />
- 文档不在同一个文件夹，在下级文件中 <img src="pic/Koala.jpg" alt="考拉" height="300" />
- 文档不在同一个文件夹，在下两级文件中 <img src="pic/photo/Penguins.jpg" alt="企鹅" height="300" />
绝对路径：
- 本地电脑绝对路径 <img src="F:\pic\photo" alt="企鹅" />
- 互联网上的绝对路径：网页中的图片来自服务器端传输过来的。

超链接标签

超链接：<a href="06_test" target="_blank" title="气温高">气温案例</a>

href 去往的路径（连接的文档），必写属性。
target=” _self” 关闭自身串口，打开新窗口
target=”_blank” 自身窗口不关闭，打开新窗口
title 提示文本，是非必须的
ctrl+shift+s: 另存为把文件复制并另存为

超链接优化： <base target=”_blank”>

锚点：
- 第一步：给标签加id
- 第二部：herf写上#+id名 <a href="#xd">回到顶部</a>
压缩包：<a href="压缩包.rar">压缩文件下载</a>
- 空连接：<a href="#">此处有连接</a>

特殊字符：段落标签的写法

列表标签

无序列表
- square 实心方块
- dick 默认实心小圆圈
- circle 空心小圆圈

注意：ul标签里面只能放li标签，li里面可以放任何标签

有序列表

1	<ol>
2	  <li>打开冰箱门</li>
3	  <li>把大象装在冰箱里</li>
4	  <li>关上冰箱门</li>
5	</ol>
6	<ol type="A"></ol>
7	<ol type="1" start="4"></ol>

type 的取值可以是1，a，A，i，I

start 是开始的序号

自定义列表

1	<dl>
2	  <dt>北京</dt>  <!--小标题-->
3	  <dd>昌平区</dd>  <!—标题的解释-->
4	</dl>

其他标签

音乐标签 embed 背景音乐 <embed src="BIGBANG - BAD BOY (Live).mp3" hidden="false" />
- hidden = “ture” 影藏，默认是false，播放器
滚动标签 <marquee behavior="scroll" direction="right" width="500px" height="100px" bgcolor="blue">我来也</marquee>