HTML的高级标签

HTML的高级标签

空格,回车 = 文字分隔符 (打多少个 都只有一个)
HTML编码
html编码:
空格 等价于 &nbsp
=< 等价于 &lt
=> 等价于 &gt
换行:x <br> y <br>
单标签: <meta> <br> <hr>
<>符号在网页中显示出来用 &lt; 名字 &gt; 代替 lt=little than gt=great than
<br>换行符
需要修饰 成对出现
单标签:不需要修饰 自己单独出现 自己就是功能 <br> <hr> 下划线

有序列表: <ol>列表架 <li>列表项

<ol type=“1”>		<!-引号里写1从1开始排序,写a/A从a/A开始排序,写i/I按罗马数字排序-默认是1开始排序>
	<li>marvel</li>
	<li>速8</li>
	<li>返老还童</li>
	<li>了不起的盖茨比</li>
</ol>

在这里插入图片描述

<ol type=“1” reversed=“reversed”>		<!--reversed=“reversed 使其倒叙排列-->
	<li>marvel</li>
	<li>速8</li>
	<li>返老还童</li>
	<li>了不起的盖茨比</li>
</ol>

在这里插入图片描述

<ol type=“1” start=“2”>		<!--从2开始排序,不管什么类型排序,想从第几个开始填数字-->
	<li>marvel</li>
	<li>速8</li>
	<li>返老还童</li>
	<li>了不起的盖茨比</li>
</ol>

在这里插入图片描述
有序列表<ul>列表架 <li>列表项 导航栏更适合用<ul><li>父子结构很好

<html> 
<head>
	<meta charset="UTF-8">    
	<title>12</title>		   
</head>
<body>
		<ul type="disc">    <!-- 默认是disc discircle 实心圆 circle空心圆 square 方形-->			
			<li>草莓</li>
			<li>苹果</li>
			<li>橘子</li>
		</ul>
</body>					       
</html>

在这里插入图片描述
<img>标签:引入图片
<img src> src=资源(地址)
1.网上的url
网上图片的地址
2.本地的绝对路径
html与图不在同一文件夹写全图片所在地址<img src="D:/a/b/名字.jpg">
3.本地的相对路径
图片和html在同一个文件夹时,二者成相对关系 <img src="名字.jpg">

<img src=“123.jpg” alt=“文字”> 可以在图片出错的时候展示出文字
在这里插入图片描述
<img src=“123.jpg” alt=“文字” title=“HICC”> title作用:在鼠标放到图片上时显示文字
在这里插入图片描述

<a>标签: <a href=“ ”></a> href = hyperText reference超文本引用
1.超链接
<a href=“http://www.baodu.com ”>百度</a>
<a>标签形式可以为任意东西(包括图片)

<a href="http://www.baodu.com ">
	<img scr="图片地址 ">
</a>

跳转到一个新标签页中:
target="_blank" 在新标签页中打开 加_blank

<a href=“http://www.baodu.com”  target="_blank"> 百度 </a>

2.锚点
点击连接立刻前往该连接对应位置

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
	<div id="demo1" style="width: 100px;height: 100px;background-color: green;">demo1</div>	<!--id 唯一标识-->
	<div id="demo2" style="width: 100px;height: 100px;background-color: red;">demo2</div>
	<a href="#demo1">find demo1</a> <!--#demo1寻找到demo1的位置-->
	<a href="#demo2">find demo2</a>
</body>		       
</html>

3.打电话/发邮件

<a href="#tel:123456789">给某人打电话</a>
<a href="#mailto:123456789@qq.com">给某人打发邮件</a>

4.协议限定符
强制使用JSP

<a href="javascript:while(1){alert('死循环')}">协议限定符</a>

<form>标签

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<form method="get/post" action="http://www.baodu.com"> <!-- method发送信息方式   action发送给谁的地址-->
	<p>
	username:<input type = "text" name="username"> <!--输入框 name数据名-->
	</p>
	<p>
	password:<input type="password" name="password"> <!--密码框-->	
	</p>
	<input type="submit" value="lgoin">  <!--submit 提交  value  修改提交的名字-->
</form>>
</body>		       
</html>

密码会由md5加密

单选框

<input type="radio">
<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<form method="post" action="">
	
	你们喜欢的球员
	1.贝克汉姆<input type="radio" name="star" value="小贝">
	2.莱昂纳多<input type="radio" name="star" value="莱昂">
	<input type="submit">
</form>
</body>		       
</html>

在这里插入图片描述

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8">    
	<title>123</title>		   
</head>
<body>
<form method="post" action="">
	
	<p>
	username:<input type = "text" name="username" value="请输入用户名!" οnfοcus="if(this.value==''){this.value='请输入用户名'}" οnblur="if(this.value==''){this.value='请输入用户名'}">  <!--onfocus 鼠标聚焦时 value内容消失 onblur失去焦点回归某个状态-->
	</p>
	<p>
		password:<input type="password" name="password"> <!--密码框-->	
	</p>
	<input type="submit">
</form>
</body>		       
</html>
展开阅读全文
©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值