一、HTML
1.html表格
表格由table标签定义,表格中有行和列其中行用tr表示,每行被分割为若干个单元格由标签td表示。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
1.html表格和边框属性
不定义边框属性,表格不会显示出边框。
<table border="1">
<tr>
<td>ni,hao</td>
<td>hello,word</td>
</tr>
2.html表格表头
表格表头用th定义,大多数表头显示粗体居中的文字。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2.带有标题的标签用caption
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
3.单元格边距cell padding
单元格内容与边框之间的距离
<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
4.单元格间距
是单元格之间的距离cellspacing
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
2.html列表
html支持有序,无序,自定义列表。
1.无序列表
无序列表用ul标签
<ul>
<li>apple</li>
<li>banana</li>
</ul>
2.有序列表
用ol
<ol>
<li>cloth</li>
<li>shift</li>
</ol>
3.自定义列表
自定义列表是项目和注释的组合。dl标签开始,自定义列表项dt,项的解释用dd
<dl>
<dt>coffee</dt>
<dd>-咖啡</dd>
</dl>
3.html区块
html通过div和span元素组合起来。
1.div是块级元素相当于一个容器。
<p>这是一些文本。</p>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>
2.span是内联元素,可用作文本的容器。
与css一起使用时,可为部分文本设置属性。
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛,我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
4.html布局
网站布局时推荐使用div标签。
1.使用div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br> HTML
<br> CSS
<br> JavaScript
</div>
</div>
</body>
</html>
也可以使用表格布局,一般使用css放在外边便于更好的维护等。
2.span元素常用来组合文内的元素
5.html表单
//表单用来收集用户的信息,将收集的信息传输到web服务器。
1.html表单
表单是包含表单元素的区域。
允许用户在表单中输入信息。如:文本域textarea,下拉列表(select),单选框(radio-buttons),复选框(checkbox)等。
使用form标签来创建表单。
<form>
.
input 元素
.
</form>
html中input输入标签,输入类型由type定义。
2.文本域text fields
<body>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
</body>
//当输入字母,数字等内容时,可能用到文本域。
<form>
first name:<input type="text" name="first name"><br>
last name:<input type="text" name="first name">
</from>
大多数浏览器中,文本的默认长度是20字符
3.密码字段input type=“password”
//密码字符不会明文显示
4.单选按钮radio
<from action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女<br>
</from>
5.复选框checkbox
type=“checkbox”
6.提交按钮submit
当用户点击按钮时,表单内的元素会被传输到服务器。
//其中还有个method方法,指的是get或post属性
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
7.下拉表select
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
8.带边框的表单
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
总结
想要彻底掌握的唯一办法就是多复习多看才行。