html基础用法（下）

设计表格：

 <html>

         <head>

                  <title>表格</title>

                  <meta charset="utf-8" />

         </head>

         <body>

                 <table width="500" height="500" border="1" bordercolor="red">

                           <caption>这是表格的标题！</caption>

                           <tr>

                                <th>姓名</th>

                                <th>学科</th>

                                <th>成绩</th>

                           </tr>

                           <tr align="center" valign="bottom">

                                <td colspan="2">张三</td>

                                <td>php</td>

                                <td>60</td>

                           </tr>

                           <tr align="right" vlign="middle">

                                <td rowspan="2">张三</td>

                                <td>python</td>

                                <td>70<td>

                           </tr>

                           <tr align="left" valign="top">

                                <td>java</td>

                                <td>80</td>

                           </tr>

                 </table>

         </body>

 <html>

width：设置表格的宽

height：设置表格的高

border：设置表格边框的粗细

bordercolor：设置表格边框的颜色

caption：表格的标题，默认居中

th：表头

tr：行

align：水平的（表格默认left，然后可以自己设置right，center）

valign：垂直的（表格默认middle，然后可以设置top，bottom）

td：单元格

colspan：合并行

rowspan：合并列

表单：

 <html>

         <head>

                 <title></title>

                 <meta charset="utf=8" />

         </head>

         <body>

                  <form action="1.php" method="GET">

                          用户名：<input type="text" name="username" />

                          密码：<input type="password" name="pass" />

                          <input type="submit" value="立即注册" />

                          <input type="radio" name="sex" />男

                          <input type="radio" name="sex" />女

                          <input type="checkbox" />java

                          <input type="checkbox" />php

                          <input type="checkbox" />python

                          <select>

                                    <option value="bj">北京</option>

                                    <option>广州</option>

                                    <option>上海</option>

                          <select>

                          <textarea cols="50" rows="10"></textarea>

                          <input type="submit" value="立即注册" />

                  </form>

                  <div>

                        你好！

                  </div>

                  <div>

                        我好！

                  </div>

                  <span>

                         大家好！

                  </span>

         </body>

 </html>

form

　　 action是要提交的地址

　　　　【get】是通过url传输的，相对不安全，当你传输的时候会有长度限制。

　　　　【post】通过header头传输的，相对安全，它传输的时候比get传的数据要多。

　　enctype：编码类型，默认不用写

　　　　只有在上传文件的时候才指定该类型。

　　radio 单选按钮，如果你想实现只能选中一个的时候加上name，name值一样。

　　checkbox 复选框，可以选中多个，默认选中的话，是加一个checked

　　hiden 隐藏表单，用途是当数据没有必要让用户看见，但是我们后台还要用这个数据的时候，就用隐藏的去传。

　　file 上传文件

　　reset 重置按钮

input

　　type

　　　　text//文本框

　　　　password/密码

　　　　submit//提交按钮

　　　　value

　　　　placeholder：提示功能，当你在文本输入东西的时候，提示消失。

select

textarea 文本域

　　cols　　rows 注意：他是双标签，在写的时候切记要挨着写两个标签，中间不许有空格，缩进换行。

块元素，行内块元素，行内元素：

 <html>

         <head>

                 <meta charset="utf-8" />

                 <title>块元素</title>

                 <style>

                          div{height:20px;background:red;}

                          span{width:20px;height:15px;#ccc;}

                          img{width:300px;height:300px;border:1px solid red;}

                 </style>

         </head>

         <body>

                  <div>今天是个好天气！</div>  <div>今天是个好天气！</div>

                  <span>今天肚子疼！</span><span>今天肚子疼！</span>

                  <img src="bjqs.jpg" /> <img src="bjqs.jpg" />

         </body>

 </html>

块：

　　div ，p，ul，ol，dl，hr，h1-h6 特点：1、可以设置宽高 2、独占一行 3、不受空格影响

行内：

　　span，em，strong，b，i，u 特点：1、不支持宽高 2、共处一行 3、受空格影响

行内快：

　　img，input 特点：1、支持宽高 2、共处一行 3、受空格影响

行内样式：

 <html>

         <head>

                  <meta charset="utf-8" />

                  <title>块元素</title>

                  <style>

                  </style>

         </head>

         <body>

                   <div style="width:20px;height:15px;background:#ccc;">今天是个好天气！</div> <div>今天是个好天气！</div>

         </body>

 </html>

内联样式表：

 <html>

         <head>

                  <meta charset="utf-8" />

                  <title>块元素</title>

                  <style>

                           div{width:20px;height:15px;backgrounf:#ccc;}

                  </style>

         </head>

         <body>

                  <div>今天是个好天气！</div> <div>今天是个好天气！</div>

         </body>

 </html>

外联样式表：

 <html>

          <head>

                    <meta charset="utf-8" />

                    <title>块元素</title>

                    <style>

                    </style>

                    <link rel="stylesheep" type="text/css" href="1.css" />

          </head>

          <body>

                   <div>今天是个好天气！</div> <div>今天是个好天气！</div>

          </body>

 </html>

 div{width:20px;height:15px;background:#ccc;}

1、行内样式表：

　　写在标签里面的 style"width:......."

2、内联样式表：

　　<style>

　　　　css 代码

　　</style>

3、外联样式表：

html基础用法（下）的更多相关文章

PropertyGrid控件由浅入深(二)：基础用法
目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法控件的外观构成控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...
elasticsearch安装与基础用法
来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...
BigDecimal最基础用法
BigDecimal最基础用法用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...
Smarty基础用法
一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...
前端自动化测试神器-Katalon的基础用法
前言最近由于在工作中需要通过Web端的功能进行一次大批量的操作,数据量大概在5000左右,如果手动处理, 完成一条数据的操作用时在20秒左右的话,大概需要4-5个人/天的工作量(假设一天8小时的工作 ...
oracle入坑日记<六>自增列创建和清除（含序列和触发器的基础用法）
0 前言用过 SQLserver 和 MySQL 的自增列(auto_increment),然而 Oracle 在建表设置列时却没有自增列. 查阅资料后发现 Oracle 的自增列需要手动编写. ...
MarkDown学习——基础用法
目录 MarkDown开发版本MD2All基础用法此处有代码<a id="top"></a>作为页内锚点此处是用自动生成的目录 MarkDown是什么M ...
BigDecimal最基础用法【转】
BigDecimal最基础用法用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...
【转】Shell编程基础篇-下
[转]Shell编程基础篇-下 1.1 条件表达式 1.1.1 文件判断常用文件测试操作符常用文件测试操作符说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 ...
【Python爬虫】selenium基础用法
selenium 基础用法阅读目录初识selenium 基本使用查找元素元素互交操作执行JavaScript 获取元素信息等待前进后退 Cookies 选项卡管理异常处理初识sele ...

随机推荐

【XShell】xshell 中“快速命令集”的使用
突然看到朋友的xshell比我多一个按钮,且一点,哈哈哈 ,实现了很炫酷的功能,耐不住好奇,问了一句,原来是快速命令集! 1.选择快速命令集(两种方法a&b) a:文件 > 属性 > ...
在 Linux 上创建第一个 Service Fabric Java 应用程序
先决条件开始之前,请安装 Service Fabric SDK.Azure CLI,并在 Linux 开发环境中设置开发群集. 如果使用 Mac OS X,则可使用 Vagrant 在虚拟机中设置 ...
pwn 题GDB调试技巧和exp模板
GDB分析ELF文件常用的调试技巧 gdb常用命令首先是gbd+文件名静态调试 ,gdb attach +文件名动态调试为了方便查看堆栈和寄存器最好是安装peda插件安装可以通过pip直 ...
Android使用主题属性引发的问题
最近在做一个项目的Porting.直接改变了应用的Theme,最没有仔细的检查.结果应用在某些场景下直接就Crash了.还好,通过Log可以看到是在Inflate某个资源的时候出错导致的.通过定位资源 ...
Django——form组件和ModelForm
一.原生form实现书城增删改查 1.构建模型并完成数据库迁移 (1)构建书城模型 from django.db import models # Create your models here. # ...
SharePoint 2013 - Cross-domain Library
首先,参考链接:https://msdn.microsoft.com/en-us/library/office/fp179893.aspx?f=255&MSPPError=-214721739 ...
CSS样式编写案例
1.制作如图三角形效果: 步骤一:将右侧盒子设置为相对定位步骤二:在右侧盒子里面新建个子盒子,设置宽高相等,为正方形,绝对定位步骤三:将绝对定位的盒子用CSS3旋转属性旋转 2.制定如图的序列号 ...
1.appium介绍
appium介绍官方网站 1.特点 appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web应用和混合应用. “移动原生应用”是指那些用iOS或者 An ...
Smokeping外置邮箱告警
wget http://xrl.us/cpanm -O /usr/bin/cpanm 1.安装Authen::SASL模块 cpanm --mirror http://mirrors.163.com/ ...
部署Smokeping
1.环境安装 # yum -y install gcc* perl* httpd* libxml2 libxml2-devel libpng libpng-devel glib2 glib2-deve ...

html基础用法（下）

html基础用法（下）的更多相关文章

随机推荐

热门专题