HTML5行级标签
标注绿色 代码粉红
范围标签span
<body> <!--span标签没有任何默认样式--> 青岛理工大学 <span>青岛理工大学</span> <!--用span标签给某些字特殊样式--> <p>笔记本电脑： <span style="font-size: 50px;color:red;">0</span> 元起</p> <p>笔记本电脑： <p style="font-size: 50px;color:red;">0</p> 元起</p> </body>
运行图
页面链接<a></a>超链接
页面跳转
<body> <!--href:指定为页面跳转的路径 target：页面打开的位置 _self:当前页面打开 _blank:在新页面打开--> <!--外部页面跳转--> <a href="https://www.baidu.com/">百度首页</a> <a href="https://www.baidu.com/" target="_self">百度首页</a><!----> <a href="https://www.baidu.com/" target="_blank">百度首页</a><!--与上对比是新页面打开--> <!--本地页面链接--> <a href="Demo10.html" target="_blank">Demo10页面的底部</a> <a href="Demo10.html#bottom" >Demo10页面的底部</a> </body>
运行图1
Demo10的代码
<body> <div style="height: 100px;background-color: red"></div><!--px是像素密度--> <div style="height: 50px;background-color: yellow"> <ul> <li>首页</li> <li>IOS课程</li> <li>Android课程</li> <li>HTML5课程</li> <li>JAVAEE课程</li> <li>视频课程</li> <li>就业保障</li> <li>走进杰瑞</li> </ul> </div> <div style="height: 300px;background-color: blue"></div> <div style="height: 1000px;background-color: yellow"></div> <a name="bottom"></a><!--这段代码在哪里哪里就是锚点`--> </body>
重点是
<a name="bottom"></a><!--这段代码在哪里哪里就是锚点`-->
因为这段代码的缘故，使点击运行图1的第5个按钮，产生如下运行图2
注意是打开页面直接到了页面底部
锚点链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>锚点链接</title> </head> <body> <a name="top"></a><!--锚点--> <div style="height: 1200px;background-color: green"> 顶部 <button style="position: fixed;bottom: 50px;right: 50px"> <a href="#top">返回页面顶部</a> </button> </div> </body> </html>
运行图
在此页面将页面滑动到底部，点击右下角按钮后，页面立马返回到页面顶部
页面链接和锚点链接的都是<a></a>，差别是href与name。
功能链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>功能链接</title> </head> <body> <a href="tencent://message/?uin=604459489">发qq消息</a> <a href="mailto://459360986@qq.com">发邮件</a> </body> </html>
运行图
img标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img标签</title> </head> <body> <!--src:图片路径--> <img src="../../img/city.jpg" alt="图片加载失败"><!--图片路径正确--> <img src="../../img/qiuqian2.jpg" alt="图片加载失败"><!--图片路径错误-->
<img src="../../img/city.jpg" alt="图片加载失败" width="200" height="133" align="right"><!--align基本不能用了，他的作用是对齐--> </body> </html>
运行图
文本标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <p>版权所有，侵权必究</p> <!--斜体，强调--> <em>版权所有，侵权必究</em><br> <!--斜体--> <i>版权所有，侵权必究</i><br> <!--粗体，强调--> <strong>版权所有，侵权必究</strong><br> <!--粗体--> <b>版权所有，侵权必究</b> </body> </html>
运行图
表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--就近原则：表格属性和单元格的属性相同的情况下，单元格属性优先--> <table border="1" width="300px" height="80px" cellspacing="0" cellpadding="5" align="center" bgcolor="red" background="" bordercolor="blue"> <!--border:边框粗度；cellspacing：单元格间距;cellpadding:单元格内文本间距;align:表格对齐方式；bgcolor:背景颜色; background:背景图片（背景图片比背景颜色优先级高）;bordercolor:边框颜色--> <caption>表格标题</caption> <tr> <th width="100">标题1</th><!--标题默认加粗居中--><!--th是标题的意思--> <th width="100">标题2</th> <th width="100">标题3</th> </tr> <tr align="center"><!--行--> <td>手机充值</td><!--列--> <td>IP卡</td> <td bgcolor="yellow">网游</td><!--就近原则：在相同属性情况下，谁离得内容越近，谁就生效：例如表格背景色与单元格背景色--> </tr> <tr align="center"> <td>移动</td> <td>联通</td> <td>魔兽</td> </tr> <tr align="center" valign="bottom" height="80"><!--align:left right center;valign:top middle bottom--> <td nowrap>手机空中免费充值</td><!--当后边属性值与属性一样时，属性值可以不写--> <td>IP卡</td> <td bgcolor="yellow">网游</td> </tr> </table> </body> </html>
运行图
table的属性：
<!--border:边框粗度；cellspacing：单元格间距;cellpadding:单元格内文本间距;align:表格对齐方式；bgcolor:背景颜色;background:背景图片（背景图片比背景颜色优先级高）;bordercolor:边框颜色；width；height-->
td标签属性
width 不赞成使用。请使用样式取而代之。
规定表格单元格的宽度。
height 不赞成使用。请使用样式取而代之。
规定表格单元格的高度。
bgcolor 不赞成使用。请使用样式取而代之。
规定单元格的背景颜色。
align 规定单元格内容的水平对齐方式
valign 规定单元格内容的垂直排列方式。
nowrap 不赞成使用。请使用样式取而代之。
规定单元格中的内容是否折行。
tr标签属性
width
height
bgcolor 不赞成使用。请使用样式取而代之。
规定表格行的背景颜色。
align 定义表格行的内容对齐方式。
valign 规定表格行中内容的垂直对齐方式。
nowrap
表格跨列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格跨列</title> </head> <body> <table border="1" width="300" height="150"> <tr> <td colspan="2">学生成绩</td><!--colspan属性表示跨几列--> </tr> <tr> <td>语文</td> <td>10</td> </tr> <tr> <td>数学</td> <td>10</td> </tr> </table>
运行图
表格跨行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格跨行</title> </head> <body> <table border="1" width="200" height="80 "> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>88</td> </tr> </table> </body> </html>
运行图
表格跨列跨行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格跨行跨列</title> </head> <body> <table border="1" width="300"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>99</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>77</td> </tr> <tr> <td>数学</td> <td>44</td> </tr> </table> </body> </html>
运行图
Form表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form表单</title> </head> <body> <!--action 表单提交的地址 method 用来指定数据传递到服务端的基本方法 1：get：传递的数据会拼接到url后面 优点：简单，快捷 缺点：暴露敏感信息，数据传输量有限 2：post：传递的数据会隐藏起来，放在请求体 优点：数据传输量大，信息保密性好 缺点：相比get请求，速度慢一些--> <form action="www.zxl.php" method="get"> <fieldset><!--加一个框--> <legend>个人信息</legend><!--于上边fieldset有关--> 姓名：<input type="text" name="name" value="lzy" tabindex="1"><br><!--name：上传时与你的信息关联；value：赋值给text框中--> 密码：<input type="password" name="pwd" tabindex="4"><br> 密码：<input type="password" name="pwd" tabindex="3"><br> 密码：<input type="password" name="pwd" tabindex="2"><br><!--tabindex可以指定光标跳转的顺序--> 性别：<input type="radio" name="sex" value="1" id="man"> <label for="man">男</label><!--label里的for：man与前边的id=man关联，使“男”的区域可以被点动--> <input type="radio" name="sex" value="0">女<br><!--radio:单选框；因为name属性一样，所以互势--> 爱好：<input type="checkbox" name="hobby" value="basketball">篮球<!--checkbox：多选框--> <input type="checkbox" name="hobby" value="soccer">足球 <input type="checkbox" name="hobby" value="tennis">网球<br> 附件：<input type="file" name="img"><br><br> 图形按钮：<input type="image" src="../../img/qiuqian.jpg" height="30"><br><!--也有提交功能，与submit一样--> 省份：<select name="p" id="p"> <option value="sd">山东省</option> <option value="hn">河南省</option> <option value="yn" selected>云南省</option><!--selected：让云南在省份框中默认出现--> <option value="gs">甘肃省</option> <option value="gx">广西省</option> </select><br> 意见建议：<textarea style="resize: none" rows="5" cols="60"></textarea><!--style；样式:none使对话框不能放大--> <br> <input type="button" value="注册"> <input type="submit" value="登陆"> <input type="submit" value="清空"> </fieldset> </form> </body> </html>
运行图
重要Form input type属性：
text；password；radio；checkbox；file；image；button；submit！
form <select> <option>文字</option></select>
<textarea（文字区块） style="resize: none" rows="5" cols="60">
h5提供的新的表单元素
<input type=email... 限制用户输入email格式
<input type=url... 限制用户输入网址格式
<input type=date.. 限制用户输入日期格式
<input type=time... 限制用户输入时间格式
<input type=month... 限制用户输入月份格式
<input type=week... 限制用户输入周格式
<input type=number... 限制用户输入数字格式
<input type="number" max="10"><br><!--max确定了最大值；min：最小值；step：步长-->
<input type=range... 一个滑动条效果
<input type=color... 选择颜色格式
h5新增的表单属性
姓名：<input type="text" name="name" autocomplete="off"
autofocus
required
placeholder="请输入姓名"><br>
<!--自动完成功能;自动获得焦点;必填;文本提示灰字-->
关联表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关联表单</title> </head> <body> <!--在表单外的表单元素可以通过form属性和某个表单关联--> <form action="www.lzy.php" method="get" id="login"> <input type="submit"> </form> 姓名：<input type="text" name="name" form="login"><!--form外的东西通过id与form关联可以被用--> <form action=""> <input type="month"><br> <input type="email"><br> <input type="date"><br> <input type="time"><br> <input type="week"><br> <input type="number" max="10" step="2"><br><!--max确定了最大值；min：最小值；step：步长--> <input type="range" max="" min=""><br> <input type="color"><br> <input type="url"> <input type="submit" value="登陆"> </form> </body> </html>
运行图
