HTML页面制作基础

一、Web前端标准

web前端技术指的不是某一项技术，而是一系列技术的集合，主要包括：

1. html结构标准：负责网页结构的搭建
2. css样式标准：负责网页的美化工作
3. js行为标准：负责网页的行为动作

二、行业词条

1. Internet：互联网
2. WWW：万维网（World Wide Web），资料空间，简称WWW或3W
3. URL：统一资源定位器（即网络地址）
4. HTTP：超文本传输协议（网络协议）
5. W3C：万维网联盟（是一个组织而不是一个公司）
6. 网站：多个页面的集合（首页、内容页、列表页）
7. 网页：网页文件就是后缀名以.html或者.htm结尾的文件。文字、图片、超链接。
8. 浏览器：观看网页最终效果的平台。

三、五大浏览器厂商

1. IE
2. 谷歌
3. 火狐
4. 苹果
5. 欧朋
   注意：其他浏览器都是用的五大浏览器中的某几个浏览器的技术，自己换了一套皮肤而已。

四、html

1.定义

超文本标记语言

2.第一个html页面（推荐编码工具HBuilder）

1. 描述当前文件的版本信息，如果没有详细说明4.0还是x1.0，那就是5版本。
2. html文件
3. 网页的头部
4. UTF-8是国际编码的意思，如果不写，或者写成其他都会出现问题
5. < title > 此处内容是网页的标题< /title >
6. < 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值