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 导入导出以及数据库备份

    -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport    1.1.概念:         mongoDB中的 ...

  2. 网络编程和并发：1.简述 OSI 七层协议

    1. 概念 Open System Interconnection : 开放互联系统 2. 图示 注:图片来源:https://www.cnblogs.com/maybe2030/p/4781555. ...

  3. matlab中求解线性方程组的rref函数

    摘自:http://www.maybe520.net/blog/987/ matlab中怎么求解线性方程组呢? matlab中求解线性方程组可应用克拉默法则(Cramer's Rule)即通过det( ...

  4. ImageField 字段的使用

    Django模型中的ImageField和FileField的upload_to选项是必填项,其存储路径是相对于MEIDA_ROOT而来的.

  5. CSS text-indent 属性

    text-indent 属性首行文本缩进,有点像padding-left的效果.

  6. uiautomator python版本

    摘要: 利用jsonrpc技术直接包装uiautomator,调用uiautomator的api在本地直接编写脚本,然后运行测试case,这样比用Java写,然后再打包,runcase要简单的多,关键 ...

  7. python环境变量

    下载并升级更新pip python -m pip install -U pip 变量名:PY_HOME   变量值:python路径 path:win10加在最后(记得用;号隔开):win7加在前面记 ...

  8. sql server 2000安装程序配置服务器失败

    第一种方法 今天安装SQL Server 2000遇到了个很BT的问题,提示出下: 安装程序配置服务器失败.参考服务器错误日志和C:\Windows\sqlstp.log了解更多信息. 以前进安装目录 ...

  9. Orcad Capture元件库介绍--Cadence Allegro

    绘制原理图和PCB,最好有自己的元件封装.元件库 ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C ...

  10. （转）Docker 网络

    转:https://www.cnblogs.com/allcloud/p/7150564.html 本系列文章将介绍 Docker的相关知识: (1)Docker 安装及基本用法 (2)Docker ...