html5

最新推荐文章于 2023-03-16 17:01:16 发布

樊尘大大怪

最新推荐文章于 2023-03-16 17:01:16 发布

阅读量637

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/weixin_45027950/article/details/108864118

版权

开发环境

开发工具

VSCode下载地址

https://code.visualstudio.com/

常用快捷键

格式化：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" />

字段域

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

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>

樊尘大大怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
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+SHI
复制链接

扫一扫