<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: red">
空格是为了区分前后的英文单词，文本分隔符，多个空格同时存在是也只显示一个
we have a good day daydaydaydadaydaydayday
</div>
哈哈 哈哈哈哈哈哈，空格符<br>
标签<表示大于 >表示小于<br>
<hr>水平线，单标签<br>
<textarea style="text-align: center">电影</textarea>
<ol type="1" start="3">有序列表
<li>type可以是1，a，A，罗马数字i,或者罗马数字I</li>
<li>reversed="reversed"表示倒序排序</li>
<li>start="3"表示从第3个开始排序，从第几个开始排就写第几个</li>
<li>绿皮书</li>
<li>了不起的盖茨比</li>
<li>盗墓笔记</li>
<li>返老还童</li>
</ol>
<ul type="circle">无序列表,只有一个属性type可以更改，默认属性值为disc实心圆。square表示实心小方框。circle表示空心圆。
<li>草莓</li>
<li>苹果</li>
<li>橘子</li>
</ul>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2454448529,2549366342&fm=26&gp=0.jpg" style="width: 800px;height: 500px"><!---网上的url---><br>
<img src="wjk.jpg" alt="这是王俊凯" title="this is wjk"><!--相对路径--><br>
<!--当图片显示不出来时，会显示alt中的内容，称为图片占位符-->
<!--title表示图片提示符,当鼠标放到图片上时会显示titile中的内容-->
<img src="C:/Sublime Text/KarryWang.jpg"><!---绝对路径--><br>
<ol>
<li>网上的url</li>
<li>本地的相对路径</li>
<li>本地的绝对路径</li>
</ol>
<a href="https://www.baidu.com">www.baidu.com</a>
<a href="https://618.tmall.com">
<img src="https://gw.alicdn.com/tfs/TB1h5WvHKL2gK0jSZFmXXc7iXXa-380-320.png">
<a href="https://www.baidu.com" style="width: 100px;height: 100px;background-color: red;display: block;" target="blank"></a>
<a href="tel:13060057532" style="font-size: 50px">给xx打电话</a><br>
<a href="mailto:1955750199@qq.com" style="font-size: 50px">给xx发邮件</a><br>
<a href="javascript:">此处可以强制执行javascript代码</a>
<!--target=blank表示在一个新的标签页打开网址-->
<!--href里面填写你指向的网站地址-->
<!--a标签可以包含任何的东西-->
<!--a标签的两个作用 1.超链接 2.锚点 3.打电话,发邮件 4.协议限定符-->
<form method="get" action="">
<p>
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'}">
<!--输入框-->
</p>
<p>
password:<input type="password" name="username" value=""><!--密码框-->
</p>
喜欢吃的水果
1.葡萄<input type="radio" name="水果" value="葡萄"> <!--单选框-->
2.水蜜桃<input type="radio" name="水果" value="水蜜桃">
3.西瓜<input type="radio" name="水果" value="西瓜">
<input type="submit" value="提交">
</form>
<!--method方法表示发送时数据的方式，get/post-->
<!--action表示发送的地址-->
<!--submit表示提交，login表示提交框内的文字信息-->
<!--type=radio表示的是单选框，要实现单选的功能，则需要几个选项的name统一-->
<!--表单成功提交的几个要素：数据名，数据值-->
<!--单选的type为radio，复选的type为checkbox-->
<h1>复选框</h1>
<form method="get" action="">
1.葡萄<input type="checkbox" name="fruit" value="葡萄" checked="checked">
2.水蜜桃<input type="checkbox" name="fruit" value="水蜜桃">
3.橘子<input type="checkbox" name="fruit" value="橘子">
<input type="submit" value="提交">
</form>
<form method="get" action="">
<h1>选择你的性别</h1>
male:<input type="radio" name="sex" value="male" checked="checked">
female:<input type="radio" name="sex" value="female"><br>
<input type="submit" value="提交">
<!--在input当中的最后协商checked="checked"，表示默认选中,默认选中在单选框和付线框中都适用-->
</form>
<form method="get" action="">
<h1>水果</h1>
<select name="fruit">
<option>葡萄</option>
<option>水蜜桃</option>
<option>橘子</option>
</select>
<input type="submit" value="提交">
<!--因为select有很好的的父子属性，所以可以直接将name写到select里面，避免代码冗余-->
<!--此处默认的value就是<option>内的内容，如果在<option>内添加value，则以<option>内的内容为准-->
</form>
</body>
</html>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
