01网页制作注意事项
网页制作思路:从上到下,先整体在局部,逐步分析制作
分析内容-> 写代码->保存->刷新浏览器,看效果
03网页的相关概念
网页
什么是网页
网页是网站中的一页,通常是HTML格式的文件,要通过浏览器来阅读。
网页时构成网站的基本元素
图片、文字、声音、视频是网页的元素
什么是HTML
超文本标记语言,不是编程语言
超文本标记语言!!!
标记语言是一套标记标签
1.超越了文本限制
2.超级链接标签
网页的形成
网页总结
网页是图片、链接、文字、声音、视频等元素组成,其实是一个HTML文件
网页生成制作:有前端人员书写HTML文件,然后浏览器打开,就能看到网页
HTML:超文本标记语言,用来制作网页的一门语言,有标签组成的,比如图片标签,链接标签,视频标签等…
04常用浏览器以及内核
常用浏览器
火狐、谷歌、IE…
查看浏览器市场份额:http://tongji.baidu.com/data/browser
浏览器内核
负责读取网页内容,整理讯息,计算网页的显示方式并显示页面
web标准
web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
为什么需要web标准
浏览器不同,显示页面或者排版就有些差异
web标准构成
结构、表现、行为
标准 | 说明 |
---|---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS |
行为 | 行为是指网页模型的定义及交互的编写,现阶段主要学的是JavaScript |
Web标准提出的最佳体验方案:结构、样式、行为相分离
简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中
结构最重要!!!
06HTML标签导读
- 能够说出标签的书写注意规范
- 能够写出HTML骨架标签
- 能够写出超链接标签
- 能够写出图片标签并说出alt和titile的区别
- 能够说出相对路径的三种形式
HTML语法规范
基本语法概述
1.HTML标签是由尖括号包围的关键词,例如<html>
2.HTML标签通常是成对出现的,例如<html>
和</html>
,我们称为双标签。标签对中的第一个标签是开始标签,第二个是结束标签。
3.有些特殊的标签必须是单个标签(极少情况),例如<br/>
,我们称为单标签。
标签关系
包含关系和并列关系
HTML基本结构标签
第一个HTML网页
每个网页都会后一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写
HTML页面也称为HTML文档
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 页面中最大的标签,我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面基本内容基本都是放在body里面的 |
基本结构标签总结
开发工具
vscode快捷键:
- CTRL+N:新建文件
- CTRL+加号:视图放大
- CTRL +减号:视图缩小
- 生成页面骨架结构:!
- 快速复制一行:shift+alt+下箭头/上箭头
- 选定多个相同的单词:CTRL+d
- 添加多个光标:ctrl+alt+上箭头/下箭头
- 全局替换某个单词:CTRL+H
- 快速定位到某一行:CTRL+g
- 选择某个区块:shift+alt
- 注释:CTRL+/
vscode常用插件:
1.Chinese(Simplified)汉化
2.Auto RenameTag
3.One Dark Pro 设置颜色主题
4.Open in browser 浏览器预览页面
5.Live Server 实时预览
6.easy less 自动把less文件转换成css文件
7.会了吧
vscode工具生成骨架标签新增代码
1.<!DOCTYPE>
标签
文档类型声明标签:告诉浏览器使用哪种HTML版本来显示网页
声明位于文档最前面的位置,处于<html>
标签之前
不是HTML标签,就是文档类型声明标签
2.lang语言
当前文档显示语言
- en定义语言为英语
- zh-CN定义语言为中文
3.charset字符集
字符集是多个字符的集合,以便计算机能够识别和存储各种文字。
在<head>
标签中,可以通过<meta>
标签的charset属性来规定HTML文档应该使用哪种字符编码
常用的值有:GB2312、BIG5、GBK、UTF-8(也被称为万国码,基本包含全世界所有国家需要用到的字符)
HTML常用标签
标签语义:标签的含义
标题标签
<h1>-<h6>
标签语义:作为标题使用,并且依据重要性递减
特点:
1.加了标题的文字会变得加粗,字号也会依次变大
2.一个标题独占一行
段落和换行标签(重要)
<p>我是一个段落标签</p>
标签语义:可以把HTML文档分割为若干段落
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行
2.段落和段落之间保有空隙
<br />
换行标签
标签语义:强制换行
特点:
1.<br />
是个单标签
2.<br/>
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距
水平线标签
<hr>
标签:分割不同内容的水平线
语义:主题的分割转换
特点:
- 单标签
- 在页面中显示一条水平线
文本格式化标签
为文字设置粗体,斜体,下划线等效果
标签语义:突出重要性,比普通文字更重要
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong> 标签加粗 语义更加强烈 |
倾斜 | <em></em>或者<i><.i> | 更推荐使用<em> 标签 语义更加强烈 |
删除线 | <del></del>或者<s></s> | 更推荐使用<del> 标签 语义更加强烈 |
下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins> 标签 语义更加强烈 |
重点加粗倾斜
<div>
和<span>
标签
<div>和<span>
是没有语义的,他们就是一个盒子,用来装内容。
<div>这是头部</div>
<span>今日价格</span>
特点
1.<div>
标签用来布局,但是现在一行只能放一个<div>
。大盒子
2.<span>
标签用来布局,一行上可以多个<span>
。小盒子
图像标签和路径(重点)
1.图像标签
在HTML标签中,<img>
标签用于定义HTML页面中的图像。
<img src="图像URL"/>
image “图像”
- src是
<img>
标签的必须属性,它用于指定图像文件的路径和文件名
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
2.路径
- 目录文件夹:普通文件夹,只不过里面存放了我们做页面所需要的相关素材,比如HTML文件、图片等
- 根目录:打开目录文件夹的第一层就是根目录
1.相对路径
以引用文件所在位置为参考基础,而建立出的目录路径
简单说,图片相对于HTML页面的位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif"> | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="image/baidu.gif"> |
上一级路径 | …/ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif"> |
2.绝对路径
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
可移植性不好,通常不推荐。
音频标签
<audio src=" "><audio/>
在页面中插入音频
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意:
- 目前支持三种格式:MP3、Mav、Ogg(flac也可以)
视频标签
<video src="./video.mp4"></video>
在网页中插入视频
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需要配合muted实现静音播放,否则不让自动播放) |
loop | 循环播放 |
- 目前支持三种格式:MP4,WebM,Ogg
超链接标签(重点)
在HTML标签中,<a>
标签用于定义超链接,作用是从一个页面链接到另一个页面。
1.超链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 <a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,他就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值(当前窗口打开页面),_blank(新窗口中打开页面) |
2.链接分类
1.外部链接 <a href="http://www.baidu.com">百度</a>
2.内部链接:网站内部页面之间的相互链接
3.空链接 #