文章目录
一、Web前端标准
web前端技术指的不是某一项技术,而是一系列技术的集合,主要包括:
- html结构标准:负责网页结构的搭建
- css样式标准:负责网页的美化工作
- js行为标准:负责网页的行为动作
二、行业词条
- Internet:互联网
- WWW:万维网(World Wide Web),资料空间,简称WWW或3W
- URL:统一资源定位器(即网络地址)
- HTTP:超文本传输协议(网络协议)
- W3C:万维网联盟(是一个组织而不是一个公司)
- 网站:多个页面的集合(首页、内容页、列表页)
- 网页:网页文件就是后缀名以.html或者.htm结尾的文件。文字、图片、超链接。
- 浏览器:观看网页最终效果的平台。
三、五大浏览器厂商
- IE
- 谷歌
- 火狐
- 苹果
- 欧朋
注意:其他浏览器都是用的五大浏览器中的某几个浏览器的技术,自己换了一套皮肤而已。
四、html
1.定义
超文本标记语言
2.第一个html页面(推荐编码工具HBuilder)
- 描述当前文件的版本信息,如果没有详细说明4.0还是x1.0,那就是5版本。
- html文件
- 网页的头部
- UTF-8是国际编码的意思,如果不写,或者写成其他都会出现问题
- < title > 此处内容是网页的标题< /title >
- < body>我们自己写的所有代码都放在这里< /body>
注意:html文档不能正常识别空格和回车,只能使用特定代码来实现;标签、标记、节点、元素都是尖括号。
五、标签语义化
在合适的地方使用合适的标签;
为什么要标签语义化?因为浏览器只认识标签,没有语音语调,所以想表达的东西只能使用对应的标签来表示。
标签语义化的好处:语义化做得好,可以让搜索引擎把你的网站排名更靠前。
六、h和p标签
h有六个,h1-h6依次变小,代表文章标题
p代表文章段落
七、bui等标签
- b代表加粗
- strong也代表加粗,多了强调的语义
- u代表下划线
- i代表倾斜
- em也代表倾斜,多了强调语义
- s代表删除线
- del也代表删除线,建议使用del代替s
- <br / >单标签代表一个换行回车
注意:strong代表特别强调,一篇文章中不要出现多次,一到两次即可;em代表一般强调,一篇文章中可出现多次。
八、img标签详解
img是一个单标签
<img src="图片名称" width="宽度" height="高度" alt="1.图片未加载的提示文字;
2.网页阅读器可以读取这里的文字" title="鼠标悬停时候的提示文字"/ >
注意:1.属性名=“属性值” 属性名=“属性值” 空格不能丢,符号都要使用英文状态下,属性设置不分先后;2.宽高设置其中一个,另外一个就等比例缩放。
九、相对路径和绝对路径
1.相对路径
定义:从自身出发去寻找文件
三种情况:
- 同级查找直接写文件名字
- 下级查找,写文件夹名字加/ 例:img/01.jpg
- 3.上级查找,加一个特殊的符号…/01.jpg
注意:相对路径不能跨越盘符(c、d、e)
2.绝对路径
定义:目录下的绝对位置,直接到的目标位置
十、超链接
<a href="地址">文字</a>
注意:如果要跳转到线上地址,必须加http://,本地文件直接写路径
空链接写法:1、### 2、javascript:; 3、javascript:void(0);这三种都可以
锚点链接:点击之后可以跳转到页面的对应位置;给想跳转到的位置写一个id属性,a标签中的href属性写#id值