<body>内常用标签

1.基本标签

　　所有标签分为：

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

　　　　# 行内标签： span（白板）

　　　　

　　1. 图标，  &nbsp;  &gt;   &lt;

<a href="http://www.mi.com">小&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&gt;米</a>

　　2. p标签，段落

  1.     <p>1</p>
  2.     <p>12</p>
  3.     <p>123</p>

　　　　

　　3. br，换行    

  1. <p>adfafdsa<br />fasdfasfasdfdsa</p>

　　　　

　　4.h系列

  1.     <h1>Alex</h1>
  2.     <h2>Alex</h2>
  3.     <h3>Alex</h3>
  4.     <h4>Alex</h4>
  5.     <h5>Alex</h5>
  6.     <h6>Alex</h6>

　　　　

　　5.div

  1.      <div>123</div>
  2.     <div>123</div>
  3.     <div>123</div>

　　　　

嵌套

  1.     　　<div>
  2.         　　<div id="i1">adfadsf</div>
  3.        　　 <span></span>
  4.        　　 <p>
  5.             　　<div></div>
  6.        　　 </p>
  7.    　　 </div>

　　　　

　　6.span     

  1.      <span>hello</span>
  2.     <span>hello</span>
  3.     <span>hello</span>

　　　　

ps：chorme审查元素的使用

- 定位

- 查看样式

　　　　　　

2.表单标签: <form>

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

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

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

  1. input type='text'     - name属性，value="赵凡"
  2. input type='password' - name属性，value="赵凡"
  3. input type='submit'   - value='提交' 提交按钮，表单
  4. input type='button'   - value='登录' 按钮
  5.  
  6. input type='radio'    - 单选框 value，checked="checked"，name属性（name相同则互斥）
  7. input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据）
  8. input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
  9. input type='rest'     - 重置

　　

　表单属性

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

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

　　2.1 input标签

　　　　　

  1.     <form action="http://localhost:8888/index" method="get">
  2.         <input type="text" name="user"/>
  3.         <input type="text" name="email"/>
  4.         <input type="password" name="pwd"/>
  5.         <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}-->
  6.         <input type="button" value="登录1"/>
  7.         <input type="submit" value="登录2"/>
  8.     </form>
  9. 	<br />
  10.     <form action="http://localhost:8888/index" method="post">
  11.         <input type="text" name="user"/>
  12.         <input type="text" name="email"/>
  13.         <input type="password" name="pwd"/>
  14.         <input type="button" value="登录1"/>
  15.         <input type="submit" value="登录2"/>
  16.     </form>

　　

　　　　　　

  1. <form action="https://www.sogou.com/web">
  2.         <input type="text" name="query" value="qqq"/>
  3.         <input type="submit" value="sogou"/>
  4. </form>

　　

　　　　　　

  1. <form>
  2.         <div>
  3.             <p>请选择性别：</p>
  4.             男：<input type="radio" name="gender" value="1" checked="checked"/>
  5.             女：<input type="radio" name="gender" value="2" />
  6.             alex：<input type="radio" name="gender" value="2" />
  7.             <p>爱好：</p>
  8.             篮球:<input type="checkbox" name="favor" value="1"/>
  9.             zu球:<input type="checkbox" name="favor" value="2" checked="checked"/>
  10.             tai球:<input type="checkbox" name="favor" value="3"/>
  11.             pi球:<input type="checkbox" name="favor" value="4"/>
  12.             <!--favor_list = self.get_argument('favor')-->
  13.             <!--[1,2,3]-->
  14.         </div>
  15.         <input type="submit" value="提交">
  16. 	<input type="reset" value="重置">
  17. </form>

　　

　　　　　　 

  1. <form enctype="multipart/form-data">
  2.         <div>
  3.             <p>上传文件</p>
  4.             <input type="file" name="fname"/>
  5.         </div>
  6.         <input type="submit" value="提交">
  7. </form>

　　

　　2.2 textarea  多行文本

- name属性

　　　　　　

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

　　

　　2.3 select标签 下拉框

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

　　　　　　

  1.     <select name="city" size="10" multiple="multiple">
  2.         <option value="1">biejing</option>
  3.         <option value="2">xi;an</option>
  4.         <option value="3" selected="selected">shanghai</option>
  5.         <option value="4">chengdu</option>
  6.     </select>

　　　

　　2.4  label标签

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

　　　　　　

  1.      <label for="username">用户名：</label>
  2.      <input id="username" type="text" name="user" />

　　

　　2.5. fieldset 框

　　　　

  1. <fieldset >
  2. 		<legend>登录</legend>
  3. 		<label>  用户名:</label>
  4. 		<br/>
  5. 		<label > 密码:</label>
  6. </fieldset>

　　

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

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

以上标签可以url提交数据

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

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

- 跳转

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

　　　　

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

　　

　　　　

  1. <a href="#i1">第一章</a>
  2. <a href="#i2">第2章</a>
  3. <a href="#i3">第3章</a>
  4.  
  5. <div id ="i1" style="height: 600px;">第一章的内容</div>
  6.     <div id ="i2" style="height: 600px;">第2章的内容</div>
  7. <div id ="i3" style="height: 600px;">第3章的内容</div>

　　

4.image标签  

src

alt

title

.　　　　　　

  1. <a href="http://www.mi.com">
  2.     <img src="1.jpg" title="霉霉" style="height: 200px;width: 300px;" alt="美女"/>
  3. </a>

　　

5. 列表标签

  1. <ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
  2. 　　<li>:列表中的每一项.
  3. <ol>: 有序列表
  4. 　　<li>:列表中的每一项. 
  5.  
  6. <dl> 定义列表
  7. 　　<dt> 列表标题
  8. 　　<dd> 列表项

　　

　　　　　　

  1. <ul>
  2.         <li>fasf</li>
  3.         <li>fasf</li>
  4.         <li>fasf</li>
  5.     </ul>
  6.  
  7.     <ol>
  8.         <li>fasf</li>
  9.         <li>fasf</li>
  10.         <li>fasf</li>
  11.     </ol>
  12.  
  13.     <dl>
  14.         <dt>ttt</dt>
  15.         <dd>ddd</dd>
  16.         <dd>ddd</dd>
  17.         <dt>ttt</dt>
  18.         <dd>ddd</dd>
  19.         <dd>ddd</dd>
  20.     </dl>

　　

6. 表格标签: <table>

  1. <table>
  2.          <tr>
  3.                 <td>标题</td>
  4.                 <td>标题</td>
  5.          </tr>
  6.  
  7.          <tr>
  8.                 <td>内容</td>
  9.                 <td>内容</td>
  10.          </tr>
  11. </table>

　　

  1. 属性:
  2.  
  3.     border: 表格边框.
  4.  
  5.     cellpadding: 内边距
  6.  
  7.     cellspacing: 外边距.
  8.  
  9.     width: 像素 百分比.（最好通过css来设置长宽）
  10.  
  11.     rowspan:  单元格竖跨多少行
  12.  
  13.     colspan:  单元格横跨多少列（即合并单元格）

　　

　　　　　　

  1. <table border="1">
  2.     <tr>
  3.         <td>主机名</td>
  4.         <td>端口</td>
  5.         <td>操作</td>
  6.     </tr>
  7.     <tr>
  8.         <td>192.1.1</td>
  9.         <td>880</td>
  10.         <td>
  11.             <a href="s2.html">查看详细</a>
  12.             <a href="#">修改</a>
  13.         </td>
  14.     </tr>
  15. </table>

　　

　　　　　　

  1. <table border="1">
  2.     <thead>
  3.         <tr>
  4.             <th>表头1</th>
  5.             <th>表头1</th>
  6.             <th>表头1</th>
  7.             <th>表头1</th>
  8.         </tr>
  9.     </thead>
  10.  
  11.     <tbody>
  12.         <tr>
  13.             <td>1</td>
  14.             <td colspan="3">1</td>
  15.         </tr>
  16.         <tr>
  17.             <td rowspan="2">1</td>
  18.             <td>1</td>
  19.             <td>1</td>
  20.             <td>1</td>
  21.         </tr>
  22.         <tr>
  23.             <td>1</td>
  24.             <td>1</td>
  25.             <td>1</td>
  26.         </tr>
  27. </tbody>
  28. </table>

day2 HTML - body的更多相关文章

  1. 【从零开始学BPM，Day2】默认表单开发

    [课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...

  2. NOIp2016 Day1&Day2 解题报告

    Day1 T1 toy 本题考查你会不会编程. //toy //by Cydiater //2016.11.19 #include <iostream> #include <cstd ...

  3. day2

    三级菜单: ))))))))))] last_levels.pop() ]]]]]]]]:] information = : ch = msvcrt.getch() ][][: : password= ...

  4. java day2一个模拟双色球的代码

    package day2; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt ...

  5. Python基础-day2

    1.Python模块python 中导入模块使用import语法格式:import module_name示例1: 导入os模块system('dir')列出当前目录下的所有文件 # _*_ codi ...

  6. 【BZOJ 4517】【SDOI 2016 Round1 Day2 T2】排列计数

    本蒟蒻第一次没看题解A的题竟然是省选$Round1$ $Day2$ $T2$ 这道组合数学题. 考试时一开始以为是莫队,后来想到自己不会组合数的一些公式,便弃疗了去做第三题,,, 做完第三题后再回来看 ...

  7. 冲刺阶段 day2

    day2 项目进展 今天本组五位同学聚在一起将项目启动,首先我们对项目进行了规划,分工,明确指出每个人负责哪些项目.由负责第一部分的组员开始编程,在已经搭建好的窗体内,对系部设置进行了编写,本校共六个 ...

  8. python_way ,day2 字符串，列表，字典，时间模块

    python_way ,day2 字符串,列表,字典,自学时间模块 1.input: 2.0 3.0 区别 2.0中 如果要要用户交互输入字符串: name=raw_input() 如果 name=i ...

  9. 二模 （8） day2

    第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...

  10. Spark菜鸟学习营Day2 分布式系统需求分析

    Spark菜鸟学习营Day2 分布式系统需求分析 本分析主要针对从原有代码向Spark的迁移.要注意的是Spark和传统开发有着截然不同的思考思路,所以我们需要首先对原有代码进行需求分析,形成改造思路 ...

随机推荐

  1. Unable to perform unmarshalling at line number 16 and column 63 in RESOURCE hibernate.cfg.xml. Message: cvc-elt.1: 找不到元素 'hibernate-configuration' 的声明。

    七月 02, 2017 4:32:37 下午 org.hibernate.Version logVersionINFO: HHH000412: Hibernate Core {5.2.10.Final ...

  2. [运维笔记] Mysql单库备份脚本

    工作中用到的Mysql单库备份Shell脚本,压缩备份,并在Crontab中添加计划任务,最多保存60天的备份 #!/bin/bash . /etc/profile USERNAME=zabbix P ...

  3. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  4. 【转】Spring+Mybatis+SpringMVC+Maven+MySql搭建实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何使用Maven来搭建Spring+Mybatis+SpringMVC+M ...

  5. vim使用四个空格代替TAB键

    让VIM可以在你写程序的时候自动缩进,并用4个空格代替TAB键. 编辑 ~/.vimrc 保存这四行: “set smartindent”, “set tabstop=4”, “set shiftwi ...

  6. position+left+bottom+top+right

    今天才知道原来position加上上下左右可以控制的到div的宽度的 比如我现在有一个需要 这样一个需求 现在是红色部分50px 但是你可能不知道剩下的蓝色部分的高度是多少 蓝色部分要怎么填满剩余的高 ...

  7. execute immediate

    首先在这里发发牢骚,指责下那些刻板的书写方式,不考虑读者理不理解,感觉就是给专业人员用来复习用的一样,没有前戏,直接就高潮,实在受不了!没基础或基础差的完全不知道发生了什么,一脸懵逼的看着,一星差评! ...

  8. iOS之oc与html之间的交互（oc中调用js的方法）

    一.运行的效果图 1.刚开始的效果   2.运行结束后的效果   二.准备工作 1.准备一个html文件导入到oc工程中 2.jiaohu.html文件的原始内容   3.从oc语言中操作.html文 ...

  9. PHP设置Redis key在当天有效|SCP对拷如何连接指定端口(非22端口)的远程主机

    $redis->set($key,$value); $expireTime = mktime(23, 59, 59, date("m"), date("d" ...

  10. STM32 HAL库学习系列第6篇---定时器TIM 级联配置

    应用情景 使用定时器配置编码器模式,发现STM32只有两个定时器是32位,16位的测量值不够用,发现是可以使用两个16位定时器级联为32位的. 我是在使用编码器计数电机转速时使用,但是最终实现的效果不 ...