标注绿色 代码粉红
范围标签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>
运行图