day01
什么是HTML 和CSS?
HTML的全称 Hyper Text Markup Language(超文本标记语言)
它不是一种编程语言,而是一种标记语言,用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接、甚至音乐、视频、程序等非文字元素。HTML也是一种规范,一种标准,它通过标记要显示的页面中的各个部分。网页文件本身就是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写错误的标记将不指出其错误,且不停解释其执行过程,编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与htm作为HTML文件的后缀名(扩展名)
HTML的版本历程
1、HTML1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布
2、HTML2.0:1995年11月作为RFC1866发布,于2000年6月发布之后被宣布已经过时
3、HTML3.2:1997年1月14日,W3C推荐标准。
4、HTML4.0:1997年12月18日,W3C推荐标准。
5、HTML4.01:(微小改进)1999年12月24日,W3C推荐标准。
6、HTML5:2014年10月,HTML5是公认的下一代web语言,极大地提升了web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。IE8以前的版本不支持。
HTML特点:
1、简易性
2、可扩展性
3、平台无关性
4、通用性
CSS(Cascading style Sheets)层叠样式表
是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户。
HTML和CSS之间的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等
2.CSS样式是表现。就像是网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片边框等。所有这些用来改变内容外观的东西称之为表现。
结构、表现、行为
结构:HTML,用于描述页面的结构
表现:CSS 用于控制页面中元素/标签的样式,、
行为:JavaScript JS用于响应用户操作
开发工具
这里我们用的是vscode
VScode 特点:丰富的插件支持,可进行git管理
展示HTML文件使用到的浏览器推荐使用Google Chrome(谷歌浏览器),FireFox(火狐浏览器)等等主流浏览器
VSCode插件
打开VSCode新建文件.html的文件
HTML:5自动生成基本的HTML5结构
<!DOCTYPE html>
文档头信息,HTML5标准网页声明,不加这一行,就表示页面采用浏览器本身的解析标准,这样会造成页面在不同的浏览器(IE 火狐等)可能出现不同的显示效果。
<html lang="en">
<html>是根标签,一个页面中只能有一个根标签,页面中所有的内容都应该写在html根标签中。
属性lang是单词language的缩写,意为语言,“en”代表英语,“zh-CN”代表中文
<html>标签只有两个子标签 head:浏览器设置 body:可视区展示
head标签,该标签的内容不会在网页中直接显示,它用来帮助浏览器解析页面的
meta标签,用来设置网页的一些元数据,比如网页的字符集,关键字,简介
meta是一个自结束标签
<meta charset="utf-8">
utf-8为字符编码,字符编码,浏览器会根据字符编码进行解析
常见的字符编码有:gb2312/gbk/unicode/utf-8
<meta name="viewport" content="width=device-width,initial-scala=1.0">
viewport设备的屏幕
width=device-width width属性控制设备的宽度。假设你的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为device-width可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页加载时,以1:1的比例呈现,不会有任何的缩放。
<body>标签显示文档内部区域
标签分为单标签和双标签或者说是单元素和双元素
属性
绝大多数标签使用到的属性:id title style class
id:唯一标识一个标签
class:标识一类元素/标签
style:内联样式 书写CSS样式
title:鼠标悬浮到标签时作提示说明
字符实体
空格:
无论在标签内部上写了多少个空格,浏览器只会解析成一个,若想在网页中出现多个空格,则需要字符实体去完成 想要多少个空格就在标签内部写多少个
左箭头<:< 右箭头>: >
如果直接在标签内部写< >会被浏览器解析成一个标签,所以如果需要在网页中出现左右箭头,则也需要字符实体去完成
块级元素
块级元素的特点:
1.独占一行,不与其他元素共享一行
2。宽度默认100%
3.高度默认由内容撑起
4.根据CSS设置样式
行内元素
行内元素的特点;
1.宽高度由内容自身决定
2.行内元素与其他元素共享一行
3.无法根据CSS设置宽高
4.行内元素不建议嵌套块级元素
img标签
相对路径:在当前文件夹中寻找文件地址
绝对路径:在电脑磁盘中寻找文件地址
除此之外,还可以在src中填写在线地址,加载网络图片,优点是不占用文件空间,缺点是在没有网络的情况下无法加载图片。
img标签可以设置宽高
alt:图片加载失败的文字说明
音视频
video标签
属性:
1.src指向视频地址
2.controls 控制进度条
3.autoplay自动播放
4.musted静音播放
5.loop循环播放
6.poster视频封面
audio音频标签
属性与视频标签同理(懒.....)
超链接标签a标签
a标签控制页面与页面之间的跳转
属性:
href链接到其他页面
target控制跳转方式 _blank在新窗口打开 _self在当前窗口打开
可以使用img标签 以图片的形式打开链接
a标签还可以作为锚点 #+id
<a href="#">回到顶部</a>
<a href="#center">回到中间</a>
<a href="../XXXX.html#XXX>跳转到其他页面某个标签</a>
列表标签
1.无序列表(unordered list)
2.有序列表(ordered list)
3.定义列表(definition list)
无序列表
ul
块级元素 配合li标签使用
<ul>
<li></li>
</ul>
li (list item)
无序列表样式:
disc 实心圆 默认值
circle 空心圆
square 实心方块
无序列表应用场景
1.新闻列表
2.商品列表
3.导航条
有序列表
ol
块级元素
<ol type="i">
<li></li>
</ol>
有序列表的作用:
给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后顺序
其他用法跟ul差不多,也就是应用场景/注意点都和ul差不多
有序列表样式
1:默认值。数字有序列表(1,2,3,4)
a: 按字母顺序排列的有序列表,小写(a,b,c,d)
A:按字母顺序排列的有序列表,大写(A,B,C,D)
i:罗马数字 ,小写(i,ii,iii,iv)
I:罗马数字,大写(I,II,III,IV)
定义列表
dl
<dl>
<dt>XXXXX</dt>
<dd>XXXX</dd>
</dl>
应用场景:
网站尾部的相关信息
图文混排