Web开发（一）HTML5

写在前面

参考黑马程序员前端Web教程做的笔记，主要是想后面自己搭建网页玩。

这部分是前端HTML5+CSS3+移动web视频教程的HTML5部分。主要涉及到HTML的基础语法。

HTML基础

标签定义

HTML定义

HTML(HyperText Markup Language)，即超文本标记语言。

超文本：链接

标记：标签，带尖括号的文本。

标签语法定义如下，但凡需要包裹内容的就是双标签，只有几个是单标签。

基本骨架

在vscode中按!后配合Enter/Tab可以快速生成

如下所示。

标签的关系

包括父子关系（嵌套关系）、兄弟关系（并列关系）。

如下所示，head和body就是兄弟关系，外面的html和内层head、body属于父子关系。

注释

复制代码

<!-- 注释内容 -->

标题标签

标题标签同typora自带的六级标题一样。标题标签会自动换行。一般来说h1标签在一个网页只用一次，用来放新闻标签或网页logo。

段落标签

顾名思义，用于写文字的一段。

换行和水平线标签

这两个都是单标签。

换行中，浏览器不会识别代码中的Enter换行。因为不管是一个间隙还是多个间隙，浏览器可以识别为1个空格。如果要多个空格，就得输入 

  是 HTML 中的一个特殊字符实体（Entity），表示"不换行空格"（Non-Breaking Space）。它有以下几个主要作用：

插入空格：在 HTML 中，多个连续的普通空格会被浏览器解析为一个空格，而  可以强制插入一个空格。

保持不换行：它可以防止文本在这个位置换行。

示例结果如下：

html 复制代码

    <!-- 使用普通空格 -->
    第一行内容 第二行内容
    <br>
    <!-- 使用&nbsp; -->
    第一行内容&nbsp;第二行内容
    <br>
    <!-- 使用多个&nbsp;可以创建更大的间距 -->
    第一行内容&nbsp;&nbsp;&nbsp;第二行内容

文本格式化标签

通常用strong、em、ins、del标签写文本格式化标签（而不是b,i,u,s）。

em：emphasis

ins：insert

del：delete

b：bold，即粗体

i：italic，即斜体

u：underline，即下划线

s：strike-through，指的是穿过文本的删除线。

图像标签

图片的URL存放图片的位置，

vscode自带alt参数，alt是图片的替换文字，当图片显示错误时显示alt的文字。

主要用到alt参数和title参数。

另外还有width和height属性，但它们通常通过CSS得到。如果指定width（height），浏览器会等比例缩放height（width）。

路径指定，友情链接也属于绝对路径的应用。本地一般用相对路径。

超链接标签

点击后跳转到其他页面，为双标签。如下所示，href中写目标网页地址

复制代码

<a href="">跳转文字描述</a>

用target="_blank"可以选择新窗口打开。

在开发初期，不知道超链接的跳转地址，href属性值写#，来表示空链接，不会跳转。

复制代码

<a href="#">空链接</a>

音频、视频标签

音频标签

音频在默认情况下不会自动播放。

control用于显示音频控制面板。**在HTML5中，如果属性名和属性值完全一样，那么可以简写为一个单词。**即下两者是等价的。

tex 复制代码

(1)controls = "controls"
(2)controls

对于loop、autoplay同样可以简写为一个单词。但是即使设置了autoplay属性，仍然无法播放，因为浏览器一般禁用自动播放功能。

视频标签

autoplay需要配合muted属性设置才能生效。否则不会自动播放。

综合案例1------个人简介

整体目标与代码

思路如下，从上到下，先整体后局部。

完整代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
</head>
<body>
    <h1><strong>尤雨溪</strong></h1>
    <hr>
    <p>
        尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的<a href="#">JavaScript</a>项目，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。
    </p>
    <img src="cat.gif" alt="一只猫的gif" title="一只猫的gif">
    <h2>学习经历</h2>
    <p>
        尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
    </p>
    <h2>主要成就</h2>
    <p>
        尤雨溪<strong>大学专业并非是计算机专业</strong> ，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。</ins>
    </p>
    <p>
        2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。
    </p>
    <h2>社会任职</h2>
    <p>
        2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。
    </p>
</body>
</html>

小tips

一段的文字过长，可以用alt+z快捷键换行，方便观看。

如果要在段落中插入超链接，可以在光标后先打一个空格，这样就可以有vscode的编译提示。

综合案例2------Vue简介

完整代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue简介</title>
</head>
<body>
    <h1>Vue.js</h1>
    <p>
        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
    </p>
    <p>
        其作者为<a href="./test1_cv.html" target="_blank">尤雨溪</a>
    </p>
    <h2>主要功能</h2>
    <p>
        Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
    </p>
    <p>
        Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
    </p>
    <p>
        Vue.js 自身不是一个全能框架------它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。
    <video src="./vue.mp4" controls></video>
    </p>    
</body>
</html>

HTML进阶语法

列表

一般来说，无序列表用的最多。

无序列表

注意事项

ul标签中只能包裹li标签，无法包裹如段落p其他标签

li标签中可以包裹任何内容。

ul：unorder list

有序列表

ol：ordered list

定义列表

dl：define list

dt：define title

dd：define detail

表格

与Excel表格类似。

tr（table row）

th（table headline）

td（table data）

表格的结构，这儿的thead、tbody是给浏览器看的，目的是代码优化，浏览器更好识别内容。

合并单元格

跨行合并例子

跨列合并例子

不能跨结构标签（thead，tbody，tfoot）合并，即不能合并tbody中的"李四"和tfoot中的"总结"。

表单

定义

input标签

基础

input为单标签

占位文本

用于提示信息。

单选框radio

设置默认选择"checked"，会默认选择对应单选框。

上传多个文件

多选框checkbox

下拉菜单

文本域

默认的col和row不用html设计，而是后面用css设计。

这里应该在前面的方括号后面添加placeholder="请输入评论"，否则会和用户输入混淆。

label标签

label有两种方法

完整写法代码示例

简易写法示例

按钮button

默认type属性为submit

需要定义form标签，来定义表单区域。

无语义的布局标签

div一般称为大盒子，span称为小盒子。

使用示例，三个红框都是用div标签隔出来的。

字符实体

lt：less than

gt：greater than

中文字符大小的空格字符：&emsp;

综合案例1------体育新闻列表

对应实现代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻列表</title>
</head>
<body>
    <ul>
        <li>
            <img src="./img/1.jpg" alt="主帅安东尼奥回西班牙休假 国青抵达海口进行隔离">
            <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
        </li>
        <li>
            <img src="./img/2.jpg" alt="梅州主帅：申花有强有力的教练组 球员体能水平高">
            <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
        </li>
        <li>
            <img src="./img/3.jpg" alt="马德兴:00后球员将首登亚洲舞台 调整心态才务实">
            <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
        </li>
    </ul>
</body>
</html>

综合案例2------注册信息

完成示例：

这儿的确认密码和密码相同是通过js确认的，现在只需要设计出样式即可。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <h2>个人信息</h2>
        <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
        <br><br>
        <label>密码：</label><input type = "password" placeholder="请输入密码">
        <br><br>
        <label>确认密码：</label><input type = "password" placeholder="请再次输入密码">
        <br><br>
        <label>性别：</label>
        <label><input type="radio" name="gender">男</label>
        <label><input type="radio" name="gender" checked>女</label>
        <br><br>
        <label>居住城市：</label>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>深圳</option>
            <option selected>武汉</option>
        </select>

        <h2>教育经历</h2>
        <label>最高学历：</label>
        <select>
            <option>本科</option>
            <option selected>硕士</option>
            <option>博士</option>
            <option>大专</option>
        </select>
        <br><br>
        <label>学校名称：</label>
        <input type="text">
        <br><br>
        <label>所学专业：</label>
        <input type="text">
        <br><br>
        <label>在校时间：</label>
        <select>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
        </select>
        --
        <select>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select>
        <h2>工作经历</h2>
        <label>公司名称：</label>
        <input type="text">
        <br><br>
        <label>工作描述：</label>
        <br>
        <textarea placeholder="请输入工作描述"></textarea>
        <br><br>
        <label><input type="checkbox">已阅读并同意以下协议:</label>
        <br>
        <ul>
            <li>
                <a href="#">《用户服务协议》</a>
            </li>
            <li>
                <a href="#">《隐私政策》</a>
            </li>
        </ul>
        <br><br>
        <button>免费注册</button>
        <button type="reset">重新填写</button>
    </form>

</body>
</html>