<!DOCTYPE html><!--声明为html5文档，不区分大小写-->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta 基本的元数据，不显示在页面上，但会被浏览器解析-->
<meta name="author" content="weiyupeng">
<meta name="time" content="2023/6/18 11:40">
<!-- 设置每100秒刷新当前页面 -->
<meta http-equiv="refresh" content="100">
<title>头部</title>
<!-- 所有链接标签的默认链接 -->
<!-- <base href="http://www.baidu.com/" target="_blank"/>-->
<!-- 与外部资源的联系，如样式表 -->
<link rel="stylesheet" type="text/css" href="../css/demo01.css"/>
<!-- 直接加本页的全局渲染 -->
<style type="text/css">
body {
background-color: wheat;
}
p {
color: black;
}
</style>
</head>
<body><!--浏览器页面上的内容-->
<!--标题-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落-->
<p>段落1</p>
<p>段落2</p>
<!--链接-->
<a href="https://www.baidu.com">链接1</a>
<!--换行-->
<br/>
<br><!--可以不关闭，但是不建议这样-->
<!--basic属性(公共属性)-->
<p class="pp11" id="pp111" style="background-color:#ffff00; font-size: 30px" title="title123123">p321</p>
<!--
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)，鼠标悬浮展示文字气泡
-->
<!--水平线-->
<hr/>
<!--多余的空格变成了一个空格-->
<p> 段 落 2 </p>
<!--折行-->
<p>这是个<br/>折行<br/>段落</p>
<!--文本格式化-->
<p>
<b>加粗字体</b>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
普通字<sub>下标</sub>
普通字<sup>上标</sup>
<ins>下划线</ins>
<del>删除字</del>
</p>
<!--计算机输出标签-->
<p>
<code>print("代码区域");</code>
</p>
<kbd>键盘输入</kbd>
<p>
<samp>代码样本</samp><br/>
<var>变量</var>
</p>
<!--预格式文本 不缩减空格和换行-->
<pre>预格式文本 a
b c d e
</pre>
<!--引文, 引用, 及标签定义-->
<p>
<abbr title="缩写">SX</abbr>
</p>
<address>地址:北京市海淀区</address>
<pre>
该段落文字从左到右显示
<bdo dir="rtl">该段落文字从右到左显示</bdo>
</pre>
<!--长引用:一个有缩进的段落，鼠标悬停并没有引用地址的展示-->
<blockquote cite="www.baidu.com">
长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用长引用
</blockquote>
<p>
<!--只是加了一个双引号，但是无法被鼠标选中及复制-->
普通文字<q>短引用</q>普通文字<br/>
<!--一般用来定义作品的标题-->
普通文字<cite>引用、引证</cite>普通文字<br/>
<dfn>定义项目</dfn><br/>
</p>
<!--链接-->
<a href="https://www.baidu.com/">百度链接</a>
<a href="https://www.baidu.com/" target="_self">百度链接</a><!--默认覆盖原来窗口-->
<a href="https://www.baidu.com/" target="_blank">百度链接</a><!--新页面-->
<a href="https://www.baidu.com/" target="_parent">百度链接</a><!--覆盖原来窗口-->
<a href="https://www.baidu.com/">
图片链接<img border="2" src="../image/logo.png" alt="图片链接" width="64" height="32">
</a><br/>
<a href="mailto:13261985829@163.com?Subject=vue" target="_top">
发送邮件（邮件主题为vue）
</a><br/>
<a href="mailto:收件人@1.com?cc=抄送@1.com&bcc=秘密抄送@1.com&subject=主题&body=正文" >
发送邮件!
</a>
<br/><br/>
<!--文档书签-->
<a id="tip1">提示1提示1提示1提示1提示1提示1提示1</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#tip1">点击跳转到提示1</a><br/>
<a href="http://localhost:63342/vue-study/static/html/demo01.html#tip1">
点击跳转到另一个网页的提示1（此处都在一个demo里演示）
</a>
<!--内联css-->
<p style="color:#ff00c8;margin-left:200px;background-color:chartreuse">段落</p>
<h2 style="color:#ff00c8;background-color:chartreuse">标题2</h2>
<h3 style="font-family: 'Baskerville Old Face';color: red;font-size: 30px">标题3</h3>
<h1 style="text-align: center">居中标题1</h1>
<p>
<!-- 控制整个块 -->
<style type="text/css">
body {background-color: darkgrey}
p {color: chocolate}
</style>
普通字 <b>加粗字体</b>
<em>着重文字</em>
<i>斜体字</i>
</p>
<!--图像-->
<img id="img1" src="../image/logo.png" decoding="async" width="400" height="100" alt="图片的替代描述文本"/>
<img src="wrongPath/logo.png" decoding="sync" width="200" height="200" alt="图片的替代描述文本"/>
<!--decoding 解码方式，同步/异步，浏览器一般默认同步，异步解码图像能加快显示其他内容-->
<br/><br/>
<!--图像映射-->
<img src="../image/logo.png" width="400" height="200" usemap="#logo" alt="vue-logo">
<map name="logo">
<area shape="rect" coords="0,0,50,50" alt="baidu" href="https://www.baidu.com/">
<area shape="circle" coords="200,150,25" alt="this" href="demo01.html">
<area shape="poly" coords="200,50,400,50,300,0" alt="this" href="demo01.html">
</map>
<!--表格-->
<table border="50" bgcolor="#228b22" cellpadding="20">
<colgroup>
<col span="2" style="background-color: yellow"/>
</colgroup>
<caption>表头</caption>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></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>
</tr>
<tr>
<td>行4，列1</td>
<td colspan="2" align="center">行4，列23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
<!--无序列表-->
<ul>
<li>星期一</li>
<li>星期二</li>
</ul>
<!--有序列表-->
<ol>
<li>星期一</li>
<li>星期二</li>
</ol>
<!--自定义列表-->
<dl>
<dt>星期一</dt>
<dd>- work</dd>
<dd>- study</dd>
<dd>- sleep</dd>
<dt>星期二</dt>
<dd>- work</dd>
</dl>
<br/><hr/><br/>
<!--区块元素-->
<!--里边没东西，那就啥也没有显示出来-->
<div style="background-color: forestgreen">
</div>
<div style="background-color: coral">
<h1>标题</h1>
<p>paragraph1</p>
<div style="background-color: yellow">
<h1>标题</h1>
<p>paragraph2</p>
</div>
<div style="background-color: #42b983">
<h1>标题</h1>
<p>paragraph3</p>
</div>
<p>paragraph4</p>
</div>
<!--span内联元素-->
<p>普通文字<span style="color:blue">span修饰的蓝色文字</span>普通文字</p>
<!--div布局-->
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;text-align: center">title</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<h1>menu</h1>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里内容在这里
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
footer
</div>
</div>
<br/>
<!--表格布局-->
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500; text-align: center">
<h1>title</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<h1>menu</h1>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
footer
</td>
</tr>
</table>
<!--表单-->
<form name="submit" action="demo02.html" method="get">
<pre>用户名</pre><input type="text" name="user"/><br/>
<pre>密 码</pre><input type="password" name="pwd"/><br/>
<!-- 单选按钮 -->
<input type="radio" name="choose" value="a">A
<input type="radio" name="choose" value="b">B<br>
<!-- 复选框 -->
<input type="checkbox" name="choose" value="work">work<br>
<input type="checkbox" name="choose" value="work" checked>sleep<br>
<input type="checkbox" name="choose" value="work">study<br>
<!-- 下拉列表 -->
<select name="week">
<option value="1">monday</option>
<option value="2">tuesday</option>
<option value="3" selected>friday</option>
</select><br><br>
<!-- 文本框 -->
<textarea rows="10" cols="30">
请输入
</textarea><br>
<!-- 分组分类单选 -->
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select><br>
<!-- 创建按钮 -->
<input type="button" value="Hello world!"><br>
<!-- 快速查找可能值，contains输入的字符串才会显示之 -->
<input list="alphabet" name="alphabet">
<datalist id="alphabet">
<option value="aaaa">
<option value="aaab">
<option value="bbcc">
<option value="abcc">
<option value="bacc">
</datalist><br>
<!-- 提交按钮 -->
<input type="submit" value="submit">
</form><br>
<!--表单发邮件-->
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<legend style="text-align: center">带边框的form</legend>
<fieldset>
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" value="内容" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</fieldset>
</form>
<!-- input output -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<!-- range 滑动条 -->
500<input type="range" id="a" value="600" min="500" max="1000">1000
<!-- 数字输入框 -->
+<input type="number" id="b" value="100">
=<output name="x" for="a b">700</output>
</form><br>
<!--框架 网页里套网页-->
<iframe loading="lazy" src="demo02.html" width="200" height="200"></iframe><br>
<!--去掉边框-->
<iframe src="demo02.html" frameborder="0"></iframe><br>
<!--显示链接页面-->
<iframe name="iframe_a"></iframe>
<p><a href="https://www.bilibili.com" target="iframe_a" rel="noopener" width="800" height="400">bilibili</a></p>
<!--颜色-->
<!--脚本-->
<!--script用来定义脚本，noscript无法执行脚本的替代方案-->
<script>
document.write("Hello world\n")
function printHello() {
document.getElementById("hello").innerHTML="Hello";
}
function print123() {
document.getElementById("hello").innerHTML="123";
}
</script>
<noscript>不支持script脚本哦</noscript><br>
<p id="hello">123</p>
<button type="button" onclick="printHello()">点击123变成Hello</button>
<button type="button" onclick="print123()">点击Hello变成123</button>
<!--字符实体 虽然html不区分大小写，但实体字符对大小写敏感-->
<!-- 大于号 小于号 -->
<p><>≥≤</p>
<!--版权©-->
©
<!--注册商标®-->
®
<!--商标™-->
™
<!--乘号× 除号÷-->
× ÷
</body>
</html>
