一、 认识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>
特殊字符 (防止与标签冲突,可以用特殊字符)
空格:
大于:>
小于:<
其他的特殊字符现用现查。