HTML- (HTML5 标准)官方介绍
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点(我们django),HTML 运行在浏览器上,由浏览器来解析。
在本教程中,您将学习如何使用 HTML 来创建站点。
学习网站:https://www.runoob.com/html/html-basic.html
HTML
1、一套规则,浏览器认识的规则。
2、开发者:
学习Html规则
开发后台程序:
- 写Html文件(充当模板的作用)
- 数据库获取数据,然后替换到html文件的指定位置(Web框架)
3、本地测试
- 找到文件路径,直接浏览器打开
- pycharm打开测试
4、编写Html文件
- doctype对应关系
- html标签,标签内部可以写属性 ====> 只能有一个
- 注释: <!-- 注释的内容 -->
5、标签分类
- 自闭合标签
<meta charset="UTF-8">
- 主动闭合标签
<title>Hello</title>
6、head标签中
- <meta -> 编码,跳转,刷新,关键字,描述,IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
- title标签
7、body标签
- 图标, > <
- p标签,段落
- br,换行
======== 小总结 =====
所有标签分为:
块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
行内标签: span(白板)
标签之间可以嵌套
标签存在的意义,css操作,js操作
使用pycharm在项目templates-->文件夹下,选中文件夹新建helloWorld.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>我是Div > ul > li 无序</h1> <div> <ul> <li>我是ol 的A</li> <li>我是ol 的B</li> <li>我是ol 的C</li> <li>我是ol 的D</li> <li>我是ol 的E</li> </ul> </div> <h1>我是Div > ol > li 有序</h1> <div> <ol> <li>我是ol 的A</li> <li>我是ol 的B</li> <li>我是ol 的C</li> <li>我是ol 的D</li> <li>我是ol 的E</li> </ol> </div> <h2>我是表格</h2> <table style="border: 1px solid #ccc"> <tr> <td style="border: 1px solid #ccc">姓名</td> <td style="border: 1px solid #ccc">UM号</td> <td style="border: 1px solid #ccc">年龄</td> <td style="border: 1px solid #ccc">岗位</td> <td style="border: 1px solid #ccc">创建时间</td> </tr> <tr> <td style="border: 1px solid #ccc">张三</td> <td style="border: 1px solid #ccc">ZHANGSAN</td> <td style="border: 1px solid #ccc">18</td> <td style="border: 1px solid #ccc">攻城狮</td> <td style="border: 1px solid #ccc">2019-11-13 09-03:17</td> </tr> </table> <br> <h3>我是表单</h3> <a href="https://www.baidu.com" target="_blank">百度一下</a> <br/> <h2>我是表单</h2> <form action="#"> 姓名:<input type='text' name="name" value="" placeholder="请输入姓名"/><br/> 密码:<input type='password' name="password" value=""/><br/> 性别:name属性(name相同则互斥)<br/> 男:<input type='radio' value="男" checked="checked" name="sex"/><br/> 女:<input type='radio' value="女" checked="checked" name="sex"/><br/> 保密:<input type='radio' value="保密" checked="checked" name="sex"/><br/> 爱好:name属性(批量获取数据)<br/> <input type='checkbox' value="西瓜" checked="checked" name="Hobby"/><br/> <input type='checkbox' value="苹果" checked="checked" name="Hobby"/><br/> <input type='checkbox' value="菠萝" checked="checked" name="Hobby"/><br/> <input type='checkbox' value="车厘子" checked="checked" name="Hobby"/><br/> 开发语言:<br/> <select> <option value="C">C</option> <option value="C++">C++</option> <option value="Java">Java</option> <option value="C#">C#</option> <option value="Python" selected="selected">Python</option> </select> <br/> 上传文件:<input type='file'/><br/> 重置:<input type='reset' value="重置"/><br/> <textarea rows="20" cols="30">默认值</textarea> <br/> 提交:<input type='submit' value='提交' style="width: 50px"/><br/> 登录:<input type='button' value='登录' style="width: 70px"><br/> </form> <br/> </body> </html>