<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="this is my web pro">
<meta name="keywords" content="web,my,pro">
<meta name="author" content="zhangzhiwei">
<title></title>
</head>
<body>
<!-- 这是html里面的注释-->
<!--ctrl +shift+ / 注释的快捷键-->
<!--ctrl +/ 快速注释掉代码-->
<!--ctrl +D 可以快速的复制代码 -->
<!--这是标题标签 范围h1-h6 -->
<h1>this is h1</h1>
<h2>this is h2</h2>
<h3>this is h3</h3>
<h6>this is h6</h6>
<!--这是段落标签-->
<p id="p1">this is body content</p>
<p id="p2">this is new message</p>
<!--这是超链接,可以链接到其他地址-->
<!== href="A"表示跳转到A页面 #表示跳转到本页 ==>
<!==要从某行跳到指定行可以通过a标签设置锚点
需要两个a标签，一个a标签设置name属性，一个a标签跳转到当前name属性对应的值==>
<a href="www.baidu.com">百度一下</a>
<h1><a name="cc" style="color: red"> this is h1</a></h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1>this is h1</h1>
<h1><a href="#cc">跳转到顶部</a></h1>
<img src="../img/023b5bb5c9ea15ce7c8bdd6ab7003af33b87e950352a9a57.jpg" width="500px" height="600px" title="背景"
alt="这是一张背景"/>
<!-- ../img/12.jpg 当html文件和img文件夹不在同一级目录时用 ../ 来回到上一级目录 -->
<img src="../img/0eb30f2442a7d933ac6e5374ae4bd11372f001f6.jpg" width="600PX"/>
<!-- 元素的内容，浏览器会把空格和换行解析了，想要换行必须用 </br> 标签 -->
<p>this is </br> element</p>
<!--加空格   -->
<!-- <hr/>表示分割线 -->
<hr width="1500px"/>
<!--表示一个缩写词或者字母缩略词-->
<abbr title="自贡">zg</abbr>
<address>
Written by <a href="#">Mr zhang</a>.<br>
Visit us at <br/>
Example.com <br/>
Box 564, Disneyland <br/>
USA
</address>
<!--定义粗体 <strong>标签和<b>标签 一般使用前一个因为更兼容-->
<strong>this is strong element</strong>
<!--标注 默认黄色-->
<mark>mark text</mark>
<!-- <em>斜体标签 -->
<em></em>
<!--表示文本从左开始 rtl从右开始-->
<bdo dir="ltr"></bdo>
<!-- 定义与文本中其余部分不同部分（斜体） <i>-->
<p>跳楼价，不要 <del>998</del> 只<i>需</i>要 <ins>298</ins> </p>
<!--<pre>可定义预格式化的文本-->
<pre>
3
+
2
=
5
</pre>
<!--<q>定义一个短的引用-->
<p>床前<q>明月光</q> </p>
<!--加下划线-->
<p>床前<u>明月</u>光</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单是一个包含表单元素的区域-->
<!--表单元素是允许用户在表单中（文本域、下拉列表、单选框、复选框等等）输入信息的元素-->
<!--form标签表示当前是一个表单区域,action表示当前表单获取到值后，提交到服务器的地址-->
<form action="my_web.html">
<!--在form标签里面写表单元素-->
<!--文本框 readonly表示只读 disabled表示禁用 value默认一个值 placeholder用来进行提示-->
<label>用户名:</label>
<input type="text" name="" id="inp" readonly/>
<label>密 码</label>
<!--密码框-->
<input type="password" maxlength="6" placeholder="密码"/>
<!--文本域 cols列 rows行-->
<textarea name="" id="" cols="15" rows="10"></textarea>
<!--按钮 重置必须通过input设置才有重置效果-->
<!--提交用button和input都可以实现-->
<button>提交</button>
<button>取消</button>
<input type="button" value="修改"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<!--下拉框 size表示下拉框显示的大小。或者数量 Multiple表示可以多选-->
<!--下拉框 size表示下拉框显示的大小。或者数量 multiple表示可以多选-->
<!--style = "width:200px" 来调整下拉框的长度-->
<select name="" id="" size="3" multiple="multiple">
<option>中国</option>
<option>美国</option>
<option>日本</option>
</select>
</form>
<fieldset style="width: 300px">
<legend>登录</legend>
<form>
<select name="">
<option>中国</option>
<option>美国</option>
<option>日本</option>
</select>
</form>
</fieldset>
<!--单选按钮 当2个单选按钮的name一样时 那么他们就是一个组，一个组中的单选按钮只能选一个-->
<label>男</label>
<input type="radio" name="66"/>
<label>女</label>
<input type="radio" name="66"/>
<!--多选按钮-->
<label>篮球</label>
<input type="checkbox"/>
<label>足球</label>
<input type="checkbox"/>
<label>球</label>
<input type="checkbox"/>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--table表示表格 tr表示行 每一行有多少列用td
-->
<!--border="1"设置边框风格-->
<table border="1">
<tr>
<td>名字</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>wade</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>wade</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>wade</td>
<td>男</td>
<td>35</td>
</tr>
</table>
<!--给表格添加thead tbody tfoot语义化标签：有利于搜索引擎查询可以快速定位内容-->
<table border="1">
<!--给每一列表格加颜色-->
<colgroup>
<col style="background-color: aquamarine"/>
<col style="background-color: red"/>
<col style="background-color: gold"/>
</colgroup>
<thead>
<!--用th可以默认加粗 居中-->
<tr>
<th>名字</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<!--rowspan表示合并行 数字表示操作几行-->
<td>wade</td>
<td>男</td>
<td rowspan="3">35</td>
</tr>
<tr>
<!--colspan表示合并列 数字表示操作几列-->
<td colspan="2">wade</td>
<!--<td>男</td>-->
<!--<td>35</td>-->
</tr>
<tr>
<td>james</td>
<td>男</td>
<!--<td>35</td>-->
</tr>
</tbody>
<tfoot>
<tr>
<td>123</td>
<td>123</td>
<td>12</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<iframe> frameborder表示显示标签 标签规定一个内联框架-->
<a href="form.html" target="if">学校</a>
<a href="my_web.html" target="if">班级</a>
<iframe name="if" src="form.html" frameborder="0" width="500px" height="300px"></iframe>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
