html基础用法（下）

hiyang 发布于2019-04-23 13:35 / 2173人阅读

摘要：通过头传输的，相对安全，它传输的时候比传的数据要多。编码类型，默认不用写只有在上传文件的时候才指定该类型。文本域注意他是双标签，在写的时候切记要挨着写两个标签，中间不许有空格，缩进换行。

设计表格：

 1 <html>
 2         <head>
 3                  <title>表格title>
 4                  <meta charset="utf-8" />
 5         head>
 6         <body>
 7                 <table width="500" height="500" border="1" bordercolor="red"> 
 8                           <caption>这是表格的标题！caption>
 9                           <tr>
10                                <th>姓名th>
11                                <th>学科th>
12                                <th>成绩th>
13                           tr>
14                           <tr align="center" valign="bottom">
15                                <td colspan="2">张三td>
16                                <td>phptd>
17                                <td>60td>
18                           tr>
19                           <tr align="right" vlign="middle">
20                                <td rowspan="2">张三td>
21                                <td>pythontd>
22                                <td>70<td>
23                           tr>
24                           <tr align="left" valign="top">
25                                
26                                <td>javatd>
27                                <td>80td>
28                           tr>
29                           
30                 table>
31         body>
32 <html>

width：设置表格的宽

height：设置表格的高

border：设置表格边框的粗细

bordercolor：设置表格边框的颜色

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

th：表头

tr：行

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

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

td：单元格

colspan：合并行

rowspan：合并列

表单：

 1 <html>
 2         <head>
 3                 <title>title>
 4                 <meta charset="utf=8" />
 5         head>
 6         <body>
 7                  <form action="1.php" method="GET">
 8                          用户名：<input type="text" name="username" />
 9                          密码：<input type="password" name="pass" />
10                          <input type="submit" value="立即注册" />
11                          <input type="radio" name="sex" />男
12                          <input type="radio" name="sex" />女
13                          <input type="checkbox" />java
14                          <input type="checkbox" />php
15                          <input type="checkbox" />python
16                          <select>
17                                    <option value="bj">北京option>
18                                    <option>广州option>
19                                    <option>上海option>
20                          <select>
21                          <textarea cols="50" rows="10">textarea> 
22                          <input type="submit" value="立即注册" />    
23                  form>
24                  <div>
25                        你好！
26                  div>
27                  <div>
28                        我好！
29                  div>
30                  <span>
31                         大家好！
32                  span>
33         body>
34 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 注意：他是双标签，在写的时候切记要挨着写两个标签，中间不许有空格，缩进换行。

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

 1 <html>
 2         <head>
 3                 <meta charset="utf-8" />
 4                 <title>块元素title>
 5                 <style>
 6                          div{height:20px;background:red;}
 7                          span{width:20px;height:15px;#ccc;}
 8                          img{width:300px;height:300px;border:1px solid red;} 
 9                 style>
10         head>
11         <body>
12                  <div>今天是个好天气！div>  <div>今天是个好天气！div>
13                  <span>今天肚子疼！span><span>今天肚子疼！span>
14                  <img src="bjqs.jpg" /> <img src="bjqs.jpg" />
15         body>
16 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、受空格影响

行内样式：

 1 <html> 
 2         <head>
 3                  <meta charset="utf-8" />
 4                  <title>块元素title>
 5                  <style>
 6                   
 7                  style>
 8         head>
 9         <body>
10                   <div style="width:20px;height:15px;background:#ccc;">今天是个好天气！div> <div>今天是个好天气！div>
11         body>
12     
13 html>

内联样式表：

 1 <html>
 2         <head>
 3                  <meta charset="utf-8" />
 4                  <title>块元素title>
 5                  <style>
 6                           div{width:20px;height:15px;backgrounf:#ccc;}
 7                  style>
 8         head>
 9         <body>
10                  <div>今天是个好天气！div> <div>今天是个好天气！div>
11         body>
12 html>

外联样式表：

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>块元素title>
 5                    <style>
 6 
 7                    style>
 8                    <link rel="stylesheep" type="text/css" href="1.css" />
 9          head>
10          <body>
11                   <div>今天是个好天气！div> <div>今天是个好天气！div>
12          body>
13 html>

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

1、行内样式表：

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

2、内联样式表：

3、外联样式表：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2076.html

补习前端（css+html）基础-1：

摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

marek 2019-08-29 15:24 评论0 收藏0
补习前端（css+html）基础-1：

摘要：标签将表单内容的一部分打包，生成一组相关表单的字段。提示和注释注释元素是空元素，它仅包含属性。注释此元素只能存在于部分，不过它可出现任何次数。属性属性规定当前文档与被链接文档之间的关系。该标签用于组合表格的主体内容。 1.HTML 标签: 实例组合表单中的相关元素： health information height: weight: 定义和用法 fieldset 元素...

douzifly 2019-08-02 10:26 评论0 收藏0
webpack基础用法

摘要：的用法全在配置中是在环境下运行的，学习之前，请先自行安装环境含安装第一步全局安装第二步建立项目文件夹，如一直回车下去项目目录本地安装搭建目录结构在项目根目录下的简单目录结构如下入口文件安装时，自动建立 ----------webpack的用法全在配置中！！webpack是在node环境下运行的，学习webpack之前，请先自行安装node环境（含npm）；安装webpack：第一步...

yexiaobai 2019-08-19 18:10 评论0 收藏0
html基础用法（上）

摘要：超文本标记语言的结构包括头部分，和主体部分，期中头部提供关于网页的信息，主体部分提供网页的具体内容。超文本标记语言是标准通用语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。html的定义： html超文本标记语言，标准通用标记语言下的一个应用。超文本就是指页面内可以包含图片，链接，甚至音乐，程序等非文字语言。超文本标记语言的结构包括头部分（head...

BlackHole1 2019-04-23 13:35 评论0 收藏0
JSDuck用法详解

摘要：语法父类名表示当前类继承于哪个类的标签。成员标签成员标签作用于类中的配置属性函数事件。表明可被子类继承，和一起使用。示例获取圆的面积圆的半径面积值作用于函数，表明函数的标签。作用于函数，表明构造函数参数的标签，用法同。字数：3692字阅读时间：15分钟前言首先，咱们有一个前提，JSDuck对我们而言只是一个便于API查看的文档化工具。因此，只要它能够满足我们文...

xiaochao 2019-08-21 18:41 评论0 收藏0