一、 认识web
1、网页是有哪些部分：由 图片，文字，链接等
2、网页是怎么形成的： 写了代码code-》浏览器渲染-》客户看到。
3.目前用的最多的浏览器
ie、火狐、谷歌、欧朋浏览器，safi浏览器。
浏览器内核
ie -》trident
火狐-》geoko
safari-》webkit
谷歌-》chromium/bink(是webkit的分支）
opera->blink
移动端浏览器
安卓 webkit内核
ios webkit内核
winphone 内核 trident。
web标准。
1.web标准三层组成。
w3c组织 万维网。
web标准的3层
结构：对网页元素整理和分类我们一般是说html
表现：设置网页元素的版式、颜色、大小等外观样式 主要是css
行为：网页模型的定义和交互的编写 javascript。
比如说人：
结构：天然的身体。html
表现：衣服。css
行为：走路、跑路。js
三、html的概念
是：超文本（超越了文本的限制。）标记语言。标签语言。后缀名是.html
html标签:尖括号<
图像标签：<img src='图片地址'/>
四.html骨架标签：
<html>根标签</html>
<head></head> 文档头部
<title></title>文档标题
<body></body>文档的主体，网页所有的内容都在body中。
写代码时，标签名统一小写。
五、html元素的分类：
1常规元素（双标签):
<标签名>内容</标签名> <div>嘻嘻嘻内容</div><body>内容</body>
2.空元素（单标签）
<标签名 /> <img src="a.jpg" /> /关闭符。<br />
六、标签关系（针对双标签来说的）
1嵌套关系 (父子关系）
<head>
<title>嵌套关系</title>
</head>
2并列关系。兄弟关系
<head></head>
<body></body>
并列关系上下对齐，嵌套关系子标签最好缩进一个tab键的位置。
七.代码开发工具
sublieme
sublieme的使用。（具体网上有资料，这里不做记录了）
八 模板
<!DOCTYPE html> 文档的类型（写在html之前，告诉浏览器 我们是按html5的标准）
<html lang="en"> 页面语言,英文，<html lang="zh-cmn-Hans"> //简体中文
<head>
<title></title>
<meta charset='utf-8'/>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 文档的类型（写在html之前，告诉浏览器 我们是按html5的标准）
<html lang="en"> 页面语言,英文，<html lang="zh-cmn-Hans"> //简体中文
<head>
<meta charset='utf-8'/> 字符集 GB2312 简体中文（在中国没问题）。BIg5 繁体中文。gbk（中文+繁体），utf-8（中文+英文+其他语言）
<title>模板2</title>
</head>
<body>
您好吗
</body>
</html>
九 标签的语义化（标签的含义）
对搜索引擎比较好。
在合理的地方放合理的标签。
十.标签
排版标签
1.标题标签1-6：<h1><h2>.....<h6>,文字有加粗加大效果。一行只能放一个标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落<p>段落</p>
3.水平线标签<hr/>
换行标签 强制换行。
<br/>单标签
div和span标签：(没有语义）就是装元素的一个盒子。
<div></div> 一行一个
<span></span>一行可以放很多span。
文本格式化标签 给文字加特殊效果的。
<b>加粗标签</b>
<strong>加粗</strong>（推荐使用）
<i>倾斜</i>
<em>倾斜</em>（推荐使用）
<s>删除线</s>
<del>删除线</del>
<u>下划线</u>
<ins>下划线</ins>
标签属性 （外在特性）
<div 属性="属性值"></div>
图片标签 单标签。
<img src="图片路径" alt="图片注释" />
图片标签01：
<img src="图片路径" alt="图片注释替换文本" />
案例：<img src="favicon.ico" alt="ico图标"> 无图片时，文字显示。
<h4>替换文本</h4> <img src="favicon1.ico" alt="新闻的ico图片"/>
<img src="图片路径" alt="图片注释替换文本" title="提示文本 鼠标放上去显示的文字。 " />
案例：
<h4>鼠标放到图片时显示</h4> <img src="news_logo.png" title="新闻的ico图片"/>
<img src="图片路径" alt="图片注释替换文本" title="提示文本 鼠标放上去显示的文字。 " width="宽度" height="高度“ /> 等比例缩放。
案例：
<h4>图片宽度高度，设置一个即可，等比例缩放的</h4> <img src="favicon.ico" alt="新闻的ico图片" width="200" /> <img src="favicon.ico" alt="新闻的ico图片" height="200" />
<img src="图片路径" alt="图片注释替换文本" title="提示文本 鼠标放上去显示的文字。 " width="宽度" height="高度“ border="10带边框"/> 。
案例：
<h4>图片边框</h4> <img src="favicon.ico" alt="新闻的ico图片" border="2" />
图片标签02：
页面中经常会用到图片标签
标签可以有多个属性。中间用空格隔开。属性=值。key=val。
链接标签：
<a href="http://www.baidu.com">百度</a>
<h4>链接标签外部链接</h4> <a href="http://www.baidu.com">百度</a> <h4>链接标签内部链接</h4> <a href="05.html">内部</a> <h4>链接标签空链接</h4> <a href="#">空链接</a> <h4>链接标签图片链接</h4> <a href="05.html"><img src="favicon.ico"/></a>
链接标签2：
新窗口打开 target="_blank"
<h4>链接标签新窗口打开</h4> <a href="05.html" target="_blank">新窗口打开</a>
注释标签。 快捷键 ctrl+？号
<!--这是一个h1标签-->
<h1>专访</h1>
路径
根目录 /
相对路径
<!--同一级 --> <img src="favicon.ico"/> <!--下一级 --> <img src="./imgs/1.ico"/>
相对路径。从代码所在的文件出发开始寻找文件路径。
<!--上一级 --> <img src="../02/imgs/1.ico"/>
绝对路径 地址是固定的。
<!-- 绝对路径 --> <img src="F:\\www\qianduan\heima\05\imgs\1.ico"/>
总结
认识web-》浏览器-》浏览器内核-》web标准-》html的标签-》开发工具sublime
拓展 锚点定位。想看某个地方，迅速跳转过去。
1 先去找目标。用id名字标注
2 找要点的位置 用井号+id名字：<a href="#tree">
base标签。 对整体链接打开的状态设置。
<base target="_blank"> 新窗口打开
预格式化标签 pre,按照你原来写的样式文字就怎么显示。（用的比较少）
<pre></pre>
特殊字符 （防止与标签冲突，可以用特殊字符)
空格：
大于：>
小于：<
其他的特殊字符现用现查。
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
