设计表格：

 <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

　　<option></option>

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、外联样式表：

　　<link rel="stylesheep" type="text/css" href="css 文件地址" />

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

  1. PropertyGrid控件由浅入深(二)：基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  2. elasticsearch安装与基础用法

    来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...

  3. BigDecimal最基础用法

    BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...

  4. Smarty基础用法

    一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...

  5. 前端自动化测试神器-Katalon的基础用法

    前言 最近由于在工作中需要通过Web端的功能进行一次大批量的操作,数据量大概在5000左右,如果手动处理, 完成一条数据的操作用时在20秒左右的话,大概需要4-5个人/天的工作量(假设一天8小时的工作 ...

  6. oracle入坑日记<六>自增列创建和清除（含序列和触发器的基础用法）

    0   前言 用过 SQLserver 和 MySQL 的自增列(auto_increment),然而 Oracle 在建表设置列时却没有自增列. 查阅资料后发现 Oracle 的自增列需要手动编写. ...

  7. MarkDown学习——基础用法

    目录 MarkDown开发版本MD2All基础用法 此处有代码<a id="top"></a>作为页内锚点 此处是用自动生成的目录 MarkDown是什么M ...

  8. BigDecimal最基础用法【转】

    BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...

  9. 【转】Shell编程基础篇-下

    [转]Shell编程基础篇-下 1.1 条件表达式 1.1.1 文件判断 常用文件测试操作符 常用文件测试操作符 说明 -d文件,d的全拼为directory 文件存在且为目录则为真,即测试表达式成立 ...

  10. 【Python爬虫】selenium基础用法

    selenium 基础用法 阅读目录 初识selenium 基本使用 查找元素 元素互交操作 执行JavaScript 获取元素信息 等待 前进后退 Cookies 选项卡管理 异常处理 初识sele ...

随机推荐

  1. java线程的interrupt方法

    java现成的interrupt方法比较容易误导新手,它其实是不会中断(停止)当前的线程,只是标志一下当前线程的某个状态值(中断标志位),并且这个状态为只对阻塞方法(比如说:             ...

  2. [转]Create Custom Exception Filter in ASP.NET Core

    本文转自:http://www.binaryintellect.net/articles/5df6e275-1148-45a1-a8b3-0ba2c7c9cea1.aspx In my previou ...

  3. PHP file_put_contents() 函数

    file_put_contents() 函数把一个字符串写入文件中. 与依次调用 fopen(),fwrite() 以及 fclose() 功能一样. 语法如下 file_put_contents(f ...

  4. 算法——查找排序相关面试题和leetcode使用

    1.给两个字符串s和t,判断t是否为s的重新排列后组成的单词. s = "anagram", t = "nagaram", return true. s = & ...

  5. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  6. php有经纬度计算距离

    /** *  @desc 根据两点间的经纬度计算距离 *  @param float $lat 纬度值 *  @param float $lng 经度值 */  function getDistanc ...

  7. iOS 在Host App 与 App Extension 之间发送通知

    如何从你的一个App发送通知给另一个App? (例:搜狗输入法下载皮肤完成后使用皮肤) 注:搜狗输入法是App.而键盘是Extension 当你为你的App 添加 App Extension时,如果想 ...

  8. 论文投稿Cover letter

    转自:http://blog.sciencenet.cn/blog-479412-686426.html,感谢分享! 1.第一次投稿Cover letter:主要任务是介绍文章主要创新以及声明没有一稿 ...

  9. Windows远程桌面，出现身份验证错误，要求的函数不正确

    升级windows10 1803后,mstsc远程桌面出现 mstsc 远程桌面要求的函数不受支持,这可能是由于 CredSSP 加密 Oracle 修正.如图所示: 运行(win+r) gpedit ...

  10. jquery表单

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...