html5

开发环境

开发工具

VSCode下载地址

https://code.visualstudio.com/

相关插件

- Chinese (Simplified) Language Pack for Visual Studio Code 简体中文语言包
- Live Server 提供内置WEB服务器,模拟在真实服务器中打开网页

常用快捷键

格式化:CTRL+ALT+F
放大:CTRL++
缩小:CTRL+-
隐藏/显示侧边栏:CTRL+B
资源管理器:CTRL+SHIFT+E
插件管理器:CTRL+SHIFT+X
全局搜索框:CTRL+SHIFT+F
页内搜索框:CTRL+F
隐藏/显示终端:CTRL+`

HTML5基本结构

<!DOCTYPE html>
<html>
<head>
    <title>HTML5</title>
</head>
<body>
    Hello HTML5!
</body>
</html>

中文乱码问题

中文乱码原理:网页文件编码方式与浏览器的解析方式不同,就会导致中文乱码问题

<head>
    <meta charset="UTF-8">
    <title>HTML5</title>
</head>

注释

注释的内容不会渲染到页面上,可以通过查看源码进行查看

<!-- 注释内容 -->

文档标签

换行符

<body>
    Hello <br/> HTML5!
</body>

标题、段落、水平线

标题共有六级,分别为:h1h2h3h4h5h6h1字号最大,h6字号最小

<body>
    <h1>文章标题</h1>
    <h2>副标题</h2>
    <hr/>
    <p>第一段...</p>
    <p>第二段...</p>
</body>

插入图像

简单图像:src 图片地址,可以时本地地址,也可以是网络地址

<body>
    <h1>文章标题</h1>
    <h2>副标题</h2>
    <p>第一段文本...</p>
    <p>第二段文本...</p>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
</body>

图片缺失提示

<img src="..." alt="图片缺失"/>

图像尺寸

尺寸为正整数,单位为px

<img src="..." alt="..." width="100" height="100"/>

鼠标悬浮提示

<img src="..." alt="..." title="这张图片是Logo"/>

插入列表

有序列表

默认序号为升序

<body>
    <ol>
        <li>咖啡</li>
        <li>牛奶</li>
        <li></li>
    </ol>
</body>

将序号降序

<ol reversed> ... </ol>

修改标号类型

type 属性的可选值为:1、A、a、I、i

<ol type="A"> ... </ol>

指定序号的起始值

start 只能为整数值

<ol start="5"> ... </ol>
<ol type="A" start="5"> ... </ol>

无序列表

<body>
    <ul>
        <li>咖啡</li>
        <li></li>
        <li>牛奶</li>
    </ul>
</body>

定义列表

dt 用于定义项目

dd 用于描述项目

<body>
    <h4>计算机的组成部分</h4>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
</body>

插入表格

绘制三行三列表格

<body>
    <table>
        <tr>
            <td>商品</td>
            <td>数量</td>
            <td>单价</td>
        </tr>
        <tr>
            <td>内存条</td>
            <td>2</td>
            <td>700</td>
        </tr>
        <tr>
            <td>硬盘</td>
            <td>1</td>
            <td>800</td>
        </tr>
        <tr>
            <td>总计</td>
            <td>3</td>
            <td>1500</td>
        </tr>
    </table>
</body>

带边框的表格

border 的值为正整数,单位为像素

<table border="1"> ... </table>

调整单元格的内边距

cellpadding 的值为正整数,单位为像素

<table border="1" cellpadding="10"> ... </table>

调整单元格间的距离

cellspacing的值为正整数,单位为像素

<table border="1" cellspacing="10"> ... </table>

调整外边框的可视部分

frame可选值描述
void不显示外侧边框。
above显示上部的外侧边框。
below显示下部的外侧边框。
hsides显示上部和下部的外侧边框。
vsides显示左边和右边的外侧边框。
lhs显示左边的外侧边框。
rhs显示右边的外侧边框。
box在所有四个边上显示外侧边框。
border在所有四个边上显示外侧边框。
<table border="0" cellspacing="10" frame="above"> ... </table>

调整内边框的可视部分

rules可选值描述
none没有线条。
groups位于行组和列组之间的线条。
rows位于行之间的线条。
cols位于列之间的线条。
all位于行和列之间的线条。
<table border="1" cellpadding="10" frame="void" rules="all"> ... </table>

调整表格整体的宽和高

width 的值可以是百分比或者正整数,单位为px

height 的值只能为正整数,单位为px

<table border="1" width="200" height="400"> ... </table>
<table border="1" width="50%"> ... </table>

指定列头

<body>
    <table border="1" width="200">
        <tr>
            <th>商品</th>
            <th>数量</th>
            <th>单价</th>
        </tr>
        <tr>
            <td>内存条</td>
            <td>2</td>
            <td>700</td>
        </tr>
        <tr>
            <td>硬盘</td>
            <td>1</td>
            <td>800</td>
        </tr>
        <tr>
            <td>总计</td>
            <td>3</td>
            <td>1500</td>
        </tr>
    </table>
</body>

将表格的内容进行分组

thead 表示表格的头部

tbody 表示表格的主题

tfoot 表示表格的脚步

<body>
    <table border="1" width="200">
        <thead>
            <tr>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内存条</td>
                <td>2</td>
                <td>700</td>
            </tr>
            <tr>
                <td>硬盘</td>
                <td>1</td>
                <td>800</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>3</td>
                <td>1500</td>
            </tr>
        </tfoot>
    </table>
</body>

带标题的表格

标题默认在表格顶部

<body>
    <table border="1" width="200">
        <caption>购物清单</caption>
        ...
    </table>
</body>

可以使用 align="bottom" 将标题移至表格的底部

<body>
    <table border="1" width="200">
        <caption align="bottom">购物清单</caption>
        ...
    </table>
</body>

设置一行数据的排版方式

align可取值说明
right水平方向,居右对其
left水平方向,居左对其
center水平方向,居中对齐
justify水平方向,两端对齐
valign可取值说明
top垂直方向,顶部对齐
middle垂直方向,居中对齐
bottom垂直方向,底部对齐
baseline垂直方向,基线对齐
<table border="1" width="100%" height="300">
	<tr align="center" valign="top"> ... </tr>
</table>

设置单元格的排版方式

alignvalign的值,参考行数据的排版方式

<tr>
	<td align="center" valign="center"> ... </td>
</tr>

合并单元格

水平合并,也可以称为列合并,合并原则是:左边的单元格合并掉右边的单元格

colspan的值为合并单元格的数量,只能为正整数

<body>
    <table border="1" width="100%" height="300">
        <tr align="center">
            <td colspan="2">1-1</td>
            <td>1-3</td>
        </tr>
        <tr align="center">
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </table>
</body>

垂直合并,也可以称为行合并,合并原则是:上面的单元格合并掉下面的单元格

<body>
    <table border="1" width="100%" height="300">
        <tr align="center">
            <td rowspan="2">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr align="center">
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </table>
</body>

插入音频

插入音频

audio 内的文本可以省略。当老的浏览器不支持 audio 标签时便显示此文本进行提示

默认情况下,不显示音频控件

src 为音频路径,仅支持以下音频格式:

音频格式MIME类型
*.oggaudio/ogg
*.mp3audio/mpeg
<body>
    <audio src="https://www.w3school.com.cn/i/horse.ogg">
        您的浏览器不支持 audio 标签。
    </audio>
</body>

显示音频控件

<audio src="..." controls> ... </audio>

自动播放

<audio src="..." autoplay="autoplay"> ... </audio>

循环播放

<audio src="..." autoplay="autoplay" loop> ... </audio>

静音模式

<audio src="..." controls muted> ... </audio>

多源引入音频

为了提高兼容性和稳定性,我们可以使用 source 标签来加载音频文件

如果当前浏览器支持第一个 source 引入的音频文件则播放,如果不支持则尝试播放下一个 source 引入的音频文件

<body>
    <audio controls>
        <source src="https://www.w3school.com.cn/i/horse.ogg" type="audio/ogg" />
        <source src="https://www.w3school.com.cn/i/horse.mp3" type="audio/mpeg" />
        您的浏览器不支持 audio 标签。
    </audio>
</body>

插入视频

video的用法和audio的用法类似,具体用法请参考audio

支持的视频格式如下:

视频格式MIME类型
*.oggvideo/ogg
*.mp4video/mp4
*.webmvideo/webm
<body>
    <video src="https://www.w3school.com.cn/i/movie.ogg" controls autoplay loop muted>
        您的浏览器不支持 video 标签。
    </video>
</body>

调整视频控件的尺寸

尺寸值为正整数,单位为px

<video src="..." controls width="500" height="500"> ... </video>

显示预览图

<video src="..." controls poster="https://www.yaconit.com/public/images/logo.png"> ... </video>

视频预加载设置

预加载说明
auto当页面加载后载入整个视频
meta当页面加载后只载入元数据
none当页面加载后不载入视频
<video src="..." controls preload="metadata"> ... </video>

预格式化

<pre>
	咏鹅
	
	鹅鹅鹅,
	曲项向天歌,
	白毛浮绿水,
	红掌拨清波。
</pre>

超链接

超链接是超文本链接的简称,意思是可以超出文本的限制进行链接,作用是实现页面与页面之间的跳转

跳转到指定页面

点击此连接,就会从当前页面跳转至 a.html 页面

<a href="a.html">a.html</a>

设置新页面打开的位置

在当前窗口下打开,会覆盖掉当前页面

<a href="..." target="_self">...</a>

在新窗口下打开,会打开一个新窗口或选项卡

<a href="..." target="_blank">...</a>

在指定的内联框架中打开,target 的值为内联框架的 name 属性值

<a href="" target="itop">...</a>

空连接

点击链接,不会有产生任何跳转

<a href="javascript:void(0)">...</a>

锚点和锚链接

可以在网页的某个位置设置一个锚点,然后通过锚链接跳转到锚点所在的位置

锚点是只有 name 属性的超链接

锚链接是href 属性包含 # 的超链接

单页跳转

<body>
    <a href="#t1">附表一</a>
    <a href="#t2">附表二</a>
    <a href="#t3">附表三</a>
    <a name="t1"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表一</caption>
    </table>
    <a name="t2"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表二</caption>
    </table>
    <a name="t3"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表三</caption>
    </table>
</body>

跨页跳转

<!-- nav.html -->
<body>
    <a href="a.html#t1">附表一</a>
    <a href="a.html#t2">附表二</a>
    <a href="a.html#t3">附表三</a>
</body>
<!-- a.html -->
<body>
    <a name="t1"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表一</caption>
    </table>
    <a name="t2"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表二</caption>
    </table>
    <a name="t3"></a>
    <table border="1" width="100%" height="1000">
        <caption>附表三</caption>
    </table>
</body>

功能性链接

发送邮件

<a href="mailto:邮箱地址">...</a>

拨打电话,在手机端有效

<a href="tel:电话号码">...</a>

文本标签

样式标签

样式标签都有特殊的样式,但他们没有具体的语义

<b>粗体文本</b>
<i>斜体文本</i>
<big>大号文本</big>
<small>小号文本</small>
<sup>上标文本</sup>
<sub>下标文本</sub>
<mark>有记号的文本</mark>
<bdo dir="rtl">文字从右向左显示</bdo>
<tt>等宽字体</tt>

语义化标签

语义化标签也许没有特殊的样式,但他们都表示了某种具体的含义

强调文本

<em>强调文本</em>
<strong>语气更为强烈的强调文本</strong>

被插入和删除的文本

del 被删除的文本

ins 被插入的文本,一般用来更正被del的文本

我今年<del>20</del><ins>18</ins>岁了

联系地址

<body>
    <h3>联系方式:</h3>
    <address>
        <p>地址:**省**市**区**路**号</p>
        <p>电话:12300000000</p>
        <p>邮箱:12345@**.com</p>
    </address>
</body>

引用

引用某个文献,,比如书记或杂志的标题

<body>
    <h1>文章标题</h1>
    <p>文字正文</p>
    <cite>——本文摘录自《读者》</cite>
</body>

引用一行内容

毛爷爷说过:<q>所有反动派都是纸老虎</q>

引用大段内容

<body>
    <p>以下文章摘自《读者》:</p>
    <blockquote>
        <p>来自《读者》的大段文摘...</p>
    </blockquote>
</body>

键盘按键

请使用<kbd>CTRL</kbd>+<kbd>C</kbd>进行复制

代码块

单行代码块

Java输出语句<code>System.out.print("Hello World");</code>

多行代码一般配合 pre 使用

<body>
    <h3>Java代码块:</h3>
    <pre>
        <code>
            public class HelloWorld{
                public static void main(String[] args){
                    System.out.print("Hello World");
                }
            }
        </code>
    </pre>
</body>

变量定义

一般用于需要用户输入的部分

一个简单的表达式: <var>x</var> = <var>y</var> + 2

缩写文本

<abbr title="Hyper Text Markup Language">HTML</abbr>

日期时间

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

分区标签

通用分区

块级分区

使用 div 对页面的某些标签进行包裹,配合CSS进行页面布局

<body>
    <div>
        ...
    </div>
</body>

行内分区

通过 span 包裹行内的某些文本,配合CSS进行样式调整

<body>
    <p>
        <span> ... </span>
    </p>
</body>

页面分区

头部

一般指整个页面或某个section的头部区域

<header> ... </header>

主体

一般指页面的主体部分

<main> ...</main>

脚部

一般指整个页面或某个section的尾部区域

<footer> ... </footer>

节段分区

所谓的节段标签,就是将一个HTML页面通过语义进行区域划分,使得整个HTML页面更具逻辑性。

body 定义了主节段,基于主节段,可以通过sectionarticleasidenav 来定义各个子节段。

文章内容节段

<body>
    <article>
        <h1>文章内容</h1>
        <p>正文内容...</p>
    </article>
</body>

可以为文章正文添加节段,更好的区分文章的每一个小节的范围

<body>
    <article>
        <h1>文章内容</h1>
        <section>
            <h2>第一节</h2>
            <p>正文内容...</p>
        </section>
        <section>
            <h2>第二节</h2>
            <p>正文内容...</p>
        </section>
    </article>
</body>

一般的文章页都有与文章内容不相干的侧边栏等区块,可以使用aside进行划分

<body>
    <article>
        ...
    </article>
    <aside>
        <h3>热门文章:</h3>
        <ul>
            <li>文章标题1</li>
            <li>文章标题2</li>
        </ul>
    </aside>
</body>

页面分区

nav一般用于导航,可以用于页面导航,也可以用于某篇文章的大纲导航

<body>
    <nav>
    	<a href="...">导航1</a>
    	<a href="...">导航2</a>
    	<a href="...">导航3</a>
    </nav>
    <section>
    	模块一
    </section>
    <section>
    	模块二
    </section>
    <footer>
    	页面底部
    </footer>
</body>

功能分区

添加页面样式

<head>
    <style> ... </style>
</head>

添加JavaScript脚本

<body>
    <script> ... </script>
</body>

模板

<body>
    <template> ... </template>
</body>

内联框架

可以将其他页面嵌入到当前页面中显示,一般用于后台页面布局或者广告显示

src 为默认打开的网页网址

<iframe src="http://www.yaconit.com"/>

调整内联框架的尺寸

尺寸的值为整数,单位为px

<iframe width="300" height="500" />

iframe 取名,和超链接的target属性配合使用

<body>
    <a href="http://www.yaconit.com/" target="site">YaconIT</a>
    <a href="http://www.baidu.com/" target="site">百度</a>
    <br/>
    <iframe name="site" width="100%" height="700"/>
</body>

表单标签

普通表单

form 标签规定了表单的范围,里面包裹了各种表单元素

action 属性为表单的提交地址,表单的内容都将提交到 action 所指向的地址

method 属性为表单提交的方式,一般情况下使用 post 方式,但也可以选择使用 get 方式

<form action="login.php" method="post">
    <p>
        <label for="account">账号:</label>
        <input type="text" id="account" name="account"/>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"/>
    </p>
    <p>
        <button type="submit">登陆</button>
    </p>
</form>

带附件上传的表单

如果需要文件上传,那么表单的提交类型一定要为post

enctype属性规定了发送到服务器之前应该如何对表单数据进行编码,默认编码方式为 application/x-www-form-urlencoded。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为“+”号,特殊符号转为 “ASCII HEX”值)。但是,在文件上传时,此属性的值必须为 multipart/form-data,就是不对字符进行编码。

<form action="update.php" method="post" enctype="multipart/form-data">
    <p>
        <label for="file">文件:</label>
        <input type="file" id="file" name="file" />
    </p>
    <p>
        <button type="submit">上传</button>
    </p>
</form>

表单元素

输入框

通用属性说明
type定义了单行文本输入框的类型
name定义了表单元素的名称,提交表单时,作为数据的标识
value定义了表单元素的默认值,提交表单时,作为数据的值

输入文本

<input type="text" name="account" value="ZhangSan"/>

如果为文本输入框,type 属性可以省略

<input name="..." value="..."/>

输入密码

<input type="password" />

输入邮箱

<input type="email" />

输入网址

<input type="url" />

输入电话

<input type="tel" />

输入数字

<input type="number" />

设置默认值

<input type="number" value="10" />

设置最大值、最小值

<input type="number" max="100" min="1" />

设置步长

<input type="number" min="0" step="10" />

输入时间日期

输入日期

<input type="date" value="2020-09-09"/>

输入时间

<input type="time" value="09:00" />

输入日期时间

<input type="datetime-local" value="2018-06-12T19:30" />

输入某年某月

<input type="month" value="2018-05" />

输入某年的第几周

<input type="week" value="2018-W18" />

颜色输入框

<input type="color" value="#FF0000" />

文本域

普通文本域

文本域没有value属性,value值就是标签内包含的内容

<textarea name="context">...</textarea>

设置文本与的尺寸

rows 为行数

cols 为列数

<textarea rows="5" cols="20">...</textarea>

设置文本域的换行行为

默认情况下,文本域中的文本在表单提交时是不换行的。

如果希望换行,则配置 wrap 属性为 hard,并且同时配置 cols 属性

<textarea wrap="hard" cols="20">...</textarea>

设置文本域的最大字数

maxlength 属性规定文本区域的最大长度(以字符计)。

<textarea maxlength="50">...</textarea>

选择框

单选按钮

默认情况下为非选中状态

<input type="radio" />

默认选中状态

<input type="radio" checked />

同组单选按钮

要将多个单选按钮设置到同组,只需把所有的单选框的name属性的值设置为一样即可

<input type="radio" name="sex" value=""/><input type="radio" name="sex" value=""/>

复选框

默认情况下,复选框是未选中状态

<input type="checkbox" />

默认选中状态

<input type="checkbox" checked />

同组复选框

<h4>请选择权限:</h4>
<input type="checkbox" name="permissions" value="1"/><input type="checkbox" name="permissions" value="2"/><input type="checkbox" name="permissions" value="3"/> 执行

滑块

<input type="range" main="100" min="0" value="10" step="10"/>

文件域

文件域有value属性,但不能给其赋予默认值,文件域的默认值由用户选择的文件路径决定,如果用户没有选择文件,则该值为空字符串,如果用户选择了多个文件,则该值表示第一个已选文件的路径

默认情况下,用户只能选择一个文件

<input type="file" />

让用户可以选择多个文件

<input type="file" multiple />

限制用户选择的文件类型

<input type="file" accept=".gif,.jpg,.png" />

下拉列表框

将一组数据以列表的形式展示,让用户进行选择

select 元素规定了列表的范围,它只有name属性,没有value属性

option 元素为列表的每一个可选项,它包含 value 属性

selectoption 组成了完整的下拉列表框

默认情况情况下,下拉列表框为单选模式

<select name="subject">
	<option value="1">语文</option>
	<option value="2">数学</option>
	<option value="3">生物</option>
</select>

多选模式

<select name="..." multiple>
    ...
</select>

设置可见选项的数目,默认只显示一个

<select name="..." size="5">
    ...
</select>

设置默认被选中的项

<select name="subject">
	<option value="1">语文</option>
	<option value="2" selected>数学</option>
	<option value="3">生物</option>
</select>

对选项进行分组

<select name="subject">
    <optgroup label="理科">
        <option value="1">物理</option>
        <option value="2">化学</option>
    </optgroup>
    <optgroup label="文科">
        <option value="3">历史</option>
        <option value="4">地理</option>
    </optgroup>
</select>

禁止选中某个分组

<select name="subject">
    <optgroup label="理科">
		...
    </optgroup>
    <optgroup label="文科" disabled>
        ...
    </optgroup>
</select>

按钮

普通按钮

此类按钮需要配合JavaScript进行使用,否则不会由任何作用

<input type="button" value="按钮"/>

提交按钮

此类按钮可以对表单进行数据提交

<input type="submit" value="提交"/>

图片按钮

以图片的形式显示按钮,需要指定图片源,点击此按钮可以提交表单数据

<input type="image" src="https://www.yaconit.com/public/images/logo.png" />

重置按钮

会将表单的数据重置为初始状态

<input type="reset" value="重置" />

隐藏域

不会在页面中显示,但是,可以进行表单数据的传递

使用隐藏域时,必须要设置 namevalue 属性,否则隐藏域将失去意义

<input type="hidden" name="id" value="1" />

标签

用于对表单元素进行说明

<p>
    <label for="pwd">密码</label>
	<input type="password" id="pwd" />
</p>

字段域

用于对表单元素进行区块划分

fieldset 为字段域的界限

legend 为字段域的文本说明

<form action="..." method="...">
    <fieldset>
        <legend>基本信息</legend>
        <p>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" />
        </p>
        <p>
            <label for="sex">性别:</label>
            <input type="radio" name="sex" value="0" /><input type="radio" name="sex" value="1" /></p>
    </fieldset>
    <fieldset>
        <legend>详细信息</legend>
        <p>
            <label for="phone">电话:</label>
            <input type="tel" id="phone" name="phone" />
        </p>
        <p>
            <label for="addr">住址:</label>
            <input type="text" name="addr" />
        </p>
    </fieldset>
</form>

禁用某个字段域

<form action="..." method="...">
    <fieldset>
        ...
    </fieldset>
    <fieldset disabled>
        ...
    </fieldset>
</form>

元素的特殊模式

禁用模式

用户不能填写数据,也不会被表单提交

<input disabled />
<select disabled>
    ...
</select>
<textarea disabled>...</textarea>

只读模式

用户不能填写数据,但可以被表单提交

<input readonly />

必填模式

用户必须填写数据,或者元素包含默认值

<input required />

占位提示符

当元素没有任何数据的时候,就会显示占位提示符中的文本,一旦用户填写了数据或者元素有默认值,则不显示

占位提示符只在 输入框 和 文本域 元素中有效,其他元素无效

<input placeholder="请填写..." />

模式匹配

用户输入的值必须满足指定的模式

只能在单行文本输入框中使用模式匹配

<input pattern="[A-Za-z]+" />

实体符号

常用符号

实体说明
&nbsp;空格
&copy;版权符号(©)
&amp;与符号(&)
&lt;小于号(<)
&gt;大于号(>)

更多符号

https://www.w3school.com.cn/tags/html_ref_symbols.html

网页配置

编码设置

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

视口设置

content属性可选值说明
width一个正整数或者字符串 device-width视口宽度,单位为px
height一个正整数或者字符串 device-height视口高度,单位为px
initial-scale一个0.010.0之间的正数定义设备宽度与视口大小之间的缩放比率
maximum-scale一个0.010.0之间的正数定义缩放的最大值;它必须大于或等于minimum-scale的值,不然会导不确定的行为发生。
minimum-scale一个0.010.0之间的正数定义缩放的最小值;它必须小于或等于maximum-scale的值,不然会导致不确定的行为发生。
user-scalable一个布尔值(yes 或者no如果设置为no,用户将不能放大或缩小网页。默认值为yes
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

网页信息设置

内容简介

<head>
    <meta name="description" content="博主从业十余年,现任国内知名软件培训学校讲师!博主致力于分享软件开发技术,技术面包含WEB全栈开发、Java全栈开发、Python全栈开发、PHP全栈开发教程,以及MySql、redis、Oracle等数据库教程,Linux服务器操作教程等等">
</head>

关键词

<head>
	<meta name="keywords" content="软件开发教程,WEB前端开发教程,Java全栈开发教程,WEB全栈开发教程,Python教程,PHP全栈开发教程">
</head>

作者信息

<head>
    <meta name="author" content="www.yaconit.com">
</head>

修订信息

<head>
    <meta name="revised" content"Yacon,2020/9/6"/>
</head>

编辑工具信息

<head>
    <meta name="generator" content="Visual Studio Code 1.48.2">
</head>

页面跳转

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="5;url=http://www.yaconit.com">
</head>

<body>
    <p>对不起,您访问的页面暂时不存在,5秒后,我们将为您跳转到首页!</p>
</body>
</html>

默认链接配置

给所有的链接设置默认的target属性

<html>
    <head>
       <base target="_blank" />
    </head>
    <body>
        <a href="http://www.yaconit.com/index.html">首页</a>
        <a href="http://www.yaconit.com/index.html">资讯</a>
    </body>
</html>

给所有的链接添加前缀

<html>
    <head>
        <base href="http://www.yaconit.com" />
    </head>
    <body>
    	<img src="/public/images/logo.png" />
    </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值