目录
一、Web前端三大标准
三大核心技术
- html -- 结构标准：负责网页结构的搭建
- css -- 样式标准/表现标准：负责网页的美化工作
- js -- 行为标准：负责网页的行为动作
二、web相关名词介绍
1、web 就是world wide web的简称，称为全球广域网，也为万维网
2、web是一种基于HTTP协议的，全球性的，动态的跨平台分布式图形信息系统，最常见的网站服务，HTTP协议——在输入网址的时候，默认添加的一段代码，这个代码是超文本传输协议
3、由多个网页（图片、文字、链接...）组成一个网站。如淘宝网
4、网页就是通过浏览器展示包含图片、文字、链接、声音...等内容的一种HTML文件
5、网页在浏览器上运行（解析和展示），解析：把代码转化为图片，文字显示
三、什么是浏览器？
五大浏览器厂商：
- ie
- 谷歌
- 火狐
- 苹果
- 欧朋
注意：除了这5个浏览器之外都没有自己的技术，都是使用ie或谷歌技术，只是更改一套皮肤
关于测试细节：作为测试人员，必须测试ie、谷歌、火狐。原因：欧朋占有率低，苹果和谷歌最终展示效果相似，除非用户要求。
四、hml发展
4.1 html 基本定义
html - 超文本标记语言，标记就是<>,，html可以传输除了纯文字之外的图片、声音、视频等内容。
html现阶段使用版本：html5.0和xhtml1.0
W3C组织指定Html语言的标准。
五、Html——第一个网页
软件：hbuilder
1.打开hbuilder，文件->新建->项目
2.代码解析
第一行代码代表：当前html文本的版本信息，如果没有详细的指定，就代表html5.0
head中写的内容是网页的头部信息
meta中写的是网页的编码集（必须是utf-8）
title中写的是网页标题的内容
body中写的是网页的主体内容
3.在title标签的中间，在标签的中间输入内容输入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hello! 噗噗bug</title>
</head>
<body>
hello! welcome to my html
</body>
</html>
4.运行
六、html标签与语法
6.1
标签、标记、元素都可以表示尖括号这种语法
html作为一门语言，需要遵循一定规则才能正确的使用——html语法
使用标签书写网页时必须遵循这些语法
6.2 标签写法：
1、html标签被人为定义为 单标签 和双标签
2.单标签： < 单标签名称/>
3.双标签：< 双标签名称>< /双标签名称>
4.必须严格遵守语法要求，单标签通过/ 关闭，双标签通过/ 标签名关闭
- 标签可以嵌套使用，但不能出现交叉嵌套现象
6.3 html的回车和空格
在html语法中，如果想实现回车和空格效果必须使用代码才能实现
6.3.1 空格
语法：
手动输多个空格，浏览器只会显示一个空格的效果
技巧：3个 相当于一个汉字的距离，对于字母间距怎么处理？
--css是处理美化，来实现间距信息的，来具体实现多大的间距。 是不稳定的
6.3.2 回车换行效果
语法：
<br />在html手动输入换行在浏览器上是没有效果的
注意： 在html中，可以实现一点点的样式效果，但是在实际工作中，程序员一定使用css来实现样式的效果
七、标签
7.1 标题标签——文章标题
被标题标签包裹的文字，会被当做独占一行的标题来使用，文字会变粗、变大；
h标签的家族中只有1到6，特点是依次缩小（不要臆造标签，没有标题7）
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是普通文字
<h1>我是标题一，一级</h1>
<h2>标题二，二级</h2>
<h3>标题三，三级</h3>
<h4>标题四，四级</h4>
<h5>标题五，五级</h5>
<h6>标题六，六级</h6>
<h7>？？自己造，？</h7>
</body>
</html>
7.2 段落标签
和标题不同的地方大于HTML中定义的六个标题，段落只有一个标签，标签名是p，
<p>段落内容</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
普通文字
<p>我是一篇文章</p>
</body>
</html>
在html里面，如果想表达语气，即语义化，只能用合适标签把其标出来，再合适地方用合适标签。
7.3 文字标签
在书写网页时关于文字外在样式一般通过CSS来进行设置
弱语义：
<b>文字加粗</b>
<s>删除线</s>
<i>倾斜</i><u>下划线</u>
强语义：
<strong>文字加粗</strong>
<del>删除线</del>
<em>倾斜文字</em>
强语义比弱语义更带有强调操作
删除线：
<s>删除线</s> （不常用了）
<del>删除线</del>
以上两个都可以实现删除线效果，但前者已经逐渐被后者替代
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
普通文字
<p>我是一篇文章</p>
<b>文字加粗</b>
<s>删除线</s>
<i>倾斜</i>
<u>hhhhh</u>
<p>我是一篇文章</p>
<strong>文字加粗</strong>
<del>删除线</del>
<em>倾斜文字</em>
</body>
</html>
7.4 常用的布局标签
span和div都没有语义！就是放数据的容器，
span代表小盒子，只要一行放得下，就可以存放多个。
div代表大盒子，一行只允许存在一个。
<span>我是span， 称为小盒子</span>
<div>我是div，称为大盒子</div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>我是span，称为小盒子</span>
<span>我是span，称为小盒子</span>
<span>我是span，称为小盒子</span>
<span>我是span，称为小盒子</span>
<span>我是span，称为小盒子</span>
<div>我是div，称为大盒子</div>
<div>我是div，称为大盒子</div>
<div>我是div，称为大盒子</div>
<div>我是div，称为大盒子</div>
</body>
</html>
注意：span和div都是没有语义的，为了后期css要给部分语句上色或其他操作时，更好的找到
八 标签语义化
在合适的地方使用合理的标签，符合标签语义化的网站，搜索引擎更喜欢（网站的排名更靠前）
搜索引擎——在茫茫中搜索出想要的东西，搜索网站的网站，如谷歌、百度
www.w3school.com.cn——w3c联盟组织的一些语法规则可以从这里查询到
九 图片标签
9.1 图片标签的基本定义
图片要放在代码的文件夹下
img图片标签：<img src="图片的名字"/ >
解释：图片标签属于单标签，src是设置图片资源的（要显示哪一张图片），默认薯片的大小
属性名 = “属性值”——管这种属性名和属性值的组合叫“键值对”也叫“KV对”
width=“宽度值”
height=“高度值”
title = “鼠标悬停后的提示文字”——不是所有图片都加，什么时候需要添加这种情况？用户或产品经理。一般用在小按钮小图片上，
alt = "1.图片没有加载出来时的提示文字2.网页阅读器可以读取此处文字给视障用户听，增加用户体验" —— 只要用户那里或产品经理有要求才加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="log.png" >
</body>
</html> 
设置图片大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="log.png" width="100" height="100" >
<img src="Y.jpg" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="log.png" width="100" height="100" title="图片保存" alt="我是文字" >
<img src="Y.jpg" >
</body>
</html>
title鼠标悬停
alt意思：当图片没有正常加载出来的时候的文字提醒。以及用户体验，
9.2 图标标签常见属性
<img src=" 路径" width="宽度" height="高度" title="图片标题" alt="图片提示文字" > 注:
●src 用来指定当前想要引入的图片位置，这个属性值我们也称之为路径
●tite 属性用来定义图片的标题，它里面的内容会在鼠标悬停到图片上方时显示
●alt属性定义图片的提示文字，当图片由于某些原因无法正常加载显示的时候，就会显示alt里的文字
电width用来定义图片的宽度，只需要定义数值大小，默认单位是px
。height用来定义图片的高度，规则和width-一样
●对于图片来说，如果只设置width或者高度中的某一个值。 那么另外的一边就会按着原图宽高比自动缩放
十、路径
10.1路径基本介绍
定义：在代码中可以将路径看做是查找某个资料所“走过”的路（一段定位地址）
路径分类：
绝对路径：
<p style = "text-indent:2em">-般是以盘符为起点来直找某个资源， 或者是一个绝对的网络资源地址，但是不推荐使用，假如以盘符为起点查找。我们不能保证用户电脑的盘符关系与我们的电脑保持一致，如果是绝对的网络地址我们则不能保证该资源永远存且不发生变化</p>
把文件在电脑中的所有路径地址拿过来的一种书写方式，这种写法绝对不会出现在前端代码中。
相对路径：
<p style = "txtindent:2em">相对路径我们往往以当前代码所在文件为起点去查找某个资源</p>
注意：最好不要用绝对路径 ，可能无法运行
10.2 相对路径分类及使用.
相对路径分为：同级路径、下级路径、上级路径
同级路径: HTML文件与被查找的图片存放在同一级目录下，二者是“兄弟"关系，此时我们只需要在src中写入图片名称即可。以当前文件为基准去找别的文件
下级路径：以当前文件为基准点击文件夹后去找文件
<img src="G:\学习\job\code\htmlone\Y.jpg" >
<img src="hehe\Y.jpg" >
上级路径：以当前文件为基准，返回上一级目录去找文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../Y.jpg" >
</body>
</html>
用Hbulid不能直接打开，直接打开.html文档可以。
注意：以上三条均叫相对路径
扫一扫
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
