Html 使用手册

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标签
    - 图标, &nbsp; &gt; &lt;
    - 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>

猜你喜欢

转载自www.cnblogs.com/wangcongxing/p/11846847.html
今日推荐