HTML5学习1、网页是基于B/S架构，开发网页。相对于C/S机构，最大的优点是跨平台。前端工程师主要开发的是B，即br

HTML5学习

一、前端简介

1、网页是基于B/S架构，开发网页。相对于C/S机构，最大的优点是跨平台。前端工程师主要开发的是B，即browser，S是指server。

2、网页的源代码经过浏览器的渲染可以呈现出看到的效果。

3、万维网联盟W3C规范，制定网页开发的标准，使得同一个网页在不同的浏览器上的效果是一样的。

4、一个网页分为结构（HTML），表现（CSS），行为(JavaScript)。结构是看不到的，是身体；表现是看得到的，是衣服；行为是人的动作，进行交互。

二、html

1、简介

html是一种超文本标记语言。超文本即超链接，可以从一个网页跳到另外一个网页。
给超文本加上标记，即告诉浏览器如何去渲染这些文本。（标题？段落？）
学习html,就是学习各种各样的标签。

2、各种标签

（1）成对标签

是根标签,其他标签都在根标签里面。表示的网页的元数据，是写给浏览器看的。里面是用户可见的部分。

（2）自结束标签

只有一个标签，不是成对的。

（3）空元素标签

既没有内容，也没有关闭标签。比如表示换行的\

3、标签属性

属性以键值对的形式出现，在开始标签中规定。
在成对标签和自结束标签中均可以定义属性。
始终需要为属性值加引号，单引号或者双引号。
多个属性或者属性和标签之间用空格隔开。

4、样式

用style属性改变样式,常见的有font-family、color、font-size（字体、颜色和尺寸），text-align（文本对齐），background（背景颜色）。
style属性值打引号。里面的属性值不加引号，且用：表示属性值，分号；隔开。

# 新版本
<p style="background-color:green;color:white">This is a paragraph.</p>

#旧版本
<p bgcolor="green">This is a paragraph.</p>

5、文档声明

用来告诉浏览器，使用的是哪种网页版本。写在的最上面。

html5 — <!doctype html>

6、字符编码

（1）基本知识

编码：将字符编码为0101的二进制形式，机器可以识别。
解码：将0101转换成字符，用户查看。
字符集（charset）：编码和解码使用的规则，即密码本。
乱码问题：编码和解码采用的字符集不同导致。

（2）字符集

外国：ASCII ISO88591
中国：GB2312 GBK
通用：UTF-8

（3）声明编码

<meta charset="utf-8">

7、标准结构

<!doctype html>
<html>
    <!-- head 用来帮助浏览器解析网页 -->
	<head>
        <!-- mata用来设置网页的元数据 -->
		<meta charset="utf-8">
		<title>前端测试</title>
	</head>
	
    <!-- body呈现内容 -->
	<body>
	</body> 
	
</html>

8、实体

在特殊情况下，比如需要显示多个连续的空格（一般情况不显示空格）、包含标签的表达式。需要利用实体（转义字符）进行显示。

实体的语法： &实体的名字;

# 空格
&nbsp;

# 大于 greater than
&gt;

# 小于 less than
&lt;

9、meta title 标签

用来设置网页中的元数据，常见的属性有name (指定数据的名称)、content(指定数据的内容)、charset(指定网页的字符集)。

# keyword设置网页的搜索关键字，即当在浏览器中搜索关键词时，包含关键字的网页就会显示出来。
<meta name="keyword" content="HTML5,前端，CSS3">

# description用于指定网站的描述，在搜索结果的网页中显示
<meta name="description" content="这是一个不错的网站">

# 用于页面的重定向，即页面在几秒后跳转某个网站
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

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

10、块、行元素

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

行内元素：不会在页面中独占一行。inline element

规则：块里面可以放行（特例是段落元素里面不能放东西），但是行里面不能放块。p元素中不能放块元素。

# 单独块元素，独占一行
<p>
    这是一个段落。
</p>

# 块元素里面嵌套行元素，行元不会独占一行
<p>
    这是一个<strong>段落</strong>。
</p>

12、语义化标签

这是HTML5在原来基础上的改进，即一个语义元素能够清楚的描述其意义给浏览器和开发者。比如

就是代表表格，每个标签都有其实际意义。
常见的语义化标签：一个页面可以分为header,main,footer，且一个页面只有一个main.但是不常用。nav : 页面中的导航。 aside : 页面中的侧边栏。artical : 页面中的文章。section: 其他，一个独立的模块。
传统的块元素div、行元素span还是主流，是非语义化标签。

12、列表list

这种东西类似购物清单，可以用在网页中的导航栏。由有序、无序、定义列表。且列表之间可以相互嵌套，形成不同层级的效果。

# 无序列表 ul用来创建列表，li用来表示列表项
<ul>    
    <li>结构</li>
    <li>表现</li>
</ul>

# 有序列表 ol用来创建列表，li用来表示列表项
<ol>    
    <li>结构</li>
    <li>表现</li>
</ol>

# 定义列表
<dl>
    <dt>结构</dt>
    <dd>结构表示网页的结构。</dd>
</dl>

13、超链接

(1) 跳转路径有绝对路径（外部网站），相对路径（同一个服务器的）两种。

# 绝对路径
<a href="https://www.bilibili.com">baiu</a>

# 相对路径
# 默认路径是./ 表示当前文件夹的路径。.//表示上一层文件夹目录。
<a href=".//07.list.html">list</a>

(2) 其他功能

# 点击超链接在新的标签页打开。target属性，_self默认：在当前也页面打开，_blank：在新标签页。

<a href="https://www.bilibili.com" target="_blank">baiu</a>

# 点击超链接，跳转顶部
<a href="#">回到顶部</a>

# 点击超链接，跳转底部,或者其他任意位置。id属性是元素的唯一标识,不可重复。
# 跳转到第三自然段
<p id=“p3”>这是第三自然段</p>
<a href="#p3">跳转第三自然段</a>

# 未定超链接 #表示占位符(跳转页面顶部)，Javascript什么都不会发生。
<a href="#">这是一个新超链接</a>
<a href="javascript:">这是一个新超链接</a>

14、图片

（1）img

使用img标签引入外部图片，属于替换标签。src可以为内部和外部图片的路径，alt的说明性文字可以被搜索引擎搜索到。
可以通过width、height设置图片的高度和宽度。但是一般在pc端修改图片的大小，需要多大的图片切多少。移动端会使用。
图片的格式：

jpeg(jpg) – 一般用来显示照片；png – 用的最多；gif – 支持动图；webq – google推出，具备所有的优点，文件小，但是兼容性不好。
可以将base64（加密技术）对图片进行编码，直接在src中写入编码。

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

(2) 内联框架iframe

内联框架用于向当前页面引入一个其他页面，在当前网页里面出现一个口，显示引入的页面。大多数情况不用。

<iframe src="https://im.qq.com" frameborder="0"></iframe>

15、音视频播放

audio 音频播放具体的属性功能见手册。指定外部文件不仅仅可以用src,还可以用source。

# 使用src
<audio src="./source/audio.mp3" controls></audio>

# 使用source,支持的浏览器会挑战播放，不支持的不会
<audio controls>
	对不起，您的浏览器不支持播放音频。
    <source href="./source/audio.mp3">
</audio>

video 视频播放

<video></video>

16、表格table – 块元素

(1) 常规表格

<table border="1" width="20%">
    <!-- tr表示有多少行 -->
    <tr>
        <!-- td表示有多少单元格 一行有三个单元格 -->
        <td>A1</td>

        <!-- 合并纵向的单元格 -->
        <td rowspan="2">B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
    <tr>
        <td>A2</td>
        <!-- 合并横向单元格 -->
        <td colspan="2">C2</td>
    </tr>
</table>

（2）长表格

<table border="1" width="20%">
    <!-- 将表格分为三个部分，分别是头部thead 主体tbody 底部tfoot,每个里面是一个小的表格 -->
    <thead>
        <tr>
            <!-- 可以将头部的单元格换成th,会有自动加粗的效果 -->
            <td>日期</td>
            <td>收入</td>
            <td>支出</td>
            <td>合计</td>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>200.11.10</td>
            <td>10000</td>
            <td>5000</td>
            <td>5000</td>
        </tr>   
    </tbody>

    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>5000</td>
        </tr>      
    </tfoot>
</table>

17、表单form – 将数据提交给服务器

1、type指定表单需要实现的功能，大多数可以利用input标签，实现按钮：button，实现下拉框：select+option

2、value主要是用于给用户选择的时候，把用户选择的对应的值进行返回。

<body>
    <!-- action是服务器的地址 -->
    <form action="target.html">
        <!-- 文本框 文本框里的数据要提交到服务器，需要指定name属性 -->
        文本框 <input type="text" name="username">
        <br><br>
        密码框 <input type="password" name="password">
        <br><br>

        <!-- 单选按钮需要name属性进行分组，name属性一致，代表是一组，只能选中一个 -->
        <!-- 选中框需要指定value值，这个会作为用户填写的值返回给服务器 。checked是指默认选中 -->
        单选按钮 <input type="radio" name="hello" value="a">
                 <input type="radio" name="hello" value="b" checked>
        <br><br>

        <!-- 多选框 -->
        多选框 <input type="checkbox" name="test" value="1">
              <input type="checkbox" name="test" value="2">
        <br><br>

		 <!-- 下拉列表 -->
        <select name="haha" id="1">
            <option value="i">选项一</option>
            <option value="ii">选项二</option>
        </select>
		<br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="注册">
		
		<button type="submit">提交</button> 
        
    </form>
                 
</body>

18、实际开发

一般不适用相对路径，需要购买服务器（阿里云、腾讯云），服务器提供两个东西，一个是服务器本身，还有网络宽带、使得可以通过网络正常的访问服务器。
视频音频的大文件，一般不放到服务器中，而是放在专门的脱管中。
对于大文件还可以直接插入视频播放网页的代码，直接在当前页面播放。（视频播放页面在分享那一块，点击复制页面代码）