（前端）HTML之基本标签02

最新推荐文章于 2023-02-16 14:42:01 发布

Gorgeous_Tang

最新推荐文章于 2023-02-16 14:42:01 发布

阅读量886

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_65479202/article/details/124255000

版权

1. 超链接的使用 <a>
   1.1 属性href：超链接地址

1.2 可以本地之间的跳转也可以网页之间的跳转

   1.3 属性:target：跳转模式--
       _blank:新窗口
       _self: 本窗口（默认）

示例：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<a href="span.html" target="_blank">灿坤蒸气电熨斗</a>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>dl和dt的应用</title>
</head>
<body>
<dl>
  <dt><img src="images/iron.jpg" alt="灿坤蒸气电熨斗" /></dt>
  <dd>商品名称：灿坤蒸气电熨斗</dd>
  <dd>商品价格：<span style="color:red;font-size:25px;">388</span>元</dd>
  <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd>
</dl>
</body>
</html>

2 .文件的绝对路径和相对路径的使用
       2.2.1 绝对路径：完整的地址（路径）
       2.2.2 相对路径：
           html文件与图片处于同一目录下
           图片在html文件的上级目录
           图片在html文件的下级目录
               图片在html文件的上上级目录


上上级目录
../web1.html


<a href="../web1.htm">上级目录</a>
<a href="../../web2.htm">上上级目录</a>

3 .锚链接(页面间，跨页面调用锚链接)===跳转页面后加上#名称

同页：


<!DOCTYpE html pUBliC "-//W3C//DTD XhTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚链接</title>
</head>
<body>
<p><img src="images/logo.jpg">[免费注册][登录] <a href="#star">[明星专区]</a> </p>
<h1>您好，欢迎来贵美商诚！</h1>
 <p>
    手机充值、Ip卡/电话卡<br />
    移动&nbsp; | &nbsp;50 |&nbsp; 100 | &nbsp;联通 | &nbsp;50 | &nbsp;100 </p>
</p> <a>新人上路指南</a>
  <ul>
    <li>如何激活会员名？</li>
    <li>如何注册贵美会员？</li>
    <li>注册时密码设置有什么要求？</li>
  </ul>
 <hr size="1">
   <p>贵美集市欢迎您！</p>
   <p>贵美网首届翠友会！</p>
   <p>想做最闪亮的mm吗 </p>
   <p>千余中奖机会有你吗 </p>
   <p>贵美入选平安网站</p> 
  <h3>注册步骤：</h3>
  <ol >
    <li>填写信息</li>
    <li>收电子邮件</li>
    <li>注册成功</li>
  </ol>
 <a name="star"><img src="images/adv_2.jpg" alt="明星专区" title="明星专区" /></a><p>请点击广告进入明星专区</p>
  
</body>
</html>

不同页：


<!DOCTYpE html pUBliC "-//W3C//DTD XhTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不同页锚链接</title>
</head>
<body>
<img src="images/logo.jpg">[免费注册][登录] <a href="#star">[明星专区]</a> 
<h1>您好，欢迎来贵美商诚！</h1>
 <p>
    手机充值、Ip卡/电话卡<br />
    移动&nbsp; | &nbsp;50 |&nbsp; 100 | &nbsp;联通 | &nbsp;50 | &nbsp;100 </p>
</p> <a>新人上路指南</a>
  <ul>
    <li>如何激活会员名？</li>
    <li>如何注册贵美会员？</li>
    <li>注册时密码设置有什么要求？</li>
  </ul>
 <a name="star"><img src="images/adv_2.jpg" alt="明星专区" title="明星专区" /></a><p>请点击广告进入明星专区</p>
   <hr size="1">
   <p>贵美集市欢迎您！</p>
   <p>贵美网首届翠友会！</p>
   <p>想做最闪亮的mm吗 </p>
   <p>千余中奖机会有你吗 </p>
   <p>贵美入选平安网站</p> 
  <h3>注册步骤：</h3>
  <ol >
    <li>填写信息</li>
    <li>收电子邮件</li>
    <li>注册成功</li>
  </ol>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//ddD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ddD/xhtml1-strict.ddd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新手帮助</title>
</head>

<body>
明星体验：<a href="anchor.html#star">明星专区</a>  
</body>
</html>

4. 特殊符号(版权（&copy），大于(&gt)，小于(lt)，双引(&quot)，空格(&nbsp))


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单小结</title>
</head>
<body>
<p>申请表</p>
<form action="" method="post" id="form1">
	<p>姓名：<input type="text" name="sname" /><br />
	密码：<input type="password" name="password" size="21" /><br />
    照片：<input type="file" name="photo" /><br />
	感兴趣的职位：<br />
		<input  type="radio" name="position" value="0" checked="checked" />Web设计
		<input type="radio" name="position" value="1" />Web开发<br />
		向往城市： <select name="city">
    <option value="">请选择</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="深圳">深圳</option>
    <option value="广州">广州</option>
    <option value="香港">香港</option>
    <option value="台北">台北</option>
    <option value="澳门">澳门</option>    
    <option value="纽约">纽约</option>    
    <option value="巴黎">巴黎</option>    
    <option value="伦敦">伦敦</option>                
  </select><br />			
	协议：<br />
	   <textarea name="request"	cols="26"	rows="5" readonly="readonly">求职信息必须真实、准确，本网站只负责向企业推荐。</textarea><br />
	   <input name="confirm"  type="checkbox" checked="checked" />我认真阅读并接受以上协议。<br />
	经验:<br />
		<select name="exp">
		  <option>无经验</option>
		  <option>3 年  </option>
		</select>
        <br />
	 &nbsp; &nbsp;
	 <input type="hidden" value="zhangsan" name="username" /> 
	 <input type="submit"  name="submit1" value="提交" disabled="disabled" />
	  &nbsp; &nbsp;
	 <input type="reset"  name="reset1"  value="重置" /></p>
</form>
</center>
</body>
</html>

5.表单(***)
<input type = "">
type="Text" 可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单元素高级用法</title>
 
</head>

<body>
<h2><img src="images/read.gif" width="35" height="26" />阅读贵美网服务协议 </h2>
<form action="" method="post">
 <textarea name="content" cols="60" rows="8" readonly="readonly">
    欢迎阅读服务条款协议，贵美的权利和义务......
    </textarea><br /><br />
   同意以上协议<input name="agree"  type="checkbox" /> 
    <input name="btn"    type="submit" value="注册" disabled="disabled" />
    </p>
</form>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隐藏域</title>
</head>

<body>
<form action="" method="post">
  <p>贵美网站邮箱：<input name="email" type="text" size="28" /> </p>
  <p>&nbsp;输&nbsp;入&nbsp;密&nbsp;码：<input name="pwd" type="password" size="30" /></p>
  <p>再次输入密码：<input name="repwd" type="password" size="30" /></p>
  <p><input type="hidden" name="userid" value="666" /></p>
  <p><input name="cancel" type="reset" value="重置" /></p>
  <p><input name="login" type="image" src="images/login.gif" /></p>
</form>
</body>
</html>