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. ...

随机推荐

mysql对比表结构对比同步,sqlyog架构同步工具
mysql对比表结构对比同步,sqlyog架构同步工具对比后的结果示例: 执行后的结果示例: 点击:"另存为(S)" 按钮可以把更新sql导出来.
android listview万能适配器
参考 Android 快速开发系列打造万能的ListView GridView 适配器 Hongyang public class CommonViewHolder { private Con ...
android:layout_gravity和android:gravity属性的区别
一.介绍: gravity的中文意思就是”重心“,就是表示view横向和纵向的停靠位置 (1).android:gravity:是对view控件本身来说的,是用来设置view本身的内容应该显示在vie ...
Shipyard远程API
1.鉴权模块 1.1 Login,获取token POST http://192.168.31.149:8080/auth/login Headers Content-Type: applicati ...
Hive文件格式
hive文件存储格式包括以下几类: 1.TEXTFILE 2.SEQUENCEFILE 3.RCFILE 4.ORCFILE(0.11以后出现) 其中TEXTFILE为默认格式,建表时不指定默认为这个 ...
处理字符串中的换行，将textarea中的带有换行的字符串变为逗号分隔的写法
_setMultipleInputValues: function (param) { //Maybe need to modify here for the new parameter //add ...
[HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)
要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...
hdu4935 Prime Tree（2014多校联合第七场）
首先这是一道dp题,对题意的把握和对状态的处理是解题关键. 题目给出的范围是n在1到1e11之间,由于在裂变过称中左儿子总是父亲节点的一个非平凡约数,容易看出裂变过程只与素数幂有关,并且显然有素数不 ...
Hiking 分类：比赛 HDU 函数 2015-08-09 21:24 3人阅读评论(0) 收藏
Hiking Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Subm ...
Curling 2.0 分类：搜索 2015-08-09 11:14 3人阅读评论(0) 收藏
Curling 2.0 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14289 Accepted: 5962 Descript ...

python_way day14 HTML

python_way day 14

HTML

一，标签

二、特殊字符

三，css

一 标签：

python_way day14 HTML的更多相关文章

随机推荐

热门专题

一标签：