第一天
HTML:超文本标记语言(Hyper Text Markup Language)
1.常用浏览器及内核:
IE——Trident
FireFox—— Gecko
Safari ——Webkit
Chrome / Opera ——Blink(Blink 其实是 Webkit 的分支)
其中谷歌Chrome浏览器是开发中必备的浏览器
2.Web标准的构成
结构——HTML——元素的结构和内容(最重要)
表现——CSS——元素的外观和位置
行为——JavaScript——交互
3.HTML的基本结构标签
<html>——根标签
<head>——头部
<title> 页面标题显示的文字</title>——页面标题
</head>
<body>页面主体内容</body>——身体
</html>
4.VSCode的基本骨架
英文状态下的 !+回车/ !+Tab时 自动生成骨架标签
其中:
1.<!DOCTYPE html> 是声明标签 表示当前文档是HTML5
2.<html lang=" "> 用来定义当前文档显示的语言 包括英文:en 中文:zh-CN
3.charset="UTF-8" 表示字符集用万国码
5.HTML的基本标签
1.标题标签
<h1>标题内容</h1>~<h6>标题内容</h6>(标题独占一行 )
重要性依次递减 字号依次递减
2.段落标签
<p>段落内容</p>
特点:
是双标签,段落内容包含在开始标签和结束标签之间;
文本在一个段落中会根据浏览器窗口的大小自动换行;
段落和段落之间有一定的空隙。
3.换行标签
<br>(单标签)
特点:
是个单标签;
换行后只是另起一行,不像 p 标签会有明显的间距。
注意:浏览器在显示页面时,会把 HTML 文件中多个空格或换行合并成一个空格显示。如果想显示多个空格 需要用到 ;空格标签(后面会提到)
4.本文格式化标签
其中strong 、 em 、 del 、 ins 语义更清晰、更强烈。更加推荐使用。
5.div和span标签
div 和 span 没有语义,是用来布局的盒子
其中div是大盒子,一行只能有一个
span是小盒子,一行可以放多个
6.图片标签
<img src=" ">
书写规范:<标签名 属性名1=“属性值1” 属性名2=“属性值2”>
注意:1.属性之间要用空格键隔开
2.宽和高不需要同时指定,指定一个图片会自动等比例缩放
7.链接标签
<a href="跳转目标" target="窗口打开方式">文本或图像</a>
作用:从一个页面链接跳转到另一个页面或者页面的其他位置。
其中:
href :目标位置
target :窗口打开方式:
1. _self (默认)在当前窗口打开
2._blank 在新窗口中打开 链接标签的 href 属性重要,指定链接跳转的目标位置。
1.外部链接,跳转到其他网站,跳出当前网站;
参考代码:<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
2.内部链接,网站内部页面之间的相互链接,可以使用相对路径。
参考代码: <a href="./09-相对路径.html">点我啊</a>
3.空链接,开发过程中,还不能确定链接目标时可以暂时使用空链接。
参考代码:<a href="#">我是空链接</a>
注意:空链接会重新刷新页面。
4.下载链接,如果 href 的地址是一个浏览器默认不支持的文件类型,就会下载。(多数都是压缩包 文件的下载)
参考代码:<a href="123.zip">我是下载链接</a>
5.锚点链接
作用:锚点链接可以实现页面内跳转。
语法:href=#id
参考代码:<a href="#01">第1集</a>
<h3 id="01">第1集</h3>
8.注释标签和特殊字符
注释标签的快捷键:ctrl + /
(注释是给程序员看的,可以帮助程序员阅读和理解代码,注释不会显示在页面中)
特殊字符:
1.空格 : no break space
2.大于号 > : greater than
3.小于号 < : less than
6.目录文件夹及根目录
目录文件夹:就是普通文件夹,可以保存多个文件和其他文件夹;
网站根目录:一个网站项目的第一层文件夹,保存所有网站需要的网页和素材。
7.相对路径与绝对路径
相对路径:以文件所在位置为参考基础建立的目录路径。
分为同级 上一级 与 下一级三种
其中同级的参考代码如下:
<img src="./img.jpg" alt="" width="200" />
下一级的参考代码如下:
<img src="./images/img.jpg" alt="" width="200" />
上一级的参考代码如下:
<img src="../images/img.jpg">
如果多次上级文件夹重叠 只需要多次属于…/即可,列如:
<img src="../../../image1/image2/image3/a.jpg">
注意:以./开始 利用提示寻找路径 更加快捷准确
绝对路径;文件或文件夹的绝对位置,能够直接定位。(几乎不使用)
使用图片代码时<img src="图片在网页中的绝对地址">
可以使用图片在网站中的绝对地址,但需要联网 。