You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
3.7 KiB
160 lines
3.7 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
<p>你好</p>
|
|
<br>
|
|
zzz
|
|
<hr width="1000px" size="5px" align="center">
|
|
<img src="1.jfif" alt="这是一个风景图" title="fenhgjing" width="300px">
|
|
<!-- 路径分为相对和绝对路径
|
|
绝对路径从盘符开始访问
|
|
相对路径分为
|
|
子级关系 /
|
|
同级关系 ./
|
|
父级关系 ../
|
|
-->
|
|
|
|
<h3>超链接</h3>
|
|
<a href="https://www.baidu.com"><img src="./1.jfif" width="300px"></a>
|
|
|
|
<h3>文本标签</h3>
|
|
<em>斜体且着重文字</em>
|
|
<i>斜体</i>
|
|
<b>粗体</b>
|
|
<strong>加重加粗</strong>
|
|
<del>删除字</del>
|
|
<span>空标签</span>
|
|
|
|
<h3>有序列表</h3>
|
|
<ol>
|
|
<li>水果
|
|
<ol type="A"
|
|
<li>苹果</li>
|
|
<li>桃子</li>
|
|
<li>栗子</li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
蔬菜
|
|
<ol type="a">
|
|
<li>白菜</li>
|
|
<li>青菜</li>
|
|
<li>油菜</li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
肉类
|
|
<ol type="I">
|
|
<li>zhurou</li>
|
|
<li>NIUROU</li>
|
|
<li>yangrou</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>无序列表</h3>
|
|
<!-- 快捷键 ul>li*n -->
|
|
<ul type="disc">
|
|
<li>shucai
|
|
<ul type="circle">
|
|
<li>1</li>
|
|
<li>2</li>
|
|
<li>3</li>
|
|
</ul>
|
|
</li>
|
|
<li>shuiguo
|
|
<ul type="square">
|
|
<li>45</li>
|
|
<li>5</li>
|
|
<li>66</li>
|
|
</ul>
|
|
</li>
|
|
<li>roulei
|
|
<ul>
|
|
<li>22</li>
|
|
<li>33</li>
|
|
<li>44</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>表格</h3>
|
|
<!-- 快捷键 table>tr*3>td{单元格} -->
|
|
<table border="1" wigth="600" height="300">
|
|
<tr>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>表格合并</h3>
|
|
<table border="1" wigth="900" height="300">
|
|
<tr>
|
|
<td colspan="2">单元格1</td>
|
|
<td rowspan="2">单元格3</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" rowspan="2">单元格4</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单元格9</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单元格9</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
<td>单元格</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>表单</h3>
|
|
<form action="">
|
|
<input type="text" value="请输入文本">
|
|
<input type="submit"><br>
|
|
<input type="password" value="请输入密码">
|
|
<input type="submit" value="登录">
|
|
</form>
|
|
</body>
|
|
|
|
<!-- 块级元素和行内元素 -->
|
|
<!-- 常见块级元素： div,form,h1,hr,p,table, ul,ol等 独占一行，可以设置宽高，可以包含行内元素和其他块级元素 -->
|
|
<!-- 常见行内元素：a,b,em,strong,span等 不能独占一行，只能设置宽，一般不包含块级元素 -->
|
|
|
|
<div id="header"></div>
|
|
<div id="nav"></div>
|
|
<div id="areticle">
|
|
<div id="section"></div>
|
|
</div>
|
|
<div id="sidebar"></div>
|
|
<div id="footer"></div>
|
|
|
|
<!-- html新特性 -->
|
|
<header></header>
|
|
<nav></nav>
|
|
<article>
|
|
<section></section>
|
|
</article>
|
|
<aside></aside>
|
|
<footer></footer>
|
|
</html>
|