python_way day 14

HTML

一，标签

二、特殊字符

三，css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
　　

    <title>Title</title>

</head>

<body>

    中间写的都是页面上能看到的效果

</body>

</html>

一标签：

head中的标签

body中的标签

作用：可以在标签属性中对标签包含的内容进行修改。并且标签是可以嵌套标签的。

一共分两类，一类是块级标签，一类是内联标签

　　块级标签，不管内容有多少，直接占一整行：div，h1，p

　　内联标签（行内标签），内容有多少就占多少：span,a,select，input

<body>

    <div style="background-color: cornflowerblue"> 我是div标签 </div>

    <span style="background-color: aqua">我是 span标签 </span>

</body>

图解：

1、p ：段落自动换一样，其和上下行有一样的空隙

2、br：换行

<body>

    <p>第一段落我是p标签</p>

    <p>第二段落我是p标签<br/>换行喽！</p>

    <div>第三行，我是div看我和上面的行间距</div>

    <div>第四行，我是div看我和上面的行间距</div>

</body>

效果：

3、a ：跳转，矛

跳转

a 标签特殊属性，href，target

<body>

    <a href="https://www.baidu.com">百度</a>

</body>

效果：

点击以后是在当前浏览器也面跳转到所跳转的页面

target="_blank"

<body>

    <a href="https://www.baidu.com" target="_blank">百度</a>

</body>

　这样写就是点击百度后会新生成一个页面打开跳转页面

矛 :网页内跳转

<body>

    <a href="#i1" target="_blank">标题一</a>

    <a href="#i2" target="_blank">标题二</a>

    <a href="#i3" target="_blank">标题三</a>

    <div id="i1" style="height: 500px;">标题一内容</div>

    <div id="i2" style="height: 500px;">标题二内容</div>

    <div id="i3" style="height: 500px;">标题三内容</div>

</body>

href="#i1" 寻找页面中id=i1的标签，将其标签放置在页面顶部

效果：

注意：在页面中，每个id号都是唯一的。

4、H：默认字体区分从h1~h6

<body>

    <h1>哈哈</h1>

    <h2>哈哈</h2>

    <h3>哈哈</h3>

    <h4>哈哈</h4>

    <h5>哈哈</h5>

    <h6>哈哈</h6>

</body>

图示：

5、input 让用户输入内容　　

输入字符 text password

<body>

    <div style="background-color: aliceblue">

        <p><input type="text"/></p>

        <p><input type="password"/></p>

    </div>

</body>

图示

上传文件 file

<body>

    <div style="background-color: aliceblue">

       <p>上传文件

           <input type="file">

       </p>

    </div>

</body>

　图示：

互斥选择 radio

<body>

    <div style="background-color: aliceblue">

        <p>性别:

            <br/>男：<input type="radio" name="g"/>

            <br/>女：<input type="radio" name="g"/>

        </p>

    </div>

</body>

name 作用就是互斥，=号后面的值一样就可以达到互斥的效果

图示：

多选 checkbox

<body>

    <div style="background-color: aliceblue">

        <p>爱好：

            <br/> 足球<input type="checkbox" />

            <br/> 篮球<input type="checkbox" />

            <br/> 弹球<input type="checkbox" />

        </p>

    </div>

</body>

图示

6、 select 下拉框用户选择

<body>

    <div style="background-color: aliceblue">

       <p>城市：

           <select>

               <option>上海</option>

               <option>北京</option>

               <option>成都</option>

           </select>

       </p>

    </div>

</body>

效果：　　

　同时展示多个

<body>

    <div style="background-color: aliceblue">

       <p>城市：

           <select multiple size="3">

               <option>上海</option>

               <option>北京</option>

               <option>成都</option>

               <option>天津</option>

               <option>兰州</option>

               <option>南京</option>

           </select>

       </p>

    </div>

</body>

#multiple 支持多选， size：同时显示3个

效果：

　　分组：

　　效果：

<body>

    <div style="background-color: aliceblue">

       <p>城市：

           <select>

               <optgroup label="河北省"></optgroup>

                   <option>上海</option>

                   <option>北京</option>

                   <option>成都</option>

               <optgroup label="河南省"></optgroup>

                   <option>天津</option>

                   <option>兰州</option>

                   <option>南京</option>

           </select>

       </p>

    </div>

</body>

7、文本输入 textarea 备注

<body>

    <div style="background-color: aliceblue">

       <p>备注：

            <textarea>输入文本</textarea>

       </p>

    </div>

</body>

效果：

8、提交(也输入input标签中) submit、 button、 reset ---- 配合form标签使用

submit :提交

button：普通的按钮

reset: 重置

以上这些按钮所提交的范围需要使用一个form标签来圈定

<body>

    <form>   #这个form中有一个提交，就说明提交这个按钮只能提交这个form范围中的内容

        <div style="background-color: aliceblue">

          <p>用户名：

              <input type="text" />

          </p>

          <p>邮箱

              <input type="email" />

          </p>

          <p>备注：

                <textarea>输入文本</textarea>

          </p>

        </div>

        <input type="submit" value="submit">

        <input type="button" value="button">

        <input type="reset" value="reset">

    </form>     #这个form中有一个提交，就说明提交这个按钮只能提交这个form范围中的内容
</body>

效果：

9、将输入的数据提交

input提交：

<body>

    <form action="https://www.sogou.com/web?" method="get">    #form标签中的action就是要提交的地址

        <div style="background-color: aliceblue">

          <p>用户名：

              <input type="text" name="query"/>   #input标签中的name就表示你要把内容以字典的形式提交，字典的key就是name后面的值

          </p>

          <p>邮箱

              <input type="email" name="e"/>　　　　#这里也一样

          </p>

           <p>备注：

                <textarea name="t">输入文本</textarea>

           </p>

        </div>

        <input type="submit" value="submit">

        <input type="button" value="button">

        <input type="reset" value="reset">

    </form>

</body>

第一个text类型提交内容就是 {"query":"洪荒之力"}，服务器接到这个数据后就可以取到相应的值
a = {"query":"洪荒之力"}
test = a["query"]
print(test)

洪荒之力

#这样方式的提交默认是以get方式提交，还有一种方式是 post

radio 和 checkbox 提交

<body>
    <form action="https://www.sogou.com/web?" method="get">
        <div style="background-color: aliceblue">
          <p>用户名：
              <input type="text" name="query"/>
          </p>
          <p>性别：
              男：<input type="radio" name="g" value="1"/>  #这里就要定义一个值，来对应你定义的内容
              nv：<input type="radio" name="g" value="0"/>
          </p>
          <p>
              篮球：<input name="favor" type="checkbox" value="0"/>
              足球：<input name="favor" type="checkbox" value="1"/>
              弹球：<input name="favor" type="checkbox" value="2"/>
          </p>
           <p>备注：
                <textarea name="t">输入文本</textarea>
           </p>
        </div>

图示：

radio

favor

file 上传文件

<body>

    <form action="https://www.sogou.com/web?" method="get" enctype="multipart/form-data">   #这里必须定义enctype,定义这个文件才能分块上传到服务器。

        <div style="background-color: aliceblue">

           <p>

               <input type="file" name="f"/>   #这里也别忘了定义name，用来接收字典的key

           </p>

        </div>

    </form>

select 多选提交

<p>

         <select name="city">

               <option value="1">上海</option>

               <option value="2">北京</option>

               <option value="3">广州</option>

         </select>

</p>

testarea 备注提交　　

<p>

     <textarea name="t"></textarea>

</p>

注意：

10、hr标签：生成横线

<hr />

11、label 提升用户体验，用户在点击要输入的位置时，可以点击相对应的文字

<label for="name2">

    <p>用户名：

        <input id="name2" type="text" name="query"/>

    </p>

</label>

图示：

for 对应着id ,这样我只要点击用户名这块区域，后面就可以输入值了

12、 ul、 ol、 dl

ul：每行自定加上个点

<div>

    <ul>

       <li>1</li>

       <li>2</li>

       <li>3</li>

    </ul>

</div>

图示：

ol: 每行自动加上行号

<ol>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ol>

图示：

dl：以标题和内的形式展示

<dl>

         <dt>标题1</dt>

         <dd>内容1</dd>

         <dd>内容2</dd>

         <dt>标题2</dt>

         <dd>内容1</dd>

</dl>

图示：

13、 table 表格

        <div>

            <table border="3">  #border内的数值表示的是表格的样式

                <tr>

                    <th>标题一</th>

                    <th>标题二</th>

                    <th>标题三</th>

                </tr>

                <tr>

                    <td>内容一</td>

                    <td>内容二</td>

                    <td>内容三</td>

                </tr>
 　　　　　　　　　。
　　　　　　　　　 。
           　　  。

            </table>

        </div>

#th表示表头
#td表示内容

图示：

合并单元格

行合并

<table border="3">

    <tr>

        <th colspan="2">标题一</th>  #我们让这个标题占2格

        <th>标题二</th>

        <th>标题三</th>

        <th>标题三</th>

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

</table>

图示

标题一占了2格，标题三就被挤出来了，所以我们就要把标题三去掉

<table border="3">

    <tr>

        <th colspan="2">标题一</th>  #我们让这个标题占2格

        <th>标题二</th>

        <th>标题三</th>     #去掉了出来的标题

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

</table>

图示：

列合并

<table border="3">

    <tr>

        <th colspan="2">标题一</th>

        <th>标题二</th>

        <th>标题三</th>

    </tr>

    <tr>

        <td rowspan="2">内容一</td>   #这里是列合并

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

</table>

　　图示

内容的第一行向下合并了，结果把内容的第二行的内容三挤出来了

所以我们就把被挤出来的删除就ok了

<table border="3">

    <tr>

        <th colspan="2">标题一</th>

        <th>标题二</th>

        <th>标题三</th>

    </tr>

    <tr>

        <td rowspan="2">内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        <td>内容三</td>

    </tr>

    <tr>

        <td>内容一</td>

        <td>内容二</td>

        <td>内容三</td>

        #把这里的删除了

    </tr>

</table>

图示：

14、 fieldest & legend : 框

<fieldset>     #这个就是框

   <legend>登陆</legend>   #这里面就是框上面的文字

       <p>

           用户名 <input type="text">

       </p>

       <p>

           <br/>密码   <input type="password">

       </p>

</fieldset>

图示：

15、iframe 链接

<body>

    <h1>我的衣可服装</h1>

    <iframe style="width: 100%; height: 2000px;" src="http://www.ykhome.com.cn/"></iframe>

</body>

二、特殊字符

<body>

    <div style="background-color: cornflowerblue"> 我是div标签 </div>

    <span style="background-color: aqua">我是 span标签 </span>

    <   #当我们写上一个尖括号的时候下面再html阅览中能看到这个符号

</body>

<body>

    <div style="background-color: cornflowerblue"> 我是div标签 </div>

    <span style="background-color: aqua">我是 span标签 </span>

    <a     #但我们要是想显示成这样，阅览器就会认为这个是html中一个没有写完整的标签。在阅览器中就会不显示

</body>

我们怎么能解决这个问题呢？

这就要使用到特殊字符了　　

<body>

    <div style="background-color: cornflowerblue"> 我是div标签 </div>

    <span style="background-color: aqua">我是 span标签 </span>

    <p><a></p>  # 这样就可以了

</body>

特殊字符会有很多，我们可以从这里查找

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

python_way day14 HTML的更多相关文章

python_way day14 CSS
python_way day14 CSS 层叠样式表一.CSS作用域: 二.css标签选择器三.css样式一.css作用域: 基本用法:style="样式" <body ...
python_way day14 CSS，莫泰对话框
python_way day14 CSS 层叠样式表一.CSS作用域: 二.css标签选择器三.css样式四.莫泰对话框: 一.css作用域: 基本用法:style="样式" ...
python_way ,自定义session
python_way ,自定义session container = {} #可以是数据库,可以是缓存也可以是文件 class Session: def __init__(self, handler) ...
python_way ,day23 API
python_way ,day23 1.api认证 .api加密动态请求 2.自定义session 一.api认证首先提供api的公司,如支付宝,微信,都会给你一个用户id,然后还会让你下一个SD ...
python_way ,day22 tonardo
python_way day22 1.tonardo 2.cookie 3.api认证一.tonardo: a.tonardo 初识 #!/usr/bin/env python3# Created ...
python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能），模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法
python_way day18 html-day4 1.Django-路由系统 - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...
python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架
python_way day17 一.模板插件图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

随机推荐

Java的多线程+Socket
客户端: package com.wulala; import java.io.FileOutputStream;import java.io.IOException;import java.io.I ...
HDU 5961：传递（暴搜）
http://acm.hdu.edu.cn/showproblem.php?pid=5961 题意:中文题意.给出两个图,判断这个两个图是否都是传递的.注意一下传递的定义要看清,一开始没看清连样例都看 ...
android 数据库操作详解
请看郭大神的八篇专栏,包含sql语句 android封装的databasehelper 和郭大神自己的LitePal 三种使用详解 http://blog.csdn.net/column/deta ...
js 正则表达式中的惰性匹配
今天看到了一个正则的问题,在其实使用了如下的符号: var reg = /\{(.+?)\}/g; 其中的?号让我疑惑了很久,其实他在这里是惰性匹配的意思,就是能匹配的尽量少匹配.相反,如果不加这个? ...
Design T-Shirt 分类： HDU 2015-06-26 11:58 7人阅读评论(0) 收藏
Design T-Shirt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
HDU(1175)，连连看，BFS
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1175 越学越不会,BFS还是很高级的. 连连看 Time Limit: 20000/100 ...
python 中time.sleep没有作用
很简单的一个程序: # -*- coding: utf-8 -*- import MySQLdb,os,json,time #from wsgiref.simple_server import mak ...
从客户端中检测到有潜在危险的Request.Form 值
今天往MVC中加入了一个富文本编辑框,在提交信息的时候报了如下的错误:从客户端(Content="<EM ><STRONG ><U >这是测试这...&q ...
C#中调用存储过程：带输入输出参数
using (SqlConnection conn = new SqlConnection(this.GetConnectionString(this.WMPDBName))) { SqlComman ...
Intent官方教程(1)简介和作用
Intents An Intent is a messaging object you can use to request an action from another app component. ...

python_way day14 HTML

python_way day 14

HTML

一，标签

二、特殊字符

三，css

一 标签：

python_way day14 HTML的更多相关文章

随机推荐

热门专题

一标签：