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. torchvision.transforms模块介绍

    torchvision.transforms模块 官网地址:https://pytorch.org/docs/stable/torchvision/transforms.html# torchvisi ...

  2. 特斯拉通过GitHub发布了这些源代码，用意何在？

    特斯拉多年来一直在软件社区使用开源软件而不遵守许可证. 在迈向合规性的一步中,特斯拉现在正在发布其软件的一些部分,这对特斯拉黑客和安全研究人员来说非常有用. 特斯拉是一家软件强大的公司,它一直在使用大 ...

  3. python的strip和split函数

    这两个函数都是string的类函数 1.strip是去掉字符串头尾的特定字符,分三个 aa=' bb=aa.rstrip(') cc=aa.lstrip(') dd=aa.strip(') print ...

  4. shell编程基础知识2

    1.一维数组 定义:A={test1 test2 test3} 引用:echo ${A[0]} 表示引用第一个数组变量 echo ${A[1]} 表示引用第二个数组变量 显示数据参数:echo ${A ...

  5. Python入门图

  6. LDD快速参考

    第二章 快速参考 本节中出现的条目会以它们在文中出现的顺序列出: insmod modprobe rmmod 用来装载模块到正运行的内核和移除模块的用户空间工具: #include <linux ...

  7. this.$nextTick 与window.setTimeout

    两个都可以设置运行先后.前者,方式: this.$nextTick(() => { this.$refs.orgAddOrUpdate.init(row, isAdd) }) 其中orgAddO ...

  8. vue.js使用echarts一分钟简单入门

    图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echa ...

  9. CSS-inline-block 间隙

    间隙产生的原因是`inline-block`对外是`inline`,对内是`block`.`inline`会将连续的空白符解析为一个空格(如:下面示例的两个`li`之间的后面的换行空格).取消间隙的方 ...

  10. 102.kaldi 斯坦福语音识别工具的编译

    接着上一节,在编译完了openFST有限状态机之后,便开始了最重要部分,语音识别插件的编译过程 首先看目录是如下所示的 1.首先添加openBLAS的支持,这是一个矩阵运算库,个人觉得这个矩阵运算库 ...