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. mysql安装 demo [linux centos7] [5.7.26]

    MySQL 安装配置 https://www.runoob.com/linux/mysql-install-setup.html =================================== ...

  2. 【串线篇】加谈数据库之连接join

    主题:内连接.左连接(左外连接).右连接(右外连接) 建表语句: CREATE TABLE `a_table` (  `a_id` int(11) DEFAULT NULL,  `a_name` va ...

  3. python自动刷新抢火车票

    #!/usr/bin/env python #-*- coding: utf-8 -*- """ 火车票 可以自动填充账号密码,同时,在登录时,也可以修改账号密码 然后手 ...

  4. 【leetcode】636. Exclusive Time of Functions

    题目如下: 解题思路:本题和括号匹配问题有点像,用栈比较适合.一个元素入栈前,如果自己的状态是“start”,则直接入栈:如果是end则判断和栈顶的元素是否id相同并且状态是“start”,如果满足这 ...

  5. Halo（六）

    Spring publish-event 机制 监听者模式包含了一个监听者 Listener 与之对应的事件 Event,还有一个事件发布者 EventPublish. 过程就是 EventPubli ...

  6. Oracle 的trim，ltrim,rtrim函数的区别

    该函数共有两种作用:第一种,即大家都比较熟悉的去除空格.例子:--TRIM去除指定字符的前后空格SQL> SELECT TRIM(' dd df ') FROM dual;TRIM('DDDF' ...

  7. linux系统下tomcat应用开机自启动 配置

    linux系统下tomcat应用开机自启动 配置 相对简单的方式是将tomcat添加为系统服务第一步  复制文件将 $Tomcat_Home/bin目录下的 catalina.sh脚本文件复制到目录/ ...

  8. LINUX shell脚本相关

    调试脚本 测试脚本语法:bash -n file.sh 查看脚本每一步执行情况:bash -x file.sh   位置变量:$1,$2,... 特殊变量:           %?:最后一个命令的执 ...

  9. js不同类型作比较

    引用自 http://www.zhufengpeixun.cn/jishuziliao/javaScriptzhuanti/2014-06-14/300.html 不同类型间的比较,规律如下 类型 类 ...

  10. Centos7从零开始】Centos 下硬盘分区的最佳方案

    https://www.cnblogs.com/chen1970/p/11071590.html 在对硬盘进行分区前,应该先弄清楚计算机担负的工作及硬盘的容量有多大,还要考虑到以下几个问题: 第一点也 ...