HTML5+CSS3基础学习day1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

HTML5+CSS3基础学习day1

网页分为三部分
（1）结构:HTML
（2）表现:CSS（控制样式）
（3）行为:JavaScript（响应用户操作）

---

一、安装Virtural studio Code

再编写一个简单的网页测试是否正常运行

二、基础知识

1.实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格。
在HTML中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于号

如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）
实体的语法：&实体的名字;
例如：  （空格）
>（大于号）
< （小于号）

2.meta标签

<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
<meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

meta主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容

title标签的内容会作为搜索结果的超链接上的文字显示

代码如下：

 <title>这是一个网页</title> 

效果如下

3.语义化标签

（1）

<h1>一级标题</h1>

标题标签：（块元素）
h1 ~ h6 一共有六级标题，重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1（所以写标题一般从h2开始写）
（2）
p段落标签（块元素）
p元素中不能放任何的块元素

4.列表

无序列表（最常用）：

<ul>
      <li>结构</li>
</ul>

有序列表：

<ol>
      <li>结构</li>
</ol>

定义列表：（dt来表示定义的内容，dd来对内容进行解释说明）

<dl>
      <dt>结构</dt>
      <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

5.超链接

<a href="https://www.baidu.com">名称</a>

href 指定跳转的目标路径

超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素

可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生

href可以直接设置为#，这时直接回到顶部

target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接

<a href="https://www.baidu.com" target="_blank">名称</a>

6.图片标签

<img width="200"  src="路径" alt="名称">

注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）

    图片的格式：
        jpeg(jpg)
            - 支持的颜色比较丰富，不支持透明效果，不支持动图
            - 一般用来显示照片
        gif
            - 支持的颜色比较少，支持简单透明，支持动图
            - 颜色单一的图片，动图
        png
            - 支持的颜色丰富，支持复杂透明，不支持动图
            - 颜色丰富，复杂透明图片（专为网页而生）
        webp
            - 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
            - 它具备其他图片格式的所有优点，而且文件还特别的小
            - 缺点：兼容性不好

        base64 
            - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片    
            - 一般都是一些需要和网页一起加载的图片才会使用base64

        效果一样，用小的
        效果不一样，用效果好的

7.内联框架

<iframe src="https://www.bilibili.com/" width="800" height="600" frameborder="0"></iframe>

frameborder：0无边框 1有边框

8.音视频

 <audio src="./source/audio.mp3" controls autoplay loop></audio>

controls 允许用户控制播放
autoplay 自动播放
loop 循环播放

总结

学习了网页的基本结构与基础知识，
学习如何创建一个基础网页，
学习了部分标签的格式与用法及其注意事项。