HTML

HTML介绍

什么是html

超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言，是网页制作所必备的。

超文本：功能比文本强大, 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 语法由标签组成

html渲染的速度由不同厂商的浏览器决定的，chrome市场份额最大。

我们按照web标准(html+css+javascript)编写代码，不同的浏览器引擎就会展示相同的效果。

学习HTML的核心是标签

广义H5说法

狭隘H5

广义H5

广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。
虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
HTML5 MDN 介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

概述

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

HTML结构和基本语法

HTML的结构

文档结构介绍：
- 文档声明：用于声明当前HTML的版本，这里的<!DOCTYPE html>是HTML5的声明
- html根标签：除文档声明以外，其它内容全部要放在根标签html内部
- 文档头部配置：head标签，是当前页面的配置信息，外部引入文件, 例如网页标题、字符集等
- 文档显示内容：body标签，里边的内容会显示到浏览器页面上

HTML语法规范

扩展名是html或者htm
html标签不区分大小写

<p></P>
<P></P>
------
<p></P>
<P></p>

html由头(head)和体(body)组成
标签是可以嵌套的,标签里面可以放标签
标签一般由起始标签开始，结束标签终止(成对出现)。但是如果标签不修饰内容，可以在标签里结束。

1 2	<p id="1">hello</p> <br/>

标签属性

武器 (标签) 属性(标签属性)

攻击之爪 +6点攻击力

倚天剑 +50点攻击力 15%暴击

属性是属于标签的，修饰标签，让标签有更多的效果
属性一般定义在起始标签里面。

1	<font color='red'>hello</ font>

属性一般以 属性=属性值的形式存在
属性值一般用 '' 或者“ ” 括起来。不加引号也是可以的.(不建议使用)

HTML快速入门

需求: 使用HTML展示hello sz85... 字体颜色为红色

步骤:

创建工程
创建HTML
定义 font标签
设置font标签的color属性为red

使用idea创建

File -> new -> Module

选择static web

设置Module的名称

创建html文件

在static web项目上右键 -> New -> Html File

设置HTML文件名称

编写HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--页面的标题-->
    <title>第一个html页面</title>
</head>
<!--页面的内容-->
<body>
    hello world......
</body>
</html>

使用vscode创建

新建文件，！就可以创建html文件
安装open in browser插件，右键open in default browser在默认浏览器打开

使用浏览器访问

把鼠标移动到右上角，会浮动出来浏览器按钮，点击“Chrome”按钮，使用Chrome浏览器打开当前网页

在浏览器上看到效果

HTML常用的标签

排版标签

字体标签

1	<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>

标题标签

1 2	<hn>标题<hn> n取值1~6, 1是一级标题, 2是二级标题... 一般只有logo用h1

段落标签

<p>段落</p>

注意：段落之间自动进行换行

粗体标签

<b>内容</b>

斜体标签

<i>内容</i>

水平线/下划线标签

<hr/>

换行标签

<br/>

Ctrl+Shift+/: 注释快捷键

图片标签

img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片

1 2	语法: <img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>

示例代码

1
2
3

<!--掌握: src属性: 图片的路径; width属性:指定图片的宽度 ; height属性: 指定图片的高度;
    了解: alt属性: 图片的描述(只有图片显示错误的时候才有效果); title属性: 鼠标放上去显示的标题-->
<img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/>

width和height一般只需要设置一个值，另一个会等比例缩放，这样可以让图片不变形。

路径问题

相对路径

以盘符开始的全路径

相对路径

相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

同级

同级就是”图片”和”.html文件”存储在同一个文件夹中

格式: src=”QRCode.jpg”

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

上级

上级就是和存”储代码的文件夹”在同一个文件夹中

格式: src="../img/QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫img的文件夹中的名字叫做QRCode.jpg的图片, 其中../ 代表找到当前文件夹的上一级文件夹

列表标签

无序列表

语法

<ul type="类型">
    <li>需要显示的条目内容</li>
    ...
</ul>

示例代码

<!--二 无序列表 ul-->
<!--type属性: 列表的类型; circle: 空心圆; square: 实心的正方形-->
<ul type="square">
    <!--li定义列表里面的条目(item). li定义在ul里面-->
    <li>乔丹</li>
    <li>詹姆斯</li>
    <li>艾弗森</li>
    <li>科比</li>
    <li>库日天</li>
</ul>

注意点

ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.

li要定义在ul里面
应用场景

新闻列表
商品列表
导航条,菜单

有序列表

语法

<ol type="类型" start="起始索引">
    <li>需要显示的条目内容</li>
    ...
</ol>

示例代码

<!--一,有序列表 ol
    start属性: 起始的索引(默认是第1个)
    type属性: 列表类型;  1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字
-->
<ol start="1" type="1">
    <!--li定义列表里面的条目(item). li定义在ol里面-->
    <li>乔丹</li>
    <li>詹姆斯</li>
    <li>艾弗森</li>
    <li>科比</li>
    <li>库日天</li>
</ol>

超链接标签

超链接标签的基本使用

超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的

超链接标签的格式:
<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
		target属性取值: 
		_blank：新起页面
		_self：当前页面（默认）

示例代码

<!--href属性: 跳转的路径(可以是本地的也可以是远程的)
target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)
-->
<a href="../03_公司简介案例/company.html" id="top">查看公司简介</a><br/>

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

假链接

就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接

1	<a href="#">这是一个假链接</a>

链接分类

<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"/></a>

表格标签

基本表格

语法

表格：由<table>标签定义；
行：每个表格里有若干行<tr>；
单元格：每行被分割为若干单元格<td>。
- 单元格里可以包含文本、图片、列表、段落、表单、水平线、表格等

单元格合并

删除要合并的格子, 只留一个(最前方的那一个)
如果是行合并设置rowspan, 如果是列合并设置colspan, 几个合并值就是几

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--
table就是表格
1. border属性: 表示表格的边框
2. width属性: 表示表格的宽度
3. cellspacing属性: 表示单元格之间的间距
4. cellpadding属性: 表示单元格里面的内容距离单元格的内边框的边距
5. bgcolor属性: 背景颜色
6. align属性: 表格的水平对齐方式

tr就是表格中的行
1. bgcolor: 该行的背景色
2. align: 该行的所有内容的水平对齐方式

td就是表格中的单元格
1. bgcolor: 该单元格的背景色
2. align: 该单元格的内容的水平对齐方式
3. rowspan: 跨行合并单元格,需要跨几行则rowspan取值就为几
4. colspan: 跨列合并单元格，需要跨几列则colspan的取值就为几

caption标签就是表格的标题

th标签:它也是单元格，但是它是表头单元格
-->
        <table border="1px" width="600px" cellspacing="0px" cellpadding="10px" bgcolor="red" align="center">
            <caption>我是表格的标题</caption>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
            <tr bgcolor="blue" align="center">
                <td>11</td>
                <td bgcolor="green" align="right">12</td>
                <td>13</td>
            </tr>

            <tr>
                <td rowspan="2">21</td>
                <td>22</td>
                <td>23</td>
            </tr>

            <tr>
                <td colspan="2">32</td>
            </tr>
        </table>
    </body>
</html>

表格容易错的地方

<!--1.就算只有1行1列, td不能少-->
<table>
    <tr></tr>
</table>

<!--2.合并之前, 每一行的列的个数应该一样-->
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!--3. table定义tr, tr里面定义td, td里面再放内容-->
<table>
    <tr>
        <td>
            333
        </td>
    </tr>
</table>

表单标签

通过form来定义: 包裹表单项、指定向服务器提交的路径、提交方式

<form>
    //1.input类型
    //2.select类型
    //3.textarea类型
</form>

常用属性

action:提交路径,默认是当前页面,#

method:提交方式,常用的是get和post. 默认就是get

get和post区别

1. 携带数据的位置:get是在地址栏后面携带的，post是在http协议的请求体中携带的
2. 携带数据的类型:get只能携带字符串不能携带文件，post可以携带任意类型的数据，所以如果是文件上传那么只能选择使用post方式
3. 携带数据的大小:get携带数据的大小一般不超过4kb,post携带数据的大小是没有限制的(但是一般服务器都会做限制)
4. 安全性:post比get更安全

form的常见子标签

input:输入域, 通过type属性来指定类型

select :选择列表

textarea：文本域

input：输入类型

1	<input type="xxx"/>

type属性,类型是由属性（type）定义的

text(默认类型) 文本框
password 密码框
radio 单选框只有当name属性相同的单选框，才是同一组单选框才能够实现单选效果
checkbox 复选框同一组多选框，也应该具备相同的name属性
file 文件选择框
date 日期选择框
hidden 隐藏域：向服务器提交数据，但是不在页面上展示出来
submit 提交按钮：内置提交表单的功能
button 普通按钮：不内置任何功能，我们需要在学习js之后再给他绑定点击事件
reset重置按钮：内置重置表单的功能

select :选择菜单

1
2
3

<select name="">
	<option value="">显示的内容</option>
</select>

option：选择菜单的选项

注意：

name在select里面指定
value在option里面指定
option定义在select里面

textarea:文本域

1	<textarea rows="20" cols="30" name="introduce"></textarea>

属性：

cols列
rows:行

通用属性

1.name

1. 如果表单项的数据需要提交给服务器，那么他就必须具备name属性
2. 2. 同一组单选、多选框需要具备相同的name

2.value

1. 按钮的value属性就是按钮上的文字
2. 输入框、密码框、文件选择框、日期选择框等等的value属性的值，就是你所输入的值
3.  单选和多选框都需要指定value

设置默认值

text,password:通过value属性

1	用户名: <input type="text" name="username" value="zs"/>

radio checkbox:通过checked属性

1 2	性别: <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0" checked="checked" />女

select :在option上通过selected属性

籍贯: <select name="address">
        <option value="sz">深圳</option>
        <option value="bj">北京</option>
        <option value="sh" selected="selected">上海</option>
    </select><br/>

textarea:直接在标签体中写

1	自我介绍: <textarea rows="5" cols="20" name="introduce">哈哈哈</textarea><br/>

其它属性

readonly属性:是否只读,可以让用户不修改这个输入框的值,就使用value属性设置默认值
disabled属性: 是否可用,如果某个输入框有disabled那么它的数据不能提交到服务器通常是使用在有的页面中，让一些按钮不能点击
placeholder属性: 输入框中的提示信息
单选和多选框也可以设置默认选中，通过checked属性
option标签通过selected属性设置默认选中

完整代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form标签</title>
    </head>
    <body>
        <!--
表单标签是form，form标签有如下的几个属性
1. action: 表单的提交路径, 服务器中的某个路径
2. method: 表单的提交方式, 有两种方式，分别是get(默认方式)和post
get提交方式和post提交方式的区别:
1. 携带数据的位置: get方式是在url地址后面携带,post方式是在请求体中携带
2. 携带数据的大小: get方式携带数据的大小是有限制的，post方式携带数据的大小是没有限制的(除非在服务器端做限制)
3. 携带数据的类型: get方式只能携带字符串类型的数据，post方式携带数据的类型是没有限制的，所以做文件上传只能用post方式
4. post方式携带数据相较于get方式携带数据更加安全一些

表单中必须具备表单项,表单项分为三种:
1. 输入项: input
1. type属性: 表示输入项的类型
1.1 text(默认取值): 表示文本框
1.2 password: 表示密码框
1.3 date: 日期选择框
1.4 radio: 单选框,同一组单选框需要具备相同的name属性值
1.5 checkbox: 复选框,同一组复选框需要具备相同的name属性值
1.6 file: 文件选择框,用于做文件上传的
1.7 submit: 提交按钮，内置提交表单的功能
1.8 button: 普通按钮，不内置任何功能
1.9 reset: 重置按钮,具备重置表单的功能
1.10 hidden: 用于向服务器提交，在浏览器上不显示
2. name属性: 有name属性的表单项中的数据才能够被提交
3. value属性:
输入框、文件选择框、日期选择框的value其实就是你输入的或者选择的内容
单选或者多选框，默认value均为on,所以我们需要手动给单选框和多选框设置value
按钮，它的value是就是按钮上的文字

2. 选择项: select,它里面需要有选项，每一个选项就是一个option标签
name属性是设置在select标签中
如果option没有添加value属性，那么提交数据的时候，就会提交你选中的那个option标签体的内容
如果option加了value属性，那么提交数据的时候就会提交你选中的那个option的value值

3. 文本域: textarea
cols属性:显示的列数，其实就是宽度
rows属性:显示的行数，其实就是高度

设置默认值:
1. 给输入框设置默认值，其实就是设置输入框的value
2. 给单选或者多选框设置默认值，其实就是设置checked
3. 给下拉框设置默认选中，下拉框本身的默认选中是第一个，如果你想设置其他的选项默认选中，则在那个选项上添加selected属性

其他属性:
1. readonly 表示只读，数据可以向服务器提交
2. disabled 表示不可用,数据无法向服务器提交
3. placeholder 表示输入提示
-->
        <form action="server01" method="get">
            <!-- text 文本框 用户可以里面输入任何文字 -->
            用户名<input type="text" name="username" value="奥巴马" readonly><br>
            <!--label 绑定id，可以达到点击label文本就选中对应的input的效果-->
            <label for="text"> 用户名:</label> <input type="text" id="text" >
            <!--label 直接包裹起来也可以-->
            <label> <input type="text" ></label> 
            <!-- password 密码框 用户看不见输入的密码 -->
            密码<input type="password" name="password" placeholder="请输入密码"><br>
            生日<input type="date" name="birthday"><br>
            性别
            <!-- radio 单选按钮  可以实现多选一 -->
        	<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        	<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
            <input type="radio" value="male" name="gender">男
            <input type="radio" value="female" name="gender" checked>女
            <br>
            兴趣爱好
            <!-- checkbox 复选框  可以实现多选 -->
            <input name="hobby" value="basketball" type="checkbox">篮球
            <input name="hobby" value="football" type="checkbox" checked>足球
            <input name="hobby" value="pingpangball" type="checkbox" checked>乒乓球
            <input name="hobby" value="yumaoball" type="checkbox">羽毛球
            <br>
            <!-- 文件域 使用场景 上传文件使用的 -->
            头像<input type="file" name="icon"><br>

            学历<select name="xueli">
            <option value="1">专科</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
            <option value="5" selected>女博士</option>
            </select>
            <br>

            个人简介
            <textarea rows="10" cols="50">hello world</textarea><br>
             <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
            <input type="submit" value="提交按钮">
            <!-- 普通按钮 button  后期结合js 搭配使用-->
            <input type="button" value="普通按钮">
            <!-- 重置按钮可以还原表单元素初始的默认状态 -->
            <input type="reset">

            <input type="hidden">
        </form>
    </body>
</html>

扩展-html案例

回到顶部

锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。

在html里面锚点的作用: 通过a标签跳转到指定的位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a id="aId"></a>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
<img src="../img/banner_1.jpg" width="500px" height="2000px"/>

    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <p>111</p>
    <a href="#aId">回到顶部</a>

</body>
</html>

图片链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://www.baidu.com">
    <img src="../img/b.jpg"/><br/>
    百度
</a>

</body>
</html>

详情和概要标签

利用summary标签来描述概要信息, 利用details标签来描述详情信息. 默认情况下是折叠展示, 想看见详情必须点击

<details>
    <summary>概要信息</summary>
    详情信息
</details>

字符实体

网页不认识连续的多个空格，只认识一个，想实现多个空格，用&ndsp;

其他的字符实体：

HTML5新特性

语义化标签（★★）

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

媒体标签

音频标签`audio`

语法

<audio>：用于播放声音，比如音乐或其他音频流，是 HTML 5 的新标签。
当前 <audio> 元素支持三种视频格式：尽量使用 mp3格式
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
常用属性有

属性名	取值	默认值	描述
`src`	URL		音频资源的路径
`autoplay`	`autoplay`	`autoplay`	音频准备就绪后自动播放
`controls`	`controls`	`controls`	显示控件，比如播放按钮。
`loop`	`loop`	`loop`	表示循环播放
`preload`	`preload`	`preload`	音频在页面加载时进行预加载。如果使用 “autoplay”，则忽略该属性。

浏览器支持：

兼容写法:

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5媒体标签-音频audio</title>
</head>
<body>

    <audio src="media/horse.ogg" controls>
        你的浏览器不支持 audio 标签。
    </audio>

</body>
</html>

效果

视频标签`video`

语法

<video> 标签用于播放视频，比如电影片段或其他视频流，是 HTML 5 的新标签。
当前 <video> 元素支持三种视频格式：尽量使用 mp4格式
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息
常用属性

属性名	取值	默认值	描述
`src`	URL		要播放的视频的 URL。
`width`			设置视频播放器的宽度。
`height`			设置视频播放器的高度。
`autoplay`	`autoplay`	`autoplay`	视频在就绪后自动播放。
`controls`	`controls`	`controls`	显示控件，比如播放按钮。
`loop`	`loop`	`loop`	如果出现该属性，则当媒介文件完成播放后再次开始播放。
`preload`	`preload`	`preload`	视频在页面加载时进行加载。如果使用 “autoplay”，则忽略该属性。
`muted`	`muted`	`muted`	规定视频的音频输出应该被静音。
`poster`	URL		视频下载时显示的图像，或者视频播放前显示的图像。