(一)知识点总结:
1.元素是用标签来表示的
2.属性是用来说明元素的
3.单标签:我的内容通常是引用的外部资源,例如图片,文件等( 将一张图片引入到当前文档中,用单标签img标签)
4.双标签:我的内容来自当前文档(js除外)
5.HTML文档中常用的标签
(1)标题与段落
(2)文本修饰
(3)列表:将一组有共同特征的内容归纳在一起
(4)表格
(5)表单
(6)图片与媒体
(7)布局标签
(8)其他...
(二)常用标签及实例:
1.标题和段落(h1~h6,p,div)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>1月14日作业</title> </head> <body style="height: 3000px;"> <!-- div是一个块级标签,默认始终占据一行 ,并且支持宽高 --> <div style="font-weight: bold;font-size: 50px;">PHP 我来了!</div> <!-- 标题标签:h1~h6(字号逐级减小) 段落标签:p标签 --> <h1>Word hard Play hard</h1> <h2>Word hard Play hard</h2> <h3>Word hard Play hard</h3> <h4>Word hard Play hard</h4> <h5>Word hard Play hard</h5> <h6>Word hard Play hard</h6> <p>用心甘情愿的态度去过自己想要的平凡生活</p> <p>生命只是一个过程,在一起的每分每秒都是结果</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.文本修饰(strong,em)
实例
<p>用<strong style="background-color: black;color: red;">心甘情愿的态度</strong>去过自己想要的平凡生活</p> <p>生命只是一个<em style="color:red;">过程</em>,在一起的每分每秒都是<em style="color:red;">结果</em></p>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3.列表(ul,ol,li,dl)
实例
<h3>购物清单</h3> <ul> <li>国宝熊猫公仔</li> <li>秋冬马丁靴</li> <li>冈本001</li> <li>情侣对戒</li> </ul> <ol> <li>国宝熊猫公仔</li> <li>秋冬马丁靴</li> <li>冈本001</li> <li>情侣对戒</li> </ol> <dl> <dt>HTML</dt> <dd>用来描述网页的一种超文本标记语言,不属于编程语言,实质是一种标记</dd> <dt>CSS</dt> <dd>层叠样式表,样式定义如何显示HTML元素</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.表格
(1)表格是最重要的格式化数据的工具;
(2)完整的表格涉及的标签:table,caption,thead,tbody,tfoot,tr,th,td;
(3)表格至少涉及三个标签:table(表格),tr(行),th/td(单元格) ;
实例
<table border="1" cellpadding="5" cellspacing="0" width="400" height="200"> <!-- 标题用caption标签 --> <caption style="font-size:1.2rem;margin-bottom: 10px;font-weight: bold;">作息时间表</caption> <!-- 建立表格,其中表头是thead标签,单元格用th标签来写(包含加粗和居中两个效果) --> <thead bgcolor="lightblue"> <tr> <th>时间点</th> <th>计划任务</th> </tr> </thead> <!-- 表体是tbody标签 --> <tbody align="center"> <tr> <td>6:30</td> <td>起床</td> </tr> <tr> <td>7:00</td> <td>吃早饭</td> </tr> <tr> <td>8:00-12:00</td> <td>专业课学习</td> </tr> <tr> <td>12:00</td> <td>吃午饭</td> </tr> <tr> <td>2:00-6:00</td> <td>PHP学习</td> </tr> <tr> <td>6:00</td> <td>吃晚饭</td> </tr> <tr> <td>7:00-9:30</td> <td>自由复习</td> </tr> <tr> <td>11:00</td> <td>睡觉</td> </tr> </tbody> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.表单
(1)表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
(2)表单涉及:form,label,input,select,textarea,button标签
(3)表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
实例
<h2>用户注册</h2> <!-- action属性:就是将表单数据提交给服务器中哪个php脚本文件去处理 --> <!-- method属性:表单提交方式(GET和POST) --> <form action="" method="GET"> <!-- input控件类型一:文本框(type属性为text) --> <div> <!-- label标签中的for属性要和input标签中的id属性相同才能保证点击用户名自动锁定文本框 --> <!-- input标签中的value属性是用户名提交内容的默认值 --> <label for="username">用户名:</label> <input type="text" id="username" name="username" value="" placeholder="用户名不能少于6位"> </div> <div> <label for="password">密码:<input type="password" id="password" name="password" value="" placeholder="密码必须包括数字和字母" size="24"></label> </div> <div> <label for="wpassword">确认密码:<input type="password" id="wpassword" name="password" value="" placeholder="密码必须包括数字和字母"></label> </div> <!-- input控件类型二:单选按钮(type属性为radio) --> <!-- 对于单选按钮,input标签中的name属性值必须一样,name值相同会编成一个组,才会返回唯一值,并自动设置它的checked属性 --> <!-- checked属性为默认值 --> <div> <label for="">性别:</label> <input type="radio" id="male" name="gender" value=""><label for="male">男</label> <input type="radio" id="female" name="gender" value="" checked><label for="female">女</label> </div> <!-- input控件类型三:复选框(type属性为checkbox) --> <div> <label>爱好:</label> <input type="checkbox" id="basketball" name="hobby[]" value="" checked><label for="basketball">篮球</label> <input type="checkbox" id="programming" name="hobby[]" value="" checked><label for="programming">编程</label> <input type="checkbox" id="tourism" name="hobby[]" value=""><label for="tourism">旅游</label> <input type="checkbox" id="reading" name="hobby[]" value=""><label for="reading">读书</label> <input type="checkbox" id="sing" name="hobby[]" value=""><label for="sing">唱歌</label> <input type="checkbox" id="film" name="hobby[]" value=""><label for="film">电影</label> </div> <!-- 下拉列表:select标签 --> <div> <label for="edu">你的学历:</label> <!-- select标签中的value值与option中的value值是动态绑定的 --> <select name="edu" id="edu" value=""> <!-- 提交到服务器的是value值 --> <option value="1">本科</option> <option value="2" selected>研究生</option> <option value="3">博士</option> </select> </div> <!-- 文本域:textarea标签 --> <div> <label for="comment">留言</label> <textarea name="comment" id="comment" cols="30" rows="10" placeholder="不超过100字"></textarea> </div> <!-- input控件类型四:注册按钮(type属性为submit) --> <input type="submit" value="注册"> <!-- input控件类型五:重置按钮(type属性为reset) --> <input type="reset" value="重置"> <!-- 提交按钮:button标签 --> <button type="button">提交</button>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.图片与媒体(img,video)
实例
<!-- 图片 --> <div> <img src="static/images/0114.jpg" alt="计算机网络" width="500"> </div> <!-- 视频 --> <div> <video src="static/images/我的傻宝贝儿.mp4" controls="controls" width="500"></video> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
