<!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 >
<!-- 这是超链接 , 可以链接到其他地址 -->
表示跳转到 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 </ 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 300 px " >
< 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 >
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
