day02 html
 
一.body中的标签
    a标签:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--a标签: 默认在自己的页面打开这个超链接target="_self"; 在新的标签页打开target="_blank"(空白)-->
    <a href="../day36/06.html", target="_blank">目录内标签</a>
</body>
</html>
    a标签:  在当前的页面中导航 (加锚点)
            也可以阻止a标签默认点击行为
            还可打电话
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <div id="bbs">bajie</div>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <p>八戒</p>
    <!--hash值 锚点 默认有点击行为-->
    <!--file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/01.html#bbs: 在url后面加锚点; 如果只有单独的#号, 就是跳转到顶部-->
    <a href="#bbs">找bajie3</a>
 
    <!--阻止a标签的默认的点击行为-->
    <a href="javascript:void(0);">找bajie1</a>
 
    <!--弹出框-->
    <a href="javascript:alert('弹个框');">找bajie2</a>
 
    <!--打电话-->
    <a href="tell:13683366336">打电话</a>
</body>
</html>  
 
    img和a的共同使用: 加小手
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a{
            display: block;
            /*width: 300px;      #在转成块的a标签里写宽高不起作用*/
            /*height: 300px;*/
        }
    </style>
</head>
<body>
    <div class="box">
            <!--单独img,鼠标到图片上没有小手, 外面用a标签包住, 就有了小手-->
            <!--当用a包裹img时, img图片下面会有一行a标签的空行, 就会影响到排版: 用行内转换解决-->
        <a href="javascript:void(0);">
            <img src="file:///C:\Users\THINKPAD\Desktop\bajie.jpg" alt="图片" width="300" height="300">
        </a>
    </div>
    <div>bajieaishuishui</div>
</body>
</html>
 
    ul: unordered list: 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--ul: unordered list: 无序列表: ul下的子元素只能是li(print 的每一项可以用li来存放)-->
<ul>
    <!--每个li的前面都有一个内边; 还有一个点(默认是实心点); 未来要干掉他们-->
    <li>bajie</li>
    <li>datang</li>
    <li>wukong</li>
    <li>bajie</li>
    <li>分类
        <ul>
             <li>bajie</li>
             <li>datang</li>
             <li>wukong</li>
             <li>分类
                 <ul>
                     <li>bajie</li>
                     <li>datang</li>
                     <li>wukong</li>
                 </ul>
             </li>
        </ul>
    </li>
</ul>
<ul type="square">
    <li>实心方框</li>
</ul>
<ul type="circle">
    <li>空心圆框</li>
</ul>
</body>
</html>
 
    ol: ordered list: 有序列表
<!--ol: ordered list: 有序列表:ul下的子元素也只能是li:  前面出现的不是小圆点了, 而是1.2.3.4.5.这些-->
<ol>
    <li>bajie</li>
    <li>悟空</li>
    <li>大唐</li>
    <li>bajie</li>
</ol>
 
<!--ol: type默认是数字, a是字母, i,I是罗马数字; start是从第几个开始的数字或字母-->
<ol type="a" start="4">
    <li>bajie</li>
    <li>悟空</li>
    <li>大唐</li>
    <li>bajie</li>
</ol>
 
    
    dl: definition list: 定义列表
<!--dl: definition list: 定义列表 : 子元素是dt和dd; 没有属性, 一般用在页面的尾部-->
<dl>
    <dt>定义标题</dt>
    <dd>定义描述</dd>
    <dd>定义描述</dd>
    <dd>定义描述</dd>
 
    <dt>定义标题</dt>
    <dd>定义描述</dd>
    <dd>定义描述</dd>
    <dd>定义描述</dd>
</dl>
 
    
    table:表格
<!DOCTYPE html>
<!--#打开页面时,弹出"翻译此页?"-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--table:表格: border边界,collapse塌陷: 展示型的标签, tr表格行, td表格项 -->
<table border="1" style="border-collapse: collapse;" width="100%">
    <caption>人物介绍</caption>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>age</td>
        <!--单元格的合并: 纵向合并-->
        <td rowspan="3">work</td>
    </tr>
    <tr>
        <td>1</td>
        <td>bajie</td>
        <td>300</td>
    </tr>
    <!--单元格的合并:横向合并, 先删掉某个, 然后加属性colspan-->
    <tr>
        <td>2</td>
        <td colspan="2">wukong</td>
        <!--<td>500</td>-->
    </tr>    
</table>
</body>
</html>
    form 表单标签: 
        作用: 与服务器进行交互
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--form: 表单: 作用: 与服务器进行交互, http协议: 请求的方式: get post.
action提交哪个网址,
method默认是get,-->
<!--页面中的img, a, link标签默认都是get请求-->
<!--action里不写, 默认在本url上提交: file:///C:/Users/THINKPAD/PycharmProjects/s15/day37/05.html?username=bajie&password=123: 这个是get提交的url格式
name=""属性会被封装成key
value=""属性会被封装成value
多个keyvalue用&符号分隔
注意: password=123 暴露了, 所以注册不用get请求-->
    <form action="" method="get" enctype="multipart/form-data">
        <!--input 表单控件:
            type:
                text:文本输入框,
                password 密码输入框,
                file: 上传文件的,
                submit提交按钮提交的是action中的url,
                button普通按钮
                radio:单选
                checkbox: 多选
                reset: 重置按钮
                number:只能输入数字
            name: 提交到服务器端的key.
            value: 显示的文本内容, 与服务器端的value对应-->
        <!--label 标签: for: 是与下面的某个表单控件的id属性进行关联-->
        <!--select : 下拉菜单, 元素是 option-->
        <!--textarea: 文本框-->
        <p>
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" name="password">
        </p>
        <p>
            <input type="submit" value="注册">
            <input type="button" value="普通按钮">
            <input type="reset" value="重置">
            <button type="button">普通按钮</button>    #这两button一样
            <input type="number" name="number" value="只能输入数字">
        </p>
        <p>
            <!--提交文件的时候, 要告知编码方式, Enctype, 文件提交要用post, 因为地址栏长度有限制, 最多好像是2k-->
            <input type="file" name="mp3">
        </p>
        <p>
            <!--radio:单选: 当给相同的name时, 就有了互斥的属性; checked 给出默认选项-->
            男:<input type="radio" name="sex" value="man" checked>
            女:<input type="radio" name="sex" value="woman">
        </p>
        <p>
            <!--checkbox: 多选:-->
            爱好:
            <input type="checkbox" name="love" value="eat">吃饭
            <input type="checkbox" name="love" value="sleep">睡觉
            <input type="checkbox" name="love" value="bat">打豆豆
        </p>
        <p>
            <select name="persion">
                <!--selected 设置默认选项-->
                <option value="1">大唐</option>
                <option value="2" selected>八戒</option>
                <option value="3">悟空</option>
                <option value="4">小李</option>
            </select>
        </p>
        <p>
            <h3>我的描述</h3>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
    </form>
</body>
</html>
 
内容总结: 
    1.标签嵌套
        行内标签, 块标签
        行内标签不能嵌套块标签, 但不是绝对的
        块标签可以嵌套块标签/行内标签
            但是p标签:只可以嵌套字体,图片,表单,而且不能嵌套
    2.table
        tr    
            td
    3.form: action methods(get|post) enctype
        input
            type
                text
                password
                submit: 与action相关
                file: 与enctype相关,mothods一定是post请求
                radio
                checkbox
            name
            value
        select
            option
        textarea
            rows
            clos
        lable
            for: 对应input里的id
    4.python:
        input()    
        print() 
 
 
 
 
 
 

day02 html body中的标签的更多相关文章

  1. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  2. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  3. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  4. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  5. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  6. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  7. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

  8. 在php中，如何将一个页面中的标签，替换为用户想输出的内容

    前言:釜山行,暴露人性, ———————————————————————————————————————————————————————————————————————————— 今天说一个最简单的例 ...

  9. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

随机推荐

  1. 「校内训练 2019-04-23」越野赛车问题 动态dp+树的直径

    题目传送门 http://192.168.21.187/problem/1236 http://47.100.137.146/problem/1236 题解 题目中要求的显然是那个状态下的直径嘛. 所 ...

  2. C# 枚举的声名和使用

    namespace xxxxxx { public enum EnumTextHAlign { Left = , Center = , Right = } } using xxxxxx;

  3. Oracle中表连接的运行原理

    Oracle优化器会自动选择以下三种方式的一种运行表连接,但在数据环境上配合强化选择合适的方式或强制使用某种方式是SQL优化的需要:      NESTED LOOP 对于被连接的数据子集较小的情况, ...

  4. 分布式消息中间件及RabbitMQ

    分布式应用和集群: 从部署形态来看,它们都是多台机器或者多个进程部署,而且都是为了实现一个业务功能. 如果是一个业务被拆分成多个子业务部署在不同的服务器上,那就是分布式应用 如果是同一个业务部署在多台 ...

  5. python字符串非空判断

    1. 字符串非空判断 2. list 非空判断

  6. JS中的this指针

    1.JS中this指针指向 JS中函数的 this 并不遵守词法作用域规则(即作用域由声明时所处的位置决定),而是取决于函数的调用方式 影响 this 指针的因素有以下: 方法是否由某个对象调用,比如 ...

  7. codeforces798C - Mike and gcd problem (数论+思维)

    原题链接:http://codeforces.com/contest/798/problem/C 题意:有一个数列A,gcd(a1,a2,a3...,an)>1 时称这个数列是“漂亮”的.存在这 ...

  8. oracle11g笔记

    安装 #!/bin/bash #安装oracle110203 pageDir="/opt/tools/oracle" bdFile="/tmp/bdFile.txt&qu ...

  9. Codeforces 510C （拓扑排序）

    原题:http://codeforces.com/problemset/problem/510/C C. Fox And Names time limit per test:2 seconds mem ...

  10. Linux操作系统(三)_部署JDK

    一.通过tar.gz压缩包安装 1.在usr目录下创建java目录 cd usr mkdir java 2.用rz命令上传tar.gz安装包到java目录 3.解压tar.gz安装包到当前目录 tar ...