Html5基本使用详解

最新推荐文章于 2024-03-28 19:26:29 发布

薄荷猫阿茶

最新推荐文章于 2024-03-28 19:26:29 发布

阅读量2.6k

点赞数 2

分类专栏： Html5 文章标签： html5 safari html

本文链接：https://blog.csdn.net/baidu_31741963/article/details/124646008

版权

Html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2022年5月5日时间：23点46分

Html基础

Html简介：

简单翻译就是网页的后台写法，书写的基本方式：

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

开头，加上内容，每一个代码块的结尾都要加上一个斜线表示结尾，保存以后要更改后缀名，改为.html或者.htm，然后使用网页打开。

写一个实例：

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<tile>桃李不言下自成蹊</tile>

</head>

<body>
    
    <h1>我的第一个标题</h1>
    
    <p>我的第一个段落</p>

</body>

</html>

实例解析（图解）

HTML标签与元素

HTML标记标签通常被称之为HTML标签（HTML tag）

HTML标签是由先括号的关键词，比如<html>
HTM标签通常是呈对称弧线的，比如<p> 和</p>
标签队中的一个标签是开始标签，第二个标签是结束表述
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML元素

"HTML标签"和"HTML元素"通常都是描述同样的意思。

电视严格来讲，一个HTML元素包含了开始标签与结束标签，如下实例：

HTML元素:

<p>这是一个段落。</p>

Web浏览器

Web浏览器（如谷歌浏览器、internert Explore、Ferefox、Safari）是用于读取HTML文件，并将其作为网通也显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML网页结构

下面是一个可视化的HTML页面结构

只有在<body>区域（白色部分）才会在浏览器中显示

HTML DOM 树形结构：

HTML版本：

<!DOCTYPE>声明

声明有助于浏览器正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype声明是不区分大小写的，一下方式都可以：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

因为HTML不是很严谨

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

XHTML1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中，直接输出会出现中文乱码情况，这时候我们就需要在头部将字符声明为UTF-8或者GBK

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<tile>桃李不言下自成蹊</tile>

</head>

<body>
    
    <h1>我的第一个标题</h1>
    
    <p>我的第一个段落</p>

</body>

</html>

HTML编辑器

HTML编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML ，为了大家推荐几款常用的编辑器：

HBuilder：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
Sublime Text：Sublime Text - Text Editing, Done Right
VS Code：Visual Studio Code - Code Editing. Redefined
WebStorm：WebStorm: The Smartest JavaScript IDE, by JetBrains

可以自己从官网上下载软件，按步骤安装即可（前三款目前是免费，第一款是中文的）

使用方式：

按照提示安装即可

打开一个文件夹即可

建立一个新的文件，但是后缀必须得是。html 不然就没法使用！加 Tab 的方式快捷生成文件

从软件库中找名字为 Live Server的插件，然后安装，不然没法运行代码

使用右键 Open with Live Server

提示翻译成简体中文：

是因为你的代码中有一行

<html lang="en">

怎么解决呢？

改成：<html lang="zh—CN">

Web服务器发布？

制作的HTML传输到服务器（Web）上，用户去访问服务器（Web）查看到那个 HTML

基本标签

HTML5 注释：

在尖括号中加入叹号跟两个横线就是注释，注释中的内容不会被显示出来，但是在查看网页源代码中会有注释内容

写法：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!--注释不会被显示出来-->
</body>
</html>

也可以多行注释：

 <!--

    注释：是对当前页面元素的描述  是给程序员自己看的  并不会在页面上显示
 
 -->

HTML5标题：

标题是什么？

一般网页上会有一些大的字体，容易区分与文章内容的就叫做标题

在VS Code中怎么书写标题？以及它的格式是什么样子的？

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
   <title>标题</title>
</head>
    <body>  
        <h1>我是h1</h1>
        <h2>我是2</h2>
        <h3>我是3</h3>
        <h4>我是4</h4>
        <h5>我是5</h5>
        <h6>我是6</h6>
    </body>
</html>

格式是在body（身体中）去书写。

输出后的内容是：

h1.......h6可以限制标题的大小，数字越往后字体越小

HTML5段落:

段落的书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
         <meta charset="UTF-8">
         <title>段落</title>
</head>
<body>
    <p>我是段落</p>
    <p>
        我是另一个段落
        <p>我是段落中的段落</p>
    </p>
</body>
</html>

段落可以在段落的里面再去写段落。

为什么使用段落？

段落与段落之间有很大的空隙，空袭空隙明显

HTML5图片

怎么去引入图片？

在 body 中输入 img 引入，在 src 中是输入图片的地址

height中调长度

width中调宽度

注意：这两个调一个就可以，它是等比例缩放的

书写方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" >
</body>
</html>

长度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" height="300px">
</body>
</html>

宽度调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" width="300px" height="300px">
</body>
</html>

鼠标悬停后出现标题内容：

再增加一个属性即可：title

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="01.jpg" width="300px" height="300px" title="这就是title的功能">
</body>
</html>

标签里面的都是属性要用空格空开

HTML5单标签与双标签

同上面的 img 就是单标签

什么时候使用双标签？什么时候使用单标签？

在标签里面有内容的情况下使用双标签，没有的话则使用但标签

图片路径是属性，就是单标签

HTML5锚点跳转站内页面与跳转站外页面

大致意思是：点击图片会跳转到别网页上，这是如何做到的？

方法两种：站内跳转、站外跳转

1、站内跳转

书写方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
        <a href="01.jpg">我要去图片01</a>
</body>
</html>

在 body 中输入 a 跳转然后输入图片路径如果不输入后面的文字，机会找不到，变成空白页面。

从a页面跳转到b页面这个属于站内跳转

2、站外跳转

书写方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
        <a href="https://www.baidu.com/">我要去图片01</a>
</body>
</html>

只需要改为想要跳转的地址即可

HTML5相对路径与绝对路径

../是在当前目录下寻找也叫相对路径

/一个斜杠是在跟下目录里面寻找也叫绝对路径

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
</head>
<body>
    <a href="../HTML/01.jpg">相对路径</a>
    <a href="/01.jpg">绝对路径</a>
</body>
</html>

（两个应该是去一个地方）

注意：如果出现问题，检查路径是否正确

案例点击图片跳转网页

（图片锚点）

写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片锚点</title>
</head>
<body>
    <a href="https://www.baidu.com/">
        <img src="dog.jpg" width="300px" title="点击查看原网页">
</a>
</body>
</html>

注意：要把图片放到两个尖括号 a 里面去，

行级元素与快级元素

段落是块级元素，块级元素独占一行，可以使用<p>尖括号p标签来分行

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素与块级元素</title>
</head>
<body>
    <p></p>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    </p>
    <p>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    </p>
    <p></p>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </p>
    <p>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </p>
</body>
</html>

还可使用 br 换行 来分割

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素与块级元素</title>
</head>
<body>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <br>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <br>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    <br>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
</body>
</html>

p 跟 br 的区别是 p有空隙有间隔

HTML5div换行

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素与块级元素</title>
</head>
    <div>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    </div>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <div>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </div>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </div>
</body>
</html>

HTML5span

使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素与块级元素</title>
</head>
    <span>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    </span>
    <span>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    <a href="">行级元素</a>
    </span>
    <span>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </span>
    <span>
    <img src="01.jpg" >
    <img src="01.jpg" >
    <img src="01.jpg" >
    </span>
</body>
</html>

span与div的区别span只是表示一个区域，供程序员自己看的

HTML5案例页面内导航

书写格式：

<!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>
    <div id= "top" >
    <a href="#01.jpg">01.jpg</a>
    <a href="#dog.jpg">dog.jpg</a>
    </div>
    <img src="01.jpg" alt="">
    <div id="dog.jpg" >

    <a href="#dog.jpg">dog.jpg</a>
    <img id="01.jpg" src="01.jpg" alt="">
    </div>
    <div>
    <a href="#01.jpg">01.jpg</a>
    <a href="#dog.jpg">dog.jpg</a>
    <img id="dog.jpg" src="dog.jpg" alt="">
    </div>
    <img src="01.jpg" alt="">
    <a href="#top">回到顶部</a>
</body>
</html>

首先使用a标签

div 做换行

使用#去复制它的名字

再使用id给每一个 img 加一个id（不可以重复）

使用 a 标签做一个回到顶部

HTML5转义字符

比如想展示P标签，因为尖括号是有特殊含义的，所以要使用 &lt；p&gt；

这样输出就是<p>

列如空格的转义字符&nbsp；拷贝 &copy；123（使用时查找即可）

HTML5无序列表

    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>

输出：
    · 我是列表项
    · 我是列表项
    · 我是列表项
    · 我是列表项
    · 我是列表项
    · 我是列表项
    · 我是列表项
  （前面会有一个小圆点）

一般会加 ul 标签使用，这样就不会顶到边

    <ul>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    </ul>

输出：

HTML有序列表

加上 ol 即可

也可以使用 ol type 选择样式

书写格式：

<!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>
    <ol type="I">
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    </ol>   
</body>
</html>

数字的比较特殊，可以写从 XX开始

只需要加上 start 即可

书写方式：

<!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>
    <ol type="1" start="6">
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    <li>我是列表项</li>
    </ol>   
</body>
</html>

HTML描述列表

使用 dl 开头内容小标题 dt 列表内容使用 dd

书写格式：

<!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>
<dl>
    <dt>列表标题</dt>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>
</body>
</html>

HTML基本表格

thead 表格的标题头标题头要写进 thead 里面去

一行称之为一个 tr

表格内每一个格子称之为单元格使用 th 表示

td 可以理解为列，但实际上是一个小格子

表格内容是放在 tbody 里面的

书写方式：

<!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>
<dl>
    <table border="" cellspacing="" cellpadding=" ">
        <caption>XXXX统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
            </tr>
            <tr>
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
            </tr>
        </tbody>
    </table>
</dl>
</body>
</html>

HTML5表格内边距与表格外边距

格子与格子的间隙是外边距

内容与格子边叫做内边距

取消掉外边距的方式：调整 cellspacing 的数值：30

内边距调整方式：cellpadding 数值为： 30 即可根据自己的需要调整

HTML5变革尺寸-位置

自己调整表格的大小方式：

width 调整宽度

border 边框粗细

表格居中的方式：align="center"

height 表格高度

表格内容居中：在每一行中加入 align="center"

HTML5表格布局

合并单元格，实际上是一个占用另一个的格子

基础表格：

<!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>Document</title>
</head>
<body>
    <table border="" aligen-="center" cellspacing="30xp" cellpadding="30xp">
        <tbody>
            <tr aligen-="center">
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
                <td>1-5</td>
            </tr>
            <tr aligen-="center">
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            <tr aligen-="center">
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            <tr aligen-="center">
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>145</td>
            </tr>
            <tr aligen-="center">
                <td>5-1</td>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
            </tr>
        </tbody>

    </table>
</body>
</html>

在colspan="X"在 td 中使用

格式：

<!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>Document</title>
</head>
<body>
    <table border="" aligen-="center" cellspacing="30xp" cellpadding="30xp">
        <tbody>
            <tr aligen-="center">
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
                <td>1-5</td>
            </tr>
            <tr aligen-="center">
                <td>2-1</td>
                <td colspan="3">2-2</td>
                <td>2-3</td>

            </tr>
            <tr aligen-="center">
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            <tr aligen-="center">
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>145</td>
            </tr>
            <tr aligen-="center">
                <td>5-1</td>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
            </tr>
        </tbody>

    </table>
</body>
</html>

但是如果更改高度，它是会向下挤，然后再向右边挤

HTML5表单get与post

get 书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get方式提交</title>
</head>
<body>
    <form action="#" method="get">
            账号<input type="text" id="username" name="username" value=""/>
            密码<input type="password" id="password" name="password" value=""/>
        <input type="submit" value="登录/">
    </form>
</body>
</html>

post 只需要把方法改为 post即可代码内容和上面一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get方式提交</title>
</head>
<body>
    <form action="#" method="post">
            账号<input type="text" id="username" name="username" value=""/>
            密码<input type="password" id="password" name="password" value=""/>
        <input type="submit" value="登录/">
    </form>
</body>
</html>

post 不会在地址栏显示账号密码，并且需要一个服务器，

HTML5表单autocomplete与placeholder

录入内容不会被记住：

增加一行代码代码内容：autocomplete="off"

get 书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get方式提交</title>
</head>
<body>
    <form action="#" method="get">
             账号<input type="text" id="username" name="username" value="" autocomplete="off" placeholder="请输入账号"/>
            密码<input type="password" id="password" name="password" value=""placeholder="请输入密码"/>
        <input type="submit" value="登录/">
    </form>
</body>
</html>

post 的方式与get 基本一致，更改方式即可

HTML5表单单选按钮radio

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
    <form action="">
        <label for="male"> 
            男&nbsp;&nbsp; <input type="radio" id="male" name="gender" value="" />
        </label>
        &nbsp;&nbsp;   &nbsp;   &nbsp;
        <label for="female">
            女&nbsp;&nbsp; <input type="radio" id="female" name="gender" value="" />
        </label>
        <br>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

HTML5表单单选和多选按钮默认选中值

单选：

想让哪个被选中为默认就加上：checked="checked" checked不给值也是可以的

多选按钮checkbox：

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选按钮</title>
</head>
<body>
        爱好：&nbsp;&nbsp;<br>
        <label for="swimming">
            游泳&nbsp;&nbsp;<input type="checkbox" id="swimming" name="hobby" value="swimming"/>
        </label>
        <label for="running">
            跑步&nbsp;&nbsp;<input type="checkbox" id="running" name="hobby" value="swimming"/>
        </label>
        <label for="skiing">
            滑雪&nbsp;&nbsp;<input type="checkbox" id="skiing" name="hobby" value="swimming"/>
        </label>
</body>
</html>

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>
    籍贯：&nbsp;&nbsp;
    <select name="hometown" id="">
        <option value="22">吉林</option>
        <option value="11" selected="selected">北京</option>
        <option value="00">大海</option>
    </select>
</body>
</html>

多选下拉列表：

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选下拉列表</title>
</head>
<body>
    水果：&nbsp;&nbsp;&nbsp;
    <select name="fruits" multiple="multiple" id="">
        <option value="banana">香蕉</option>
        <option value="apple">苹果</option>
        <option value="pear">鸭梨</option>
    </select>
</body>
</html>

默认被选中格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选下拉列表</title>
</head>
<body>
    水果：&nbsp;&nbsp;&nbsp;
    <select name="fruits" multiple="multiple" id="">
        <option value="banana">香蕉</option>
        <option value="apple" selected="selected">苹果</option>
        <option value="pear">鸭梨</option>
    </select>
</body>
</html>

HTML5用表单项

行：

<textarea cols="30" rows="15"></textarea>

这行代码可以给你一个可自行编写内容的文本框

年龄：&nbsp;&nbsp;

 <input type="number" name="age" id="age" value=""/>

                不改就会出现负数

这行代码，可以生成一个上下选择的框，内容为数字，也可以自行输入

<input type="range" name="age" id="age" value=""/>

                这里改了以后就成了一个滑块了

    <br>数字：&nbsp;&nbsp;

    <input type="range" name="age" id="age" value=""/>

时间：

    时间：&nbsp;&nbsp;<input type="time" name="" id="" >
    周：&nbsp;&nbsp;<input type="week" name="" id="" >
    日期：&nbsp;&nbsp;<input type="date"name="" id="" >
    日期：&nbsp;&nbsp;<input type="datetime"name="" id="" >

完整的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项</title>
</head>
<body>
    <form action="" method="get">
    <textarea  cols="30" rows="15"></textarea>
    <br>年龄：&nbsp;&nbsp;
    <input type="range" name="age" id="age" value=""/>
    <br>数字：&nbsp;&nbsp;
    <input type="range" name="age" id="age" value=""/>
    时间：&nbsp;&nbsp;<input type="time" name="" id="" >
    周：&nbsp;&nbsp;<input type="week" name="" id="" >
    日期：&nbsp;&nbsp;<input type="date"name="" id="" >
    日期：&nbsp;&nbsp;<input type="datetime"name="" id="" >
    <br>URL:&nbsp;&nbsp;<input type="url"name="" id="" >
    <br>电话:&nbsp;&nbsp;<input type="tel"name="" id="" >
    <br>邮箱:&nbsp;&nbsp;<input type="email"name="" id="" >
    <br>文件:&nbsp;&nbsp;<input type="filel"name="" id="" >
    <input type="submit" value="提交"/>
    </form>
</body>
</html>

文件提交比较特殊，需要改一下类型

HTML5案例利用百度制作自己的搜搜引擎

使用 action 发送给百度查询

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="https://www.baidu.com/s" method="get">
        <input type="search" name="wd" required="" placeholder="百度一下你就知道" x-webkit-spech="" x-webkit-grammar="builtin:search" lang="zh-CN"/>
        <input type="submit" value="小度小度"/>
    </form>
</body>
</html>

前后端的数据交互

HTML5div与span

区别是：

div是块级元素，可以设置宽高
span 是行级元素，所以都在同一行上，

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div与span</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 300px;
        height: 300px;
        border: 1px solid #f0f;
    }

   /* span{
        width: 300px;
        height: 300px;
        border: 1px solid rgb(0, 102, 255);
    }*/
    </style>
</head>
<body>
            /*<span></span>
            */ <span></span>
    <div>桃李不言</div>
    <div>下自成蹊</div>
</body>
</html>

作用：只是做区分而已 div 与 span 是可以互相嵌套的

HTML5frameset（已淘汰）

frameset作用：一个网页显示两个网站内容，就可使用frame引入网页

HTML5iframe

以前是在frameset中，现已经被保存下来，做两个网页的引入。

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <iframe src="https://blog.csdn.net/cxcxrs/article/details/81025716" frameborder="0" width="50%" height="900px"></iframe>
</body>
</html>

网页套网页

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <iframe src="https://blog.csdn.net/cxcxrs/article/details/81025716" frameborder="0" width="100%" height="15%"></iframe>
    <iframe src="https://www.bilibili.com/video/BV16s411q7SE?spm_id_from=333.337.search-card.all.click" frameborder="0" width="100%" height="15%"></iframe>
    <iframe src="https://www.bilibili.com/video/BV16s411q7SE?p=2" frameborder="0" width="100%" height="15%"></iframe>
</body>
</html>

滚动条是否显示书写格式：

<iframe src="https://blog.csdn.net/cxcxrs/article/details/81025716" frameborder="1" width="100%" height="15%" allowfullscreen="false"></iframe>

 
 
 
 allowfullscreen="false为是否显示

网页内嵌套网页：

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <iframe src="//player.bilibili.com/player.html?aid=853004942&bvid=BV1zL4y1j7N3&cid=570548052&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    <iframe src="//player.bilibili.com/player.html?aid=468178810&bvid=BV1w5411S71c&cid=574445281&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>

注意：嵌套的视频网址跟普通的网址是由区别的

薄荷猫阿茶

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
Html5基本使用详解

2022年5月5日时间：23点46分Html基础Html简介：简单翻译就是网页的后台写法，书写的基本方式：<!DOCTYPE html><html><head></head><body></body></html>开头，加上内容，每一个代码块的结尾都要加上一个斜线表示结尾，保存以后要更改后缀名，改为.html或者.htm，然后使用网页打开。写一个实例：<!DOC
复制链接

扫一扫