2021-11-03 23:02 海南大学 Java

关注

1、HTML简介

HTML5

【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程|初学者从入门到精通

1、课程简介

系统软件
- Windows
- Linux
- macOS
应用软件
- office
- qq

软件的组成

客户端：用户通过客户端来使用软件（服务员）
- 形式
  - 文字客户端：命令行
  - 图形化界面：大部分应用C/S
  - 网页：通过访问网页来使用软件B/S架构
服务器：负责在远程处理业务逻辑（厨师）
- 服务器开发语言：Java、PHP、C#、Node.js...

网页的特点

不需要安装
无需更新
跨平台

使用的语言：HTML、CSS、JavaScript

2、网页简史

蒂姆·伯纳斯-李爵士万维网的发明人

第一个网站

浏览器：只需要一个网址就可以访问任何网站
网页：右键查看源代码

前端工程师负责编写网页的源代码，浏览器负责将网页渲染成我们想要的样子

伯纳斯李1994年建立万维网联盟W3C，为了制订网页开发的标准，同一个页面在不同的浏览器有相同的效果

W3C将网页分成三个组成部分

结构：HTML描述页面的结构，骨架
表现：CSS控制页面中元素的样式，衣服、样式、美化
行为：JavaScript响应用户操作，可以动

3、HTML

Hypertext Markup Language 超文本标记语言

文本：用纯文本编辑器写的，记事本、word

超文本：超过文本

标记：<h1>文本</h1>

4、第一个网页

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>回乡偶书（二首）</h1>
        <h2>其一</h2>
        <h2>贺知章</h2>
        <p>少小离家老大回</p>
        <p>乡音无改鬓毛衰</p>
        <p>儿童相见不相识</p>
        <p>笑问客从何处来</p>
    </body>
</html>

5、notepad++安装

notepad++官网

李立超个人网站

6、自结束标签和注释

<img>
<img />
<inpuut>

注释，不能嵌套使用

<!--注释内容-->

7、标签中的属性

在开始标签或自结束标签中设置属性

名值对的形式：x=y

空格隔开

属性有些有值有些没有，属性值应该用引号引起来（单引号/双引号都可以）

<h1>这是我的<font color="red" size='3'>第三个</font>网页</h1>

8、文档声明

网页的版本

HTML4

XHTML2.0

HTML5...

文档声明用来告诉浏览器当前网页的版本

HTML5的文档声明，大写小写都可以

<!doctype html>
<!Doctype HTML>
<html>
    <head></head>
    <body></body>
</html>

9、进制

十进制（日常使用）
- 特点：满10进1
- 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 12 . . . 19 20
- 单位数字：10个（0-9）
二进制（计算机底层的进制）
- 特点：满2进1
- 计数：0 1 10 11 100 101 110 111
- 单位数字：2个（0-1）

所有的小格子在计算机底层都会以二进制的形式保存

可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或一个0，这一个小格子被称为1位（bit）

8bit = 1type（字节）

1024byte = 1kb（千字节）

1024kb = 1mb（兆字节）

1024mb = 1gb（吉字节）

1024gb = 1tb（特字节）

1024tb = 1pb

八进制（很少用）
- 特点：满8进1
- 计数：0 1 2 3 4 5 6 7 10 11 12 . . . 17 20
- 单位数字：8个（0-7）
十六进制（一般显示一个二进制数字时，都会转换为十六进制）
- 特点：满16进1
- 计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 . . . 1a 1b 1c 1d 1e 1f 20 . . .
- 单位数字：16个（0-f）

10、字符编码

张三 ->1101010（编码）

1101010 -> 张三（解码）

所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外

文字在存储到内存中，都需要转换为二进制编码，当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

编码：将字符转换为二进制码的过程
解码：将二进制码转换为字符的过程
字符集（charset）：编码和解码所采用的规则（密码本）
乱码问题：如果编码和解码所采用的字符集不同就会出现乱码问题
常见的字符集：
- ASCII：美国的 7位总128
- ISO88591：欧洲的 8位 256
- GB2312：国标
- GBK：国标扩展
- UTF-8：万国码，全世界的语言都可以

ASCII和Unicode的区别

在head中使用meta标签设置网页的编码

<head>
    <meta charset="utf-8">
    <title></title>
</head>

11、文档的使用

<!--文档声明，声明当前网页的版本html5-->
<!doctype html>

<!--html的根标签（元素），网页中的所有内容都要写在根元素里边-->
<html>
    <!--head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
    <head>
        <!--meta标签用来设置网页的元数据（DNA），这里meta用来设置网页的字符集，避免乱码-->
        <meta charset="utf-8">
        
        <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
        <title>网页的标题</title>
    </head>
    
    <!--body是html的子元素，表示网页的主体，网页中所有可见内容都应该写在body里-->
    <body>
        <!--h1网页的一级标题-->
        <h1>网页的大标题</h1>
    </body>
</html>

zeal

w3school

12、VSCode安装

不要依赖于工具

下载

安装中文插件

安装主题插件ayu设置主题

修改字体大小：文件-->首选项-->设置

快速生成html主要标签：！+tab建

注释快捷键：Ctrl+/

13、配置liveServer

安装liveServer插件

右键open with liveServer

设置自动保存：文件-->首选项-->设置-->afterDelay

14、实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格

需要在网页中显示的特殊符号使用html中的实体（转义字符）

&nbsp;空格
&gt;大于号
&lt;小于号
&copy;版权符号

15、meta标签

meta标签用于设置网页中的一些元数据，不是给用户看的

charset 指定网页的字符集
name 指定数据的名称
- keywords：网站的关键字
- description：指定网站的描述
content 指定数据的内容

<meta charset="utf8" version='1'/>
<meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

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

<title>document</title>

指定页面重定向到另一个页面，3秒后

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

16、语义化标签

标题标签

重要性依次递减

块元素（block element）：在页面中独占一行

标题标签都是块元素

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

hgroup标签用来为标题分组

<hgroup>
    <h1>西游记</h1>
    <h2>吴承恩</h2>
</hgroup>

p段落标签

标识页面中的一个段落，是一个块元素

<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>

em语音强调标签

表示语音强调的加重

在页面中不会独占一行的元素称为行内元素（inline element）

stong内容强调标签

表示强调，重要内容

<p>你今天必须要<stong>完成作业</strong>!</p>

blockquote长引用标签

鲁迅说：
<blockquote>这句话我是从来没有说过的！</blockquote>

q短引用标签

子曰：<q>学而时习之，乐呵乐呵！<!q>

br换行标签

<br>
<br>

块元素（block element）：在网页中一般通过块元素来对页面进行布局

行内元素（inline element）：主要用来包裹文字

一般情况下会在块元素中放行内元素，而不是反过来

块元素中基本上什么都能放

p元素（块元素）中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

如：标签写在了根元素的外部

p元素中嵌套了块元素

根元素中出现了除head和body以外的子元素...

17、布局标签

header 表示网页的头部

main 表示网页的主体部分（一个页面中只会有一个main）

footer 表示网页的底部

nav 表示网页中的导航

aside 和主体相关的其他内容（侧边栏）

article 表示一个独立的文章

section 表示一个独立的区块，上边的标签都不能使用时用section

div 表示一个区块，目前div还是主要的布局元素

span 行内元素，没有任何语义，一般用于在网页中选中文字

<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>

18、列表

无序列表（Unordered list）

<ul>
	<li>结构</li>
	<li>表现</li>    
	<li>行为</li>  
</ul>

有序列表（Ordered list）

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

定义列表

dt表示定义的内容

dd对内容进行解释说明

<dl>
    <dt>人员</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
</dl>

列表嵌套使用

<ul>
    <li>
        aa
        <ul>
            <li>aa-1</li>
            <li>aa-2
                <ul>
                    <li>aa-1</li>
                    <li>aa-2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

19、超链接

可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置

href指定跳转的目标路径

可以是外部网站的地址

也可以是内部页面的地址

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

<a href="https://www.baidu.com">百度</a>
<br>
<a href="07.列表.html">超链接</a>

跳转服务器内部的页面一般使用相对路径

./ 可以省略不写

./ 表示当前文件所在的目录
../ 表示当前文件所在目录的上一级目录

<a hrefe="./inner/target2.html">超链接3</a>
<a hrefe="../outer/target3.html">超链接4</a>

超链接的属性

target属性：指定超链接打开的位置

_self 默认值在当前页面中打开超链接

_blank 在一个新的页面中打开超链接

#占位符，不会跳转，转到顶部位置

javascript:; 点击超链接什么也不会发生

<a href="07.列表.html" target="_blank">超链接</a>
<a href="#bottom">去bottom</a>	<!--移动到指定id位置-->
<a href="#">这是一个新的超链接</a>
<a href="javascript:;">这是一个新的超链接</a>
<a id="bottom" href="#">回到顶部</a>

20、图片标签

<img src="./img/1.gif" alt="松鼠">

img标签用于向当前页面引入外部图片

img属于替换元素（块元素和行内元素之间，具有两种元素的特点）

属性

src 外部图片的路径（路径规则和超链接一样）

alt 图片的描述，图片无法加载时显示，搜索引擎根据alt的内容来识别图片，不写alt则不会被搜索引擎收录

width 图片的宽度（单位是像素）

height 图片的高度

高度和宽度中如果只修改了一个，则另一个会等比例缩放

注意：一般在PC端不建议修改图片大小，需要多大的图片就裁多大

在移动端，经常需要对图片进行缩放

图片的格式	说明
jpeg(jpg)	支持的颜色比较丰富，不支持透明效果，不支持动图
gif	支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图
png	支持的颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明图片（专为网页而生）
webp	这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点：兼容性不好
base64	将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，需要和网页一起加载的图片才会使用base64

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

    <img src="./img/1.gif" alt="松鼠">

    <img width="200"  src="https://d2ggl082rr1mkp.cloudfront.net/category/IronMan_preview_1521810286_220_310.jpeg" alt="钢铁侠">

21、内联框架

用于向当前页面中引入一个其他页面

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

22、音视频

音频

audio标签向页面中引入一个外部的音频文件，默认情况下不允许用户自己控制播放停止

属性

controls 用户控制播放

autoplay 自动播放

loop 循环播放

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

通过source来指定文件的路径

embed定义嵌入的内容，如插件

<audio controls>
	<source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

视频

使用video标签向页面中引入一个视频

<video controls>
	<source src="./source/flower.webm">
    <source src="./source/flower.mp4">
    <embed src="./source/flower.mp4" type="video/mp4">
</video>