开发环境
开发工具
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>
标题、段落、水平线
标题共有六级,分别为:h1
、h2
、h3
、h4
、h5
和h6
,h1
字号最大,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>
设置单元格的排版方式
align
和valign
的值,参考行数据的排版方式
<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类型 |
---|---|
*.ogg | audio/ogg |
*.mp3 | audio/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类型 |
---|---|
*.ogg | video/ogg |
*.mp4 | video/mp4 |
*.webm | video/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
定义了主节段,基于主节段,可以通过section
、article
、aside
和 nav
来定义各个子节段。
文章内容节段
<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
属性
select
和 option
组成了完整的下拉列表框
默认情况情况下,下拉列表框为单选模式
<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="重置" />
隐藏域
不会在页面中显示,但是,可以进行表单数据的传递
使用隐藏域时,必须要设置 name
和 value
属性,否则隐藏域将失去意义
<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]+" />
实体符号
常用符号
实体 | 说明 |
---|---|
| 空格 |
© | 版权符号(©) |
& | 与符号(&) |
< | 小于号(<) |
> | 大于号(>) |
更多符号
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.0 到10.0 之间的正数 | 定义设备宽度与视口大小之间的缩放比率 |
maximum-scale | 一个0.0 到10.0 之间的正数 | 定义缩放的最大值;它必须大于或等于minimum-scale 的值,不然会导不确定的行为发生。 |
minimum-scale | 一个0.0 到10.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>