<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<!-- bgcolor设置背景色 background 设置背景图片 -->
<body <!-- bgcolor="darkgoldenrod" --> <!-- background="img/QQ截图20201212230032.png" -->>
<!-- 段落标签 -->
<p>
永和九年，时在癸丑之年，三月上旬，我们会集在会稽郡山阴城的兰亭，为了做禊礼这件事。诸多贤士能人都汇聚到这里，年长、年少者都聚集在这里。兰亭这个地方有高峻的山峰，茂盛高密的树林和竹丛；又有清澈激荡的水流，
在亭子的左右辉映环绕，我们把水引来作为飘传酒杯的环形渠水，排列坐在曲水旁边，虽然没有管弦齐奏的盛况，但喝着酒作着诗，也足够来畅快表达幽深内藏的感情了。
</p>
<!-- 标题标签 -->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<!-- 独目标签 -->
hello <br/> world
<hr/>
<hr color="aqua" width="50%">
<hr color="blue " width="100%"/>
<del>删除字</del>
<ins>插入字</ins>
<b>斜体字</b>
<i>斜体字</i>
10<sup>2</sup> 10<sub>m</sub>
<font color="red" size="4">字体标签</font>
<!-- 实体符号 > <,  -->
b<a> c
<!-- 表格 -->
<table border="1px" width="20%" height="20%" align="center">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</table>
<!-- 表格合并 -->
<table border="1px" width="40%" height="40%" align="center">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">fx</td>
</tr>
<tr>
<td colspan="2">xd</td>
</tr>
</table>
<!-- 表格 thead tbody tfoot 便于javaScript-->
<table border="1px" width="20%" height="20%" align="center">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr>
<th>d</th>
<th>e</th>
<th>f</th>
</tr>
</tbody>
<tfoot>
<tr>
<th>x</th>
<th>y</th>
<th>z</th>
</tr>
</tfoot>
</table>
<!-- 背景元素，背景符号 --
title 鼠标悬停是显示>
alt 图片加载失败显示 -->
<img src="img/QQ截图20201212230032.png" width="300px" title="流水" alt="图片加载失败"/>
<br /><br /><br />
<img src="img/QQ截图20201212230702.png" width="300px" title="高山" alt="图片加载失败"/>
<br />
<!-- 超链接 行内元素-->
<a href="https://www.baidu.com">百度网站</a>
<a href="https://www.runoob.com/js/js-validation-api.html">javaScript</a>
<br />
<!-- target属性
_self 自身窗口
_blank 新窗口
_top 顶级窗口
_parent 父窗口
-->
<a href="https://www.baidu.com" target="_self">
<img src="img/QQ截图20201212232249.png" />
</a>
<!-- 有序列表 -->
<ul type="square">
<li>中国
<ul>
<li>上海</li>
<li>北京</li>
<li>西安</li>
</ul>
</li>
<li>美国</li>
<li>韩国</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>中国
<ol type="a">
<li>上海</li>
<li>北京</li>
<li>苏州</li>
</ol>
</li>
</ol>
<!-- 表单******** button不具备提交表单的能力 -->
<table border="3px" width="20%" height="20%" align="center">
<tr>
<td>用户名</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="登陆"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
<form action="https://www.baidu.com" method="post">
用户名
<input type="text" name="username"/>
<br />
密码
<input type="password" name="password"/>
<br />
确认密码
<input type="password"/> <br />
性别
<!-- 单选按钮必须加value checked默认选中-->
<input type="radio" name="gender" value="1" checked /> 男
<input type="radio" name="gender" value="0"/> 女
<br />
兴趣爱好
<!-- 复选框 -->
<input type="checkbox" name="interest" value="篮球"/> 篮球
<input type="checkbox" name="interest" value="乒乓球"/>乒乓球
<input type="checkbox" name="interest" value="街舞"/>街舞
<!-- 下拉框 -->
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option>
<option value="sh">硕士</option>
</select>
<br />
简介
<textarea rows="10" cols="10" name="introduce"></textarea>
</form>
<!-- 下拉列表支持多选 -->
<select name="0" multiple="multiple" size="2">
<option>北京</option>
<option>西安</option>
<option>南京</option>
<option>宝鸡</option>
</select>
<br />
<!-- file标签 -->
<input type="file"/>
<!-- 隐藏域控件 -->
<form action="https://www.baidu.com">
<input type="hidden" name="sex" value="男">
</form>
<!-- readonly和disable相同点，都是只读不可修改
但是readonly可以提交到服务器，而disable不可以 -->
<form action="https://www.baidu.com">
用户姓名 <input type="text" name="username" value="luoyi" readonly /><br />
用户代码 <input type="text" name="usercode" value="110" disabled /><br />
<input type="submit" value="提交数据"/>
</form>
<!-- 设置输入文本的最大字符数量 -->
<input type="text" maxlength="10"/>
<!-- 1，在html中任何元素都有id属性，所以在同一个html文档中id不能重复 -->
<!-- div和span
div和span都是图层
div和span是可以定位的，只要定下div的左上角的x和y轴即可
div独占一行
span不会独占一行-->
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<span id="span1">我是span1</span>
<span id="span2">我是span2</span>
<!-- 预留格式 -->
<pre>
#include<stdio.h>
for(int i = 0; i < 10; ++i){
printf("hello world");
}
</pre>
</body>
</html>
扫一扫
6514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
