zoukankan      html  css  js  c++  java
  • python_html_初识

    一。html

    1.组成:是由<html></html>标签和里里面的<head></head>、<body></body> 网页的数据都存放在body页签中:

    HTML 的标签(元素)构成
    - 标签名
    - 属性,ID, name, class, href ,src
    - 子标签
    - text 文本

    例子:

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>基础知识</title>
    </head>
    <body>

    </body>
    </html>
    运行结果:

     2.常用标签

    1)a 标签
    - 需要和 href 属性绑定起来使用。
    - 定位 a 标签:
    - 可以通过 href 属性定位,
    - text 文本

    2)img 标签

    - 和 src 属性绑定
    - 经常和 a 标签组合使用
    - 如果 img 没有明显的特征,可以通过 a 标签定位

    3)iframe

    - 可以嵌套另外的一个 HTML 页面

    4)input

    只要涉及到了 input
    - name

    3.组件:

    1)标题栏:<h1></h1>表示:

    html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>基础知识</title>
    </head>
    <body>
    <h1>标题栏1</h1>>
    <h2>标题栏2</h2>>
    <h3>标题栏3</h3>>
    </body>
    </html>
    运行结果:

    2)段落,使用p标签和换行符、div图层标签效果对比

    <!--    段落-->
    <!--使用br换行符与p标签的区别-->
    <p>1224444, <br>
    一起去爬上, <br>
    不爬山, <br>
    就没有机会。 <br>
    </p>

    <p>1224444 </p>
    <p>一起去爬上,</p>
    <p>不爬山,</p>
    <p>就没有机会,</p>
    !--图层:div-->
    <!--使用div图层,与换行符一样的效果且少写很多东西-->
    <div>我们一起看月亮</div>
    <div>爬上来</div>
    <div>爬上来</div>

     运行结果:

    3)

    <!--有序列表-->
    <ol>
    <li>名字</li>
    <li>真的</li>
    <li>难起</li>
    </ol>
    <ul>
    <li>名字</li>
    <li>真的</li>
    <li>难起</li>
    </ul>

    运行结果:

    4)

    <!--表格table标签-->
    <!--使用border控制表示格式:0不带边框,1带边框-->
    <table border="0">
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>爱好</th>
    <th>是否结婚</th>
    </tr>
    <tr>
    <td>aa</td>
    <td>29</td>
    <td>look book</td>
    <td>no</td>
    </tr>
    <tr>
    <td>bb</td>
    <td>19</td>
    <td>music</td>
    <td>yes</td>
    </tr>
    </table>
    运行结果:

    5)

    1。效果一:

    <!--超链接a标签 href属性-->
    <!--1)设置超链接,使用a标签通常与href属性合用-->
    <div>
    <a href="http://www.baidu.com">进入百度</a>
    </div>
    运行结果:

    2.效果二:

    <!--2)图片里面设置超链接,img图片标签通常与 src属性合用,可以设置宽 高-->
    <a href="http://www.baidu.com">
    <img src="https://pics7.baidu.com/feed/35a85edf8db1cb133c7faf034a92bb4893584bdd.jpeg?token=82f784c2862361239fcc94cb2403e8eb"
    width="100" height="200px">
    </a>
    运行结果:

    3.效果三:

    <!--使用超链接把百度链接放进去-->
    <iframe src="http://www.baidu.com"
    width="800px"
    height="600px"
    ></iframe>
    运行结果:

    6)

    1.效果一:

    <!--用户输入input标签-->
    <!--使用输入内容,nanme属性根据需要自行设置,若需要默认提示文字需要加入placeholder属性-->
    <input name="uesename" placeholder="请输入用户名...">
    <!-- 如需要设置输入内容为不可见需要指定type属性值为password -->
    <input name="pwd" type="password" placeholder="请输入密码">
    <div>
    运行结果:

    2.效果二:

    <!-- radio属性:圆形选择框标签-->
    你最喜欢你的明星:
    <input type="radio" name="favor_star" value="阿伦">伦啊
    <input type="radio" name="favor_star" value="力宏">宏力
    <input type="radio" name="favor_star" value="老薛">薛老
    </div>
    运行结果:

    3.效果三:

    <!--checkbox属性:方框选择框标签       -->
    <div>
    你喜欢的明星:
    <input type="checkbox" name="look book">注意
    <input type="checkbox" name="music">看名称
    <input type="checkbox" name="kiss">与最终提交数据对比
    </div>

    运行结果:

    7)

    <!-- 上传文件夹--,指顶name属性为attch,类型为 file       -->
    <input name="attch" type="file">
    运行结果:

    8)查看html页面选择数据的结果:

    <!-- 使用如下链接可以看到用户提交后的数据,注意选择的数据与提交后的数据的区别-->
    <form action="http://httpbin.org/post" method="post">
    提交按钮
    <input type="submit">
    点击提交按钮的运行结果为:

     

  • 相关阅读:
    C#入门分享(三)——C#常量与变量
    C#入门分享(二)——Visual Studio的应用与C#基本语法
    使用Axure设计基于中继器的左侧导航菜单
    关于C#调用非托管DLL,报“内存已损坏的”坑,坑,坑
    SQLserver 查询某个表的字段及字段属性
    关于数据库新建用户提示“用户、组或角色‘’XXX‘’在当前数据库中已已存在”的解决办法
    (转载)sqlserver2008”备份集中的数据库备份与现有的XX数据库不同”解决办法
    sql server 查询表字段的说明备注信息
    (转)软件产品化,对客户意味着什么?
    (转)软件产品化,国内IT人之痛
  • 原文地址:https://www.cnblogs.com/newsss/p/13252217.html
Copyright © 2011-2022 走看看