html常用标签

最新推荐文章于 2024-01-25 22:53:26 发布

PaigeWw

最新推荐文章于 2024-01-25 22:53:26 发布

阅读量284

点赞数

分类专栏： =====JavaWeb笔记===== Web基础

本文链接：https://blog.csdn.net/u013899738/article/details/48734693

版权

=====JavaWeb笔记===== 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Web基础

30 篇文章 0 订阅

订阅专栏

一年前学的，没怎么用都忘了。现在整理笔记做一下复习。

HTML————HyperText Markup Language
/*
注释：
空格： &npsp
<：&lt
>：&gt
&：&amp
*/
一、html的头标签
<title></title>
<meta/>：设置相关内容
<base/>
<link/>
二、html常见标签
1.<b></b> 加粗
2.<u></u> 下划线
3.<i></i> 斜体
4.<s></s> 删除线
5.<pre></pre> 远洋输出
6.<sub></sub> 下标
7.<sup></sup> 上标
================
div与span：划分区域
   <div></div>自动换行
   <span></span>不换行
三、列表标签
1.<dl></dl>：列表范围
    <dt></dt>：表头
    <dd></dd>：表的内容
代码：

	<dl>
		<dt>算法<dt>
		<dd>Bellman-Ford</dd>
		<dd>Dijkstra</dd>
		<dd>Floyd</dd>
		<dd>KMP匹配</dd>
		<dd>AC自动机</dd>
		<dd>容斥原理</dd>
	</dl>

2.<ol></ol>：有序列表
      ——type:设置排序方式
   <li></li>
3.<ul></ul>：无序标签范围
      ——type：前缀样式
    <li></li>
四、图像与超链接标签
<img/>
    ——src：地址
    ——width：宽
    ——height：高
    *——alt：鼠标放在图片上后出现的文字。
代码：

<img src="12978223538797.jpg" width="600" height="700"/>

<a><a/>
   ——href：路径
   ——target：设置打开方式
       ="_blank"：在新窗口打开
       ="_self"：在当前窗口打开（默认）
其它用途：定位资源
案例CSDN博客：回顶部
代码：

  <!--在回到位置--><a name="top"></a>
  <a href="#top">回顶部</a>

*************注意***************
—当a标签里面访问网络资源时，必须加一个http协议。
—当前浏览器里面找到相关协议，首先看这个协议是不是http。
   如果不是，就去本地找支持这个协议的应用。
五、表格标签
<table></table>
   ——border
       ="1"：有钱
   ——bordercolor：线颜色
   ——cellspacing：每格之间的距离
   ——width：宽
   ——height：高
     <caption></caption>：表格标题
     <tr></tr>：行
        ——align="right"：右对齐
   ——rowspan：跨行
     <td></td>或<th></th>（实现加粗和居中）：列
     合并单元格操作：
   ——colspan：跨列
   ——rowspan：跨行
代码：

	<table border="1" cellspacing="0">
	<caption>欧洲国家</caption>
	<tr>
	<th rowspan="9">欧洲国家</th><!-- <th colspan="4">欧洲国家</th> -->
	</tr>
	<tr>
	<td>德国</td><td>柏林</td><td>10月3日</td><td>矢车菊</td>
	</tr>
	<tr>
	<td>法国</td><td>巴黎</td><td>7月14日</td><td>鸢尾花</td>
	</tr>
	<tr>
	<td>丹麦</td><td>哥本哈根</td><td>4月16日</td><td>冬青</td>
	</tr>
	<tr>
	<td>挪威</td><td>雅典</td><td>3月25日</td><td>橄榄</td>
	</tr>
	<tr>
	<td>奥地利</td><td>维也纳</td><td>10月26日</td><td>火绒草</td>
	</tr>
	<tr>
	<td>意大利</td><td>罗马</td><td>6月2日</td><td>雏菊</td>
	</tr>
	<tr>
	<td>瑞士</td><td>伯尔尼</td><td>8月1日</td><td>火绒草</td>
	</tr>
	<tr>
	<td>捷克</td><td>布拉格</td><td>10月28日</td><td>玫瑰 </td>
	</tr>
	</table>

六、表单标签
<form></form>
    ——action：提交地址
    ——method：表单提交方式
       ="get"（默认）
       ="post"
       [get与post的区别]
        1.get请求地址栏回携带提交的数据，post不会
   2.get请求安全级别低，post较高
   3.get请求数据大小有限制，post没有限制
    ——name
      <input/>:输入项
          ——name
          ——type：输入类型
         ="text"：普通输入
         ="password"：密码输入
         ="radio"：单选项
            （同内单选项之间name要相同，此为默认选项时checked="checked"）
         ="checkbox"：可复选框
         ="file" ：文件
         ="hidden"：隐藏项
         ="submit"：提交按钮
         ="image"：图片提交
         ="reset"：重置
         ="button"：普通按钮
     <select></select>：下拉输入项
        <option></option>
       ——value：值
       ——selected="selected"（表示此为默认选项时）
     <textarea></textarea>
        ——cols：列 ——rows：行

代码：

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Document</title>
 </head>
 <body>
	<h1>欢迎加入我们</h1>
	<form>
		<table  cellspacing="12">
			<tr>
			<td align="right">邮箱</td><td><input size="25" name="email" type="text"/></td>
			</tr>
			<tr>
			<td align="right">密码</td><td><input size="25" name="key" type="tpassword"/></td>
			</tr>
			<tr>
			<td align="right">名号</td><td><input size="25" name="nickname" type="text"/></td>
			</tr>
			<td></td><td><font size="2" color="#808080">第一印象很重要，起个响亮的名号吧</font></td>
			</tr>
			</tr>
			<tr>
			<td align="right">性别</td>
			<td><input name="sex" type="radio" checked="checked" value="female"/>女    <input name="sex" type="radio" value="male"/>男</td>
			</tr>
			<tr>
			<td align="right">出生日</td>
			<td>
			<select name="year">
			<option value="1995">1997</option>
			<option value="1995">1996</option>
			<option value="1995">1995</option>
			<option value="1995">1994</option>
			<option value="1995">1993</option>
			<option value="1995">1992</option>
			</select> 年
			<select name="month">
			<option value="1995">1</option>
			<option value="1995">2</option>
			<option value="1995">3</option>
			<option value="1995">4</option>
			<option value="1995">5</option>
			<option value="1995">6</option>
			</select> 月
			<select name="day">
			<option value="1995">21</option>
			<option value="1995">22</option>
			<option value="1995">23</option>
			<option value="1995">24</option>
			<option value="1995">25</option>
			<option value="1995">26</option>
			</select> 日
			</td>
			</tr>
			<tr>
			<td align="right">手机号</td><td><input size="25" name="phone" type="text"/></td>
			</tr>
			<td></td><td><font size="2" color="#808080">用手机接受验证码</font></td>
			</tr>	
			<td align="right">验证码</td><td><input size="10" name="code" type="text"/><input type="button" value="获取验证码"/></td>
			</tr>
			<tr><td></td></tr>
			<tr><td></td></tr>
			<tr><td></td></tr>
			<tr>
			<td></td><td><input name="agree" type="checkbox"/><font size="2" color="#808080">我已经认真阅读并同意豆瓣的《<a href="#">使用协议</a>》。 </font></td>
			</tr>
			</tr>	
			<td></td><td><input type="submit" value="注册" style="height:40px;width:80px;color:#999;font-size:16px;font-weight:bolder;display:inline-block;"/></td>
			</tr>
		</table >
	</form>
	<br/>
    <p>2015/9/26</p>
 </body>
</html>

*七、框架标签
<frmeset></frameset>
        ——cols：列
   ——rows：行
     <frame/>
          ——nam
          ——src