day2 HTML - body

<body>内常用标签

1.基本标签

　　所有标签分为：

　　　　# 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）

　　　　# 行内标签： span（白板）

　　1. 图标，   > <

　　2. p标签，段落

    <p>1</p>

    <p>12</p>

    <p>123</p>

　　3. br，换行

<p>adfafdsa<br />fasdfasfasdfdsa</p>

　　4.h系列

    <h1>Alex</h1>

    <h2>Alex</h2>

    <h3>Alex</h3>

    <h4>Alex</h4>

    <h5>Alex</h5>

    <h6>Alex</h6>

　　5.div

     <div>123</div>

    <div>123</div>

    <div>123</div>

嵌套

    　　<div>

        　　<div id="i1">adfadsf</div>

       　　 <span></span>

       　　 <p>

            　　<div></div>

       　　 </p>

   　　 </div>

　　6.span

     <span>hello</span>

    <span>hello</span>

    <span>hello</span>

ps：chorme审查元素的使用

- 定位

- 查看样式

2.表单标签: <form>

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　　　表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

　　表单还可以包含textarea、select、fieldset和 label标签。

input type='text'     - name属性，value="赵凡"

input type='password' - name属性，value="赵凡"

input type='submit'   - value='提交' 提交按钮，表单

input type='button'   - value='登录' 按钮

input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）

input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）

input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"

input type='rest'     - 重置

　表单属性

　　 action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get默认取值就是get

　　2.1 input标签

    <form action="http://localhost:8888/index" method="get">

        <input type="text" name="user"/>

        <input type="text" name="email"/>

        <input type="password" name="pwd"/>

        <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->

        <input type="button" value="登录1"/>

        <input type="submit" value="登录2"/>

    </form>

	<br />

    <form action="http://localhost:8888/index" method="post">

        <input type="text" name="user"/>

        <input type="text" name="email"/>

        <input type="password" name="pwd"/>

        <input type="button" value="登录1"/>

        <input type="submit" value="登录2"/>

    </form>

<form action="https://www.sogou.com/web">

        <input type="text" name="query" value="qqq"/>

        <input type="submit" value="sogou"/>

</form>

<form>

        <div>

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value="1" checked="checked"/>

            女：<input type="radio" name="gender" value="2" />

            alex：<input type="radio" name="gender" value="2" />

            <p>爱好：</p>

            篮球:<input type="checkbox" name="favor" value="1"/>

            zu球:<input type="checkbox" name="favor" value="2" checked="checked"/>

            tai球:<input type="checkbox" name="favor" value="3"/>

            pi球:<input type="checkbox" name="favor" value="4"/>

            <!--favor_list = self.get_argument('favor')-->

            <!--[1,2,3]-->

        </div>

        <input type="submit" value="提交">

	<input type="reset" value="重置">

</form>

<form enctype="multipart/form-data">

        <div>

            <p>上传文件</p>

            <input type="file" name="fname"/>

        </div>

        <input type="submit" value="提交">

</form>

　　2.2 textarea 多行文本

- name属性

       <textarea name="meno">默认值</textarea>

　　2.3 select标签下拉框

　　- name,内部option value, 提交到后台，size，multiple　　

    <select name="city" size="10" multiple="multiple">

        <option value="1">biejing</option>

        <option value="2">xi;an</option>

        <option value="3" selected="selected">shanghai</option>

        <option value="4">chengdu</option>

    </select>

　　2.4 label标签

　　用于点击文件，使得关联的标签获取光标

     <label for="username">用户名：</label>

     <input id="username" type="text" name="user" />

　　2.5. fieldset 框

<fieldset >

		<legend>登录</legend>

		<label>  用户名:</label>

		<br/>

		<label > 密码:</label>

</fieldset>

====================================

数据提交http://localhost:63342/s14/day14/html/s6.2.html?city=2&city=3&city=4

以上标签可以url提交数据

===============================================　

3. 超链接标签(锚标签): <a> </a>

- 跳转

　　- 锚 href='#某个标签的ID' 标签的ID不允许重复

<a href="http://www.mi.com">xiaomi</a>

<a href="#i1">第一章</a>

<a href="#i2">第2章</a>

<a href="#i3">第3章</a>

<div id ="i1" style="height: 600px;">第一章的内容</div>

    <div id ="i2" style="height: 600px;">第2章的内容</div>

<div id ="i3" style="height: 600px;">第3章的内容</div>

4.image标签

src

alt

title

<a href="http://www.mi.com">

    <img src="1.jpg" title="霉霉" style="height: 200px;width: 300px;" alt="美女"/>

</a>

5. 列表标签

<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

　　<li>:列表中的每一项.

<ol>: 有序列表

　　<li>:列表中的每一项. 

<dl> 定义列表

　　<dt> 列表标题

　　<dd> 列表项

<ul>

        <li>fasf</li>

        <li>fasf</li>

        <li>fasf</li>

    </ul>

    <ol>

        <li>fasf</li>

        <li>fasf</li>

        <li>fasf</li>

    </ol>

    <dl>

        <dt>ttt</dt>

        <dd>ddd</dd>

        <dd>ddd</dd>

        <dt>ttt</dt>

        <dd>ddd</dd>

        <dd>ddd</dd>

    </dl>

6. 表格标签: <table>

<table>

         <tr>

                <td>标题</td>

                <td>标题</td>

         </tr>

         <tr>

                <td>内容</td>

                <td>内容</td>

         </tr>

</table>

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan:  单元格竖跨多少行

    colspan:  单元格横跨多少列（即合并单元格）

<table border="1">

    <tr>

        <td>主机名</td>

        <td>端口</td>

        <td>操作</td>

    </tr>

    <tr>

        <td>192.1.1</td>

        <td>880</td>

        <td>

            <a href="s2.html">查看详细</a>

            <a href="#">修改</a>

        </td>

    </tr>

</table>

<table border="1">

    <thead>

        <tr>

            <th>表头1</th>

            <th>表头1</th>

            <th>表头1</th>

            <th>表头1</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td colspan="3">1</td>

        </tr>

        <tr>

            <td rowspan="2">1</td>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

        <tr>

            <td>1</td>

            <td>1</td>

            <td>1</td>

        </tr>

</tbody>

</table>

day2 HTML - body的更多相关文章

【从零开始学BPM，Day2】默认表单开发
[课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...
NOIp2016 Day1&Day2 解题报告
Day1 T1 toy 本题考查你会不会编程. //toy //by Cydiater //2016.11.19 #include <iostream> #include <cstd ...
day2
三级菜单: ))))))))))] last_levels.pop() ]]]]]]]]:] information = : ch = msvcrt.getch() ][][: : password= ...
java day2一个模拟双色球的代码
package day2; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...
Python基础-day2
1.Python模块python 中导入模块使用import语法格式:import module_name示例1: 导入os模块system('dir')列出当前目录下的所有文件 # _*_ codi ...
【BZOJ 4517】【SDOI 2016 Round1 Day2 T2】排列计数
本蒟蒻第一次没看题解A的题竟然是省选$Round1$ $Day2$ $T2$ 这道组合数学题. 考试时一开始以为是莫队,后来想到自己不会组合数的一些公式,便弃疗了去做第三题,,, 做完第三题后再回来看 ...
冲刺阶段 day2
day2 项目进展今天本组五位同学聚在一起将项目启动,首先我们对项目进行了规划,分工,明确指出每个人负责哪些项目.由负责第一部分的组员开始编程,在已经搭建好的窗体内,对系部设置进行了编写,本校共六个 ...
python_way ,day2 字符串，列表，字典，时间模块
python_way ,day2 字符串,列表,字典,自学时间模块 1.input: 2.0 3.0 区别 2.0中如果要要用户交互输入字符串: name=raw_input() 如果 name=i ...
二模（8） day2
第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...
Spark菜鸟学习营Day2 分布式系统需求分析
Spark菜鸟学习营Day2 分布式系统需求分析本分析主要针对从原有代码向Spark的迁移.要注意的是Spark和传统开发有着截然不同的思考思路,所以我们需要首先对原有代码进行需求分析,形成改造思路 ...

随机推荐

线性回归 Python实现
import numpy as np import pylab def plot_data(data, b, m): x = data[:, 0] y = data[:, 1] y_predict = ...
element-ui ： <el-table> 按钮点击操作阻止@row-click
描述:<el-table> 点击行时,会跳转到一个详细信息页面, 但是同时这一行也有编辑和删除按钮. 问题: 在点击按钮时,@row-click事件也被触发了,而我并不想触发 row-cl ...
《metasploit渗透测试魔鬼训练营》学习笔记第五章--网络服务渗透攻击
三.网络服务渗透攻击 3.1 内存攻防技术 3.1.1 缓冲区溢出漏洞机理缓冲区溢出是程序由于缺乏对缓冲区的边界条件检查而引起的一种异常行为. ...
python中动态导入模块
当导入的模块不存在时,就会报ImportError错误,为了避免这种错误可以备选其他的模块或者希望优先使用某个模块或包,可以使用try...except...导入模块或包的方式. 例如: Python ...
【zigbee】【蓝牙】射频信号放大器兼容AT2401C
现在科技产品的不断进步,智能家居方面慢慢对信号和距离方面的要求渐渐增加.深圳市动能世纪科技有限公司不断的满足客户需求,推出了一款射频信号放大器AT2401C满足客户距离信号等等的需求.并全方位技术支持 ...
SQL-还原数据库，数据库提示正在还原中的处理办法
还原数据库时,提示还原成功,可是数据库列表中该数据库显示正在还原中: 执行此命令即可: RESTORE DATABASE EnterPriseBuilding WITH RECOVERY 1. 至少有 ...
Notes 20180309 : String第一讲_char的可读序列
实际上在写本文之前,我曾考虑是先探讨面向对象,还是先选择String和Arrays,最后还是选择了后者,并非是面向对象对我们不重要,相反它是Java的灵魂所在,之所以这样的安排是因为这两个是在是我们程 ...
PyCharm2018激活码
亲测可用: 来自:https://blog.csdn.net/u014044812/article/details/78727496
ibatis运行的SQL语句的输出——通过配置log4j
将ibatis 的log4j运行级别调到DEBUG可以在控制台打印出ibatis运行的sql语句 ### 设置Logger输出级别和输出目的地 ###log4j.rootLogger=debug,st ...
Linux（CentOS7）设置自动备份数据库到阿里云OSS
环境:阿里云服务器CentOS7.4 + MySQL5.6 基本思路: 1.编写shell脚本,备份数据库到指定目录下 2.编写Python脚本,把文件上传到OSS 3.把shell脚本和Python ...

day2 HTML - body

<body>内常用标签

1.基本标签

2.表单标签: <form>

2.1 input标签

3. 超链接标签(锚标签): <a> </a>

4.image标签

5. 列表标签

6. 表格标签: <table>

day2 HTML - body的更多相关文章

随机推荐

热门专题

　　2.1 input标签