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. mongodb 集合操作 （增删改查）

    1.插入: 使用insert或save方法想目标集合插入一个文档: db.person.insert({"name":"ryan","age" ...

  2. ASP.NET Core中的依赖注入: 构造函数的选择与服务生命周期管理

    ServiceProvider最终提供的服务实例都是根据对应的ServiceDescriptor创建的,对于一个具体的ServiceDescriptor对象来说,如果它的ImplementationI ...

  3. CF883J 2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest - J. Renovation 贪心+树状数组

    首先对于一个月的预算,如果非常小的话,我们可以留到后面的 \(a_i\) 最大的月来用,因为 \(a_i\) 越大能够拆建筑的越多. 于是我们把 \(a_i\) 合并给 \(i\) 后面的 \(a\) ...

  4. Java JDK1.8新特性之四大函数式接口

    JDK 1.8的一些新特性 四大核心函数式接口(Consumer.Predicate.Supplier.Function),结合lambda表达式 import java.util.ArrayList ...

  5. C#基础提升系列——C#异步编程

    C#异步编程 关于异步的概述,这里引用MSDN的一段文字: 异步编程是一项关键技术,使得能够简单处理多个核心上的阻塞 I/O 和并发操作. 如果需要 I/O 绑定(例如从网络请求数据或访问数据库),则 ...

  6. 51nod 1384:全排列（STL)

    题目链接 记住next_permutation函数的用法,另外string在这里比char[]慢好多啊.. //#include<bits/stdc++.h> //using namesp ...

  7. ssm框架错误展示-1

    1.xmlParse错误+找不到bean ,一般会出现在导入别的地方拷来的项目时发生,报了以下错误: 查看自己的项目配置文件,发现spring的配置文件和sql映射xml文件都有个黄颜色的感叹号,鼠标 ...

  8. Apache Flink 进阶（八）：详解 Metrics 原理与实战

    本文由 Apache Flink Contributor 刘彪分享,本文对两大问题进行了详细的介绍,即什么是 Metrics.如何使用 Metrics,并对 Metrics 监控实战进行解释说明. 什 ...

  9. 华为交换机telnet配置

    1.在路由器上和交换机相连的借口上配置一个IP地址:比如192.168.1.1 24 2.在交换机上配置如下:<switch>system-view[switch]vlan 10[swit ...

  10. NGINX配置之二: nginx location proxy_pass 后面的url 加与不加/的区别.

    这里我们分4种情况讨论 这里我们请求的网站为:192.168.1.123:80/static/a.html 整个配置文件是 server{ port 80, server name 192.168.1 ...