<!DOCTYPE html><!--声明为HTML5文档-->
<html lang="en">
<head><!-- 页面表头上的操作-->
<meta charset="UTF-8"><!-- 定义网页编码格式为utf-8-->
<meta name="author" content="chunfang"><!--定义网页作者-->
<!-- <meta http-equiv="refresh" content="30"><!–每30秒钟刷新当前页面–>-->
<link rel="shortcut icon" href="./img/timg.jpg"><!--左侧显示logo图片-->
<title>Title</title><!-- 文档页面上的标题-->
<!-- <base href="https://www.baidu.com" target="_blank">-->
<!-- <link rel="stylesheet" type="text/css" href="mystyle.css">--><!--定义文档与外部资源之间的关系，通常用于链接到样式表-->
<!-- <style type="text/css">--><!--样式文件引用地址，直接添加样式渲染HTML文档-->
<!-- body {
<!-- p {color: blue}-->
<!-- </style>-->
</head>
<body><!-- 可见的页面内容-->
<header><!--定义文档页眉信息-->
<p>段落</p>
<h1>一级标题</h1>
</header>
<h1 style="text-align:center;">我的第一个标题</h1><!-- h1-h6定义大标题，其中h1最大，h6最小，浏览器会自动地在标题的前后添加空行;居中标题-->
<font size="6">这是6号字体文本</font>
<h2>我的第一个标题</h2>
<font size="5">这是5号字体文本</font>
<h3>我的第一个标题</h3>
<p style="color: blue;margin-left: 20px;">我的第一个段落我的第一个段落<br>我的第一个段落我的第一个段落我的第一个段落我的第一个段落我的第一个段落我的第一个段落12121213
我的第一个段落我的第一个段落我的第一个段落<br>我的第一个段落我的第一个段落我的第一个段落我的第一个段落我的第一个段落6666666
我的第一个段落我的第一个段落<br>我的第一个段落我的第一个段落<br>我的第一个段落我的第一个段落我的第一个段落我的第一个段落777777
</p><!-- 一个段落，自动换行，浏览器会自动在段落前后添加空行，这是一个块级元素-->
<hr style="background-color: red"><!--在页面中创建水平线，可用于分隔内容-->
<p>这是另一个段落</p>
<a href="#baidu" style="text-decoration: none; color:red;">跳转到“这是一个链接”</a><!--在href属性中指定链接地址，没有下划线的链接；a标签修改其颜色特性，只能用内联方式，即直接修改s标签的特性才可-->
<br><!--表示的是换行，在所有浏览器中都是有效的-->
<!-- <center>-->
<a href="https://www.baidu.com" target="_blank">
<p style="text-align:center;"><!--将图片居中两种方法：1、用这个段落标签p，设置p标签居中，包裹图片标签；2、用居中标签center包裹图片标签-->
<img border="5" src="./img/timg.jpg" alt="这是一个美丽的图片" width="500" height="300" /><!--border给图片加上一个边框；注意图片的路径，设置图片的宽高-；alt是用来为图像定义一串预备的可以替换的文本，当浏览器无法载入图像时，替换文本的属性告诉读者他们失去的信息-->
</p>
</a>
<!-- </center>-->
<br>
<a id="baidu" href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">这是一个连接</a><!--将target属性设置为_blank，链接将在新窗口打开-->
<hr>
<table border="1" cellpadding="10" cellspacing="0"><!--border表格边框有无和大小；cellpadding单元格内容和边框之间的距离；cellspacing单元格之间的距离-->
<caption>表格标题名</caption>
<tr><!--表格有多少行用tr标签-->
<th>表头1</th><!--表头显示粗体居中-->
<th colspan="2">表头2</th> <!--单元格跨两列-->
</tr>
<tr>
<td>第一行，第一列</td><!--表格有多少单元格用td标签-->
<td>第一行，第二列</td>
<td>第一行，第三列</td>
</tr>
<tr>
<td rowspan="2">第2行，第一列</td><!--单元格跨两行-->
<td>第2行，第二列</td>
</tr>
<tr>
<td>第3行，第二列</td>
</tr>
</table>
<hr>
<h4>不同类型的有序编号列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>凌檬</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A"><!--小写字母列表：a；罗马数字列表：I；小写罗马数字列表：i-->
<li>苹果</li>
<li>香蕉</li>
<li>凌檬</li>
</ol>
<h4>圆点无序列表：</h4>
<ul style="list-style-type: disc"><!--圆圈列表：circle；正方形列表：square-->
<li>苹果</li>
<li>香蕉</li>
<li>凌檬</li>
</ul>
<h4>自定义列表：</h4>
<dl>
<dt>一级标题1</dt>
<dd>--二级标题</dd>
<dd>--二级标题</dd>
<dt>一级标题1</dt>
</dl>
<hr>
<div id="container" style="width: 500px"><!--简单的页面布局，div标签，不建议使用table-->
<div id="header" style="background-color: #FFA500;">
<h1 style="margin-bottom: 0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
<b>菜单</b><br>
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;">
版权 © © ® chunfang <!--©这是一种实体字符：https://www.runoob.com/html/html-entities.html-->
</div>
</div>
<hr>
<form action="demo.php" method="post"><!--表单数据被发送到服务器上的demo.php-->
<fieldset><!--表单添加一个边框-->
<legend>边框线上加上的一行字</legend>
<div>
First name: <input type="text" name="firstname" value="chun"><br><!--文本输入，默认文本框中的值-->
Last name: <input type="text" name="lastname"><!--文本输入，默认宽度20个字符-->
</div>
<div>
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password"><!--密码不会明文显示-->
</div>
<div>
<input type="radio" name="sex" value="male">Male<br><!--表单单选框选项-->
<input type="radio" name="sex" value="female" checked="checked">Female<!--表单单选框选项，默认勾选-->
</div>
<div>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><!--表单复选框-->
<input type="checkbox" name="vehicle" value="Car" checked="checked">I have a car<!--表单复选框，默认勾选-->
</div>
<div>
<select name="firuts"><!--下拉列表-->
<option value="apple">苹果</option>
<option value="banan">香蕉</option>
<option value="orang">橘子</option>
</select>
<select name="firuts1"><!--下拉列表，默认选哪个-->
<option value="apple">苹果</option>
<option value="banan">香蕉</option>
<option value="orang" selected>橘子</option>
</select>
</div>
<div>
<textarea rows="10" cols="30">这是一个文本框</textarea>
</div>
<div>
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="reset" value="重置"><!--全部填写的值都还原成默认值-->
</div>
</fieldset>
</form>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain"><!--表单发送电子邮件-->
Name:<input type="text" name="name" value="your name"><br>
E-mail:<input type="text" name="mail" value="your email"><br>
Content:<input type="text" name="content" value="your content"><br>
<input type="submit" value="发送">
</form>
<form action="demo.php" method="post"><!--预先定义一个输入控件的选项列表-->
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="IE">
<option value="firefox">
<option value="Chrome">
<option value="就是浏览器">
</datalist>
<input type="submit">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><!--页面定义一个计算结果-->
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
<input type="reset">
</form>
<hr>
<iframe src="img" name="iframe_a" frameborder="1" width="500" height="300"></iframe><!--链接的页面显示在这个框架中-->
<p>
<a href="https://www.baidu.com" target="iframe_a">
百度一下
</a>
</p><!--a标签的target属性名是iframe_a，点击链接时页面会显示在iframe框架中-->
<hr>
<h1>JavaScript简单应用</h1>
<p id="demo">点击按钮可以改变这个段落文字</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML="这是改变页面那段文字的值";
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变文字样式
}
</script>
<button type="button" onclick="myFunction()">点击改变文字</button>
</body>
</html>
浙公网安备 33010602011771号