<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html基础标签</title>
<!-- 为网页定义描述内容: -->
<!-- <meta name="description" content="免费在线教程"> -->
<!-- 为搜索引擎定义关键词: -->
<!-- <meta name="keywords" content="HTML,CSS,XML,JavaScript"> -->
<!-- 定义网页作者: -->
<!-- <meta name="author" content="runoob"> -->
<!-- 每30秒钟刷新当前页面: -->
<!-- <meta http-equiv="refresh" content="30"> -->
<!-- 使用 <base> 定义页面中所有链接默认的链接目标地址。 -->
<!-- <base href="http://www.runoob.com/images/" target="_blank"> -->
<!-- 导入CSS文件 -->
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<p style="font-size:150%;color:red;">w ai ni </p>
<a href="apply.html" target="_blank"><img src="./image/1.jpg"></a>
<input type="image" src="../520/share.png" /> -->
点击上传图片
<label for="File1" style="display:block" id="Label1"></label> 添加点击背景图
<input id="File1" type="file" style="display:none;" accept="image/gif,image/jpeg,image/jpg,image/png"> 只允许上传图片或gif
<input id="File1" type="file" multiple="multiple" style="display:none;"> 上传多张图片
<!-- 表单 -->
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" placeholder="请输入姓名" maxlength="4" size="15"><br><br>
Password: <input type="password" name="password" size="15"><br>
单选按钮：<input type="radio" name="bottom" value="China" checked="checked">同意<br>
复选按钮：<input type="checkbox" name="select">I have<br>
<input type="button" value="Hello world!"><br>
<button type="button">按钮</button><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="../520/share.png" />
</form>
<p>点击提交按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。</p>
<!-- 文本框 -->
<textarea rows="10" cols="30">弱提示</textarea>
<!-- 预选下拉列表 -->
<form action="">
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
</select>
</form><br>
<!-- 下拉框内子分类 -->
<select>
<optgroup label="1">
<option value="1-1">1-1</option>
<option value="1-2">1-2</option>
</optgroup>
<optgroup label="2">
<option value="2-1">2-1</option>
<option value="2-2">2-2</option>
</optgroup>
</select>
<br><br>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
<!-- 表格 -->
<!-- HTML表格,每个表格从一个table 标签开始。 每个表格行从tr标签开始。每个表格的数据从td标签开始 -->
<!-- td即数据单元格：可包含数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等 -->
<pre>
属性：
border="0"：无边框；1（表单有边框）
th:表单内文本加粗；
<caption>表格标题</caption>
colspan="2"：跨两格；
rowspan="2"：列合并；
表单内套列表u1->li；
cellpadding="10"：单元格与文本距离
cellspacing="10":单元格与边框距离
vertical-align:top（文本置顶显示）
text-align:center（文本居中显示）
</pre>
<!-- thead：表格的页眉；tbody：表格的主体；tfoot：定义表格的页脚 -->
<!-- 标准格式 -->
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
<!-- 案例 -->
<table border="1" cellspacing="3">
<caption class="header">表格标题</caption>
<tr>
<th colspan="2">Name</th>
<th style="width:70px;">age</th>
<th>gender</th>
</tr>
<tr>
<td rowspan="2">
<ol type="A">
<li>jack</li>
<li>lazy</li>
</ol>
</td>
<td style="vertical-align:top">置顶显示</td>
<td style="text-align:center;">居中显示</td>
<td>单元格包含一个表格
<table border="1" cellpadding="10" cellspacing="3">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>文本与边框间距</td>
<td colspan="2" style="text-align:center;">文本显示</td>
</tr>
</table>
<!-- 列表，无序列表u1，有序列表o1 -->
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
</ol>
<!-- <h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<h4>正方形列表：</h4>
<ul style="list-style-type:square"> -->
<!-- 矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url> -->
<!-- shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标 -->
<!-- <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> -->
<!-- HTML部分 -->
<pre>属性：
h1：标题
p: 段落
br: 换行
b: 字体加粗
small: 字体缩小
big：字体放大
i：文本倾斜
sub：下标
sup：上标
del：删除线
ins：下划线
</pre>
<!-- 跳转到指定位置 -->
<p><a href="#C4">查看章节 4</a></p>
<h2><a id="C4">章节 4</a></h2>
<font size="2">这是2号字体文本</font><br/>
<p><bdo dir="rtl">该段落文字从右到左显示</bdo></p>
<!-- 实现缩写或首字母缩写,把鼠标移至缩略词语上时，展示表达的完整版本 -->
<abbr title="etcetera">etc.</abbr><br/>
<acronym title="World Wide Web">wwe</acronym>
<!-- 实现长短不一的引用语 -->
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<!-- 跳出框架，跳至页顶 <a>定义一个超链接-->
<a href="file://E:/program/HTML_teach/HTML.html" target="_top" style="text-decoration:none;">这是个链接</a><br/>
<a href="http://www.baidu.com/" target="_blank"> <img border="1" src="file:\\E:\\program\\html_teach\\image\\1.jpg" alt="text"></a>
</body>
</html>
HTML基础整理
猜你喜欢
转载自blog.csdn.net/qq_28905427/article/details/80701690
今日推荐
周排行