码迷,mamicode.com
首页 > 编程语言 > 详细

python web之html

时间:2019-07-31 01:35:26      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:系统   input   不显示   web   用户   get   res   打开   大学   

HTML

1.什么是HTML?
超文本标记语言
     文本、视频、图片、音频、超链接。
     标记:符号(标签),没有逻辑(记忆比较多)
.html文件可以双击直接在浏览器中打开,被浏览器解析被显示给用户查看。

2.如何学习HTML?
学习方向:掌握转义字符、指令和标签
    
3.目的:完成页面架构的搭建,即用什么标签,完成什么样的标签嵌套关系。
<!--doctype必须出现在页面的最上方,规定该文档采用的HTML版本类型 -->
<!DOCTYPE html>
<!--html语言不区分大小写-->
<!--页面标签:包含所有页面内容,只有head与body两个子标签-->
<html>
<!-- 头标签:样式,脚本,后勤操作:编页面码,页面标签标题图表   -->
    <head>
        <!--页面名-->
        <title>第一个页面</title>
        <meta charset="utf-8"></meta>
    </head>
<!-- 体 -->
    <body>
<!-- 页面上显示内容,一定要写在body中  -->
<!--body中可以存放区域、样式、脚本-->
<!--title存放在body中没有多大作用-->
    你好,HTML
    江西理工大学 电气工程及其自动化
    你好,HTML &nbsp;江西理工大学
    你好,HTML &nbsp;&nbsp;&nbsp;江西理工大学
    </body>
    <!--体标签,页面显示内容存放区域-->
</html>

指令

'''
指令:被<>包裹,以!开头
<!----> 表示注释
<!doctype> 文档类型
'''

转义字符

"""
被 & ;包裹,内容为特殊的字母或数字组成。
小于<  &lt;
大于>  &gt;
空格: &nbsp;
版权: &copy;
"""

标签

"""
标签:
    被<>包裹,以字母开头,可以包含数字和减号,在前端中特别建议使用减号
    
     系统标签:h1~h6 span div i b a img hr br table form input
     自定义标签:满足合法命名的所有标签
     
 注释:html语言中,系统建议只使用系统标签,不建议使用自定义标签。
"""

常用标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--1.标题标签-->
    <!--重点:h1标签的语义,是该页面的主标题 -->
    <h1 title="这是标题一">一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>
    正文文本
    正文文本

    <!--2、段落:自带换行,有段落间距-->
    <p>这是一个段落这是一个段落这是一个段落</p>
    <p>这是一个段落这是一个段落这是一个段落</p>
    <!--3.换行标签<br>-->
    正文文本<br>
    正文文本<br>
    正文文本<br>
    <!-- 自带换行的文本标签:h1~h6 p  -->
    <!--4.文本类型标签:不带自换行的文本标签,span i b em strong-->
    <spam>span</spam>
    <spam>span</spam>
    <b>加粗标签</b>
    <b>加粗标签</b>
    <strong>以加粗作为强调的强调标签</strong>
    <strong>以加粗作为强调的强调标签</strong>
    <i>斜体标签</i>
    <i>斜体标签</i>
    <em>以斜体作为强调的强调标签</em>
    <em>以斜体作为强调的强调标签</em>
    <br>
    <span>一般用来嵌套其他文本类标签 上<sup>角标</sup> 下<sub>角标</sub></span>
    <br>
    <!--5.超链接标签: -->
    <a href="www.baidu.com" target="_self">前往百度</a>
    <a href="">前往路飞</a>

    <br>
    <!--6 图片标签-->
    <img title="风景" alt="风景" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2174909441,2495215020&fm=26&gp=0.jpg">
   <!-- alt:当图片加载失败,给与图片解释,当图片加载成功,不显示解释-->
    <!-- title 鼠标悬浮的文本提示 -->

    <!--列表标签-->
    <!--ul>li{第$列}*5-->
   <!--ul>li{第$$列}*5-->

    <ul>
        <li>第1列</li>
        <li>第2列</li>
        <li>第3列</li>
        <li>第4列</li>
        <li>第5列</li>
    </ul>

    <ul>
        <li>第01列</li>
        <li>第02列</li>
        <li>第03列</li>
        <li>第04列</li>
        <li>第05列</li>
    </ul>

    <!--7.列表标签:无序ul>li 有序ol>li;掌握无序即可-->
    <!--8.表格标签 table>tr>th|td-->
    <!--tr:行,th:标题单元格 ;td:普通单元格-->
<!--border:边框-->
<!--cellspacing:单元格间距,最小为0,但是单元格之间是两条线,可以用rules=“all”处理一条线-->
<!--cellpaddding:单元格的内边距(文本与边框的距离)-->

    <table role="group" rules="rows" border="1px" width="500" height = "300" cellspacing="0">
        <caption>表格标题</caption>
        <thead>
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
        </thead>
        <tbody>
        <!--(tr>td{单元格}*3)*2  2*3-->
        <!--rowspan:合并行-->
        <!--colspan:合并列-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
                <!-- td{表尾}*3 -->
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
        </tr>
        </tfoot>
    </table>
    <br><br><br><br><br><br>
</body>
</html>

表单标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>
<body>
    <!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
    <form action="">
        <p>
            <!--label作为input的文本解释标签,for绑定id-->
            <!--value属性是表单标签的内容,就是提交给后台的-->
            <!--name是提交给后台的key,value是值-->
            <!--placeholder是文本占位符-->
            <!--type是决定标签的类型本质(input|button)-->
            <!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
            <label for="username">账号:</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" type="password" placeholder="请输入密码" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按钮" />
            <input type="reset" value="重置" />
            <input type="submit" value="登录" />
        </p>
    </form>
</body>
</html>

标签分类

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签的分类</title>
</head>
<body>
    <h1>标签的分类</h1>
    <hr> /分割线
    <!-- 1、是否自带换行 -->
    <!--带换行:h1 p div table form tr ul li -->
    <!--不带换行:span i b a img input button label textarea-->

    <!-- 2、单双标签 -->
    <!--单标签(主功能):br hr input img link -->
    <!--双标签(主内容):html head body h1 p span div a label button -->
    <!-- / 代表标签的结尾,但是单标签可以省略 -->
    <div></div>
    <hr />

    <!--3、简单和组合标签-->
    <!--组合:ul>li table>tr>td|th form>input -->
</body>
</html>

页面架构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面架构</title>
</head>
<body>
    <!--
    html学习目的:

    1、什么时候用什么标签
        最内层:h1~h6、p、a、img、input
        外层:ul>li、form、table
        架构:div
    -->

    <!--页面头-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form action="">
            <input type="text">
            <button></button>
        </form>
    </div>

    <!--导航栏-->
    <ul class="nav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </ul>

    <!--页面主体-->
    <div class="main">
        <!--.main-left+.main-center+.main-right-->
        <div class="main-left"></div>
        <div class="main-center">
            <div class="main-box box1">
                <h2>领先的 Web 技术教程 - 全部免费</h2>
                <p>在 W3School,你可以找到你所需要的所有的网站建设教程。</p>
                <p>从基础的 HTML 到 CSS,乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
                <p>
                    <b>从左侧的菜单选择你需要的教程!</b>
                </p>
            </div>

            <div class="main-box box2">
                <img src="" alt="">
                <div>
                    <h2></h2>
                    <p></p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="main-right"></div>
    </div>

    <!--页面尾部-->
    <div class="footer"></div>
</body>
</html>

python web之html

标签:系统   input   不显示   web   用户   get   res   打开   大学   

原文地址:https://www.cnblogs.com/xwj-0408/p/11273649.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!