空格和回车是用来分割字符的
表示空格
<表示<
>表示>
<br>表示回车
<hr>表示水平线
有序列表(默认按1. 2. 3. … 排列,按 type排列)五种(1/a/A/i/I)
<ol type="a" reversed="reversed" start="2"> reversed倒着排 从2开始排
<li>狮子王</li>
<li>百年孤独</li>
<li>返老还童</li>
</ol>
无序列表
ul>li*3
<ul type="disc">discircles实心圆 circle圈 square矩形
<li>西瓜</li>
<li>车厘子</li>
<li>柚子</li>
</ul>
天猫背景:
<html lang ="en,zh"><head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0; padding: 0; /* 去空隙 */
}
ul{
list-style: none; /* 去掉圈 */
}
li{
margin: 010px; /* 留空隙 */
float: left; /* 横着 */
color: #f40;
font-weight:bold; /* 加粗 */
font-size:14px; /* 字体大小 */
height:25px; line-height: 25px; /* 上下高度 */
padding: 0 5px; /* 左右宽度 */
}
li:hover /* 鼠标移动在上发生的事 */
{border-radius: 15px; /* 圆角 */
background-color: #f40; /*背景颜色 */
color: #fff; }
</style>
</head>
<body>
<ul >
<li>天猫</li>
<li>淘宝</li>
<li>聚划算</li>
</ul>
</body>
</html>
<img src="">
1.网上的url
2.本地的绝对路径
3.本地的相对路径
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/730e0cf3d7ca7bcb2961ee2fbd096b63f624a893.jpg" style="width:200px">
<img src="001.jpg" style="width:200px" alt="这是猫" title="猫">
alt=""图片占位符 图片出错时展示文字信息
title=""图片提示符,鼠标放图片上时提示信息
a标签//超级链接//锚点//打电话//协议限定符
<a href="http:www.baidu.com">www.baidu.com</a>
也能放图片
target="_blank_"能在新标签页打开
<a href="http:www.baidu.com" target="_blank_">
<img src="" >
</a>
锚点,回到定义的位置
<div id="demo1" style="width: 100px;height: 100px;background-color: green">demo1</div>
<div id="demo2" style="width: 100px;height: 100px;background-color:red">demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo1</a>
右下角定义块状回到指定位置
<a style="display:block;position:fixed;bottom:50px;right:50px;border:1pxsolidblack;height:50px;width:200px;background-color:#fcc;" href="#demo1">find demo1</a>
<a style="display:block;position:fixed;bottom:100px;right:50px;border:1pxsolidblack;height:50px;width:200px;background-color:#ffc;" href="#demo2">find demo2</a>
<a href="tel:17766662828">电话</a>
<a href="mailto:[email protected]">邮件</a>
<a href="javascript:while(1){alert('让你手欠')}">死循环</a>
<form ></form>表单标签实现发送
method="get/post"发送数据方式
action=""发送给谁的位置
<form method="get" action=""></form>
<form method="get" action="">
用户名<input type="text" name="username" value="请输入用户名">
密码<input type="password" name="password"> 有name才能发送
<input type="submit" value="login">
</form>
<input type="radio" name="star" value="1">qq
<input type="radio" name="star" value="2">ww radio换checkbox就是复选
<input type="radio" name="star" value="3">mm 有name才能变成单选,有value才能提交
<input type="submit" >
测试:鼠标没聚焦时暗色显示请输入用户名,聚焦时消失,自己输入类容是黑色
<p>用户名<input type="text" name="username" style="color:#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='424242'}" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"></p>有name才能发送 <p> 密码<input type="password" name="password" ></p> <input type="submit" value="login">
单选设置默认选项
<h1> choose you sex</h1>
male:<input type="radio" name="sex" value="male" checked="checked">
female:<input type="radio" name="sex" value="female ">
<p><input type="submit" > </p>
下拉菜单
<h1>Province</h1>
<select name="Province" >
<option >jiangsu</option>
<option >beijing</option>
<option >shanghai</option>
</select>