html基础用法（下）
2018-06-24 02:28:37来源：未知 阅读 ()
设计表格：
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>php</td> 17 <td>60</td> 18 </tr> 19 <tr align="right" vlign="middle"> 20 <td rowspan="2">张三</td> 21 <td>pthon</td> 22 <td>70<td> 23 </tr> 24 <tr align="left" valign="top"> 25 26 <td>java</td> 27 <td>80</td> 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
<option></option>
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、内联样式表：
<style>
css 代码
</style>
3、外联样式表：
<link rel="stylesheep" type="text/css" href="css 文件地址" />
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：屏幕适配
下一篇：HTML5 拖放、交换位置
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
