前端学习------html进阶篇-高级标签
有序列表无序列表img标签a标签form表单标签
<html lang="en">
<head>
<meta charset="utf_8">
<title>Document
</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;">
dasasdsadadasdasddsa这样单词就会溢出背景方块
</div>
<div style="width:100px;height:100px;background-color:red;">
dasa sdsadad asdas ddsa这样单词就不会溢出背景方块
</div>
<br>换行标签，写一个br就是一个换行
</body>
</html>
空格不是文本空格，是分割符，还有回车也是分割符，不能用作文本，编辑器中空格，是可以来分割字符的，dafasfsfdafsfd浏览器会默认认为这是一个单词，但你写汉字就不一样了，浏览器可以分辨出一个一个汉字来空格文本的展示形式： HTML编码：&开头；结尾 示例：
html编码文本
& nbsp;空格& lt;文本 <& gt;文本 >
单标签：< meta > < br 换行> < hr 水平线>
有序列表
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
<ol type="a" reversed="reversed" start=“2”>有序列表架
<li></li>有序列表项
<li></li>
<li></li>
</ol>
</body>
</html>
在 ol 的头标签type里写a，就按abcd来排序，写A就按ABCD来排序。字母27进制显示。写 i 或 I 就是罗马数字排序 。写b就不好使。ol 的 type标签 里加 reversed=“reversed” 是逆序排序。start=“2” 从2开始排序，如果type是a，start里写3，就会从c开始排序。
无序列表
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
<ul type="disc">
<li> </li>
<li> </li>
<li> </li>
</ul>
</body>
</html>
type=“disc” 实心圆 ；type=“square” 方形实点；type=“circle” 空心圆。无序列表可以用来做导航栏。
img标签
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
<img src="" style="width:200px;" alt="这是我的照片" title="这是我">
</body>
</html>
src=""里是图片的地址. 地址可以是网上的url，也可以是本地的地址。style=“width:200px;” :调整图片的宽度。alt=“这是我的照片” ： 图片加载不出来的时的文字信息。图片占位符title=“这是我” ：图片提示符
a标签
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
<a href="http://www.baidu.com">www.baidu.com
</a>
<a href="http://www.baidu.com">
<img src="" style="width:200px;" alt="这是我的照片" title="这是我">实现图片跳转
</a>
<a href="http://www.baidu.com" target="_blank"></a>跳到新标签页
//1.超级链接
anchor --锚
//2.锚点
<div id="demo1">demo1
</div>
<div id="demo2">demo2
</div>
<a href="#demo1">find demo1
</a>
<a href="#demo2">find demo2
</a>固定住的话就会实现那种左侧目录，右侧滚动文章那种效果
//3.打电话，发邮件
<a href="tel:13826014777">我要打电话
</a>
<a href="mailto:13826014777@163.com">我要发邮件
</a>
//4.协议限定符
<a href="javascript:while(1){alert('让你手欠')}">点我试试
</a>死循环
</body>
</html>
form表单标签
可以把前端的数据发送给后端工程师
<html lang="en">
<head>
<meta charset="utf_8">
<title>document
</title>
</head>
<body>
<form method="get/post" action="http://www.baidu.com/123.php">
method是方式，action是发送给谁
username:
<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'}">输入框
password:
<input type="password" name="password" >密码框
<input type="submit" value="login我要提交">
<input type="radio" name="" value="">单选框 name统一之后，那么单选就可以实现了。
<input type="radio" name="" value="">单选框 加上value后，一提交，就会name=value获得值了
<input type="radio" name="" value="" checked="checked">单选框 ,这行就是默认选中的
<input type="checkbox" name="" value="">复选框 ，name统一之后，就是一个选择题
<select name="">下拉菜单
<option value="这里面写也可以" >这里面就是天然的value了
</option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>
