HTML5基础笔记

HTML CSS JS

作者：徐天一

图片

<img src="xx/xx/xx.jpg" align="right middle left" 
width = "xxxpx  90%" height = "xxxpx  10%" alt="解释" />

如果使用百分比的时候，是相对于父容器大小的百分比
alt的作用：http://www.w3school.com.cn/tags/att_img_alt.asp
alt利于搜索引擎的搜索

相对路径和绝对路径

path = 
当前路径./xx.jpg 
上一级路径../xx.jpg  
上上一级路径../../xx.jpg  (相对路径就是从当前路径寻找，
当前路径只的是当前html所在路径)
下一级路径 xx/xx.jpg
path="C:\Users\souke\Desktop\web01\01.jpg"
一般在项目中都使用相对路径

w3dschool HTML教程（可以当做字典来查询）
http://www.w3school.com.cn/html/index.asp
可自行搜索w3cschool离线手册

无序列表

<ul type="xxx">
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

自定义列表

<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>运动</dt>
<dd>打篮球</dd>
<dd>踢足球</dd>
</dl>

超级链接

<a href="http://www.baidu.com" target="">百度</a>
<a href="web02.html">百度</a>

可以是本机页面，也可以是任意的网页地址(内部链接或者外部链接)
空链接 href="#"
超级链接可以给文字或者图片添加
target

• _self

• _blank _top

• _parent

title属性
手放在链接上的时候显示的提示文字
name属性
定义锚名称

跳转到锚点
（可以使用某个文字或者某个图片作为锚点，也可以定义一个空的锚点）

href="#锚名"

跳转到别的页面的锚点位置

href="xxx.html#锚名"

邮件链接

<a href="mailto:admin@sikiedu.com">给我发</a>

文件下载

<a href="xxx.zip">下载</a>

浏览器会根据链接类型，决定是否下载。

空格

 

表格

表格 tr:table row  td table data
<table border="1px"  width="34px  xx%" height="12px" 
align="center" bgcolor="red" cellspacing="3px"
 cellpadding="10px"> 
 <tr height="23px" bgcolor="#00ee90"> 
 <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>

table上的属性
border
width
height
align
bgcolor
cellspacing
cellpadding
tr上的属性
align水平对齐方式
valign垂直对齐方式
bgcolor
width
height
td上的属性
height
bgcolor

表格合并操作

合并多列

<td colspan="2">row 1, cell 1</td>

合并多行

<td rowspan="2">row 1, cell 1</td>

多列多行合并

<td colspan="2" rowspan="2">row 1, cell 1</td>

单元格里面可以嵌套子表格
被嵌套的表格是一个完整的表格
要放在td，某个单元格里面

表格的表头
效果：内容居中，加粗显示
注意：可以有多个表头

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>

表格的标题：

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

如何查看网页源代码：
F12调试

表单的作用

1. 注册账号
2. 登录账号
3. 发表话题
4. 发表问题

总结：需要输入信息，并提交给服务器的地方
表单的作用就是把用户输入的信息，发送给服务器处理。

表单标签

<form></form>

在表单标签里面可以包含各种其他标签
文本框，文本域，列表，单选框，多选框，按钮…
上述一个或者多个来组成一个表单

input 输入
textarea 文本域
select 下拉列表
option 下拉列表的项
button 按钮
…

input 可以做文本输入框，按钮，文件，单选按钮，复选按钮

<input type="" name="" />
text		文本
password	密码
file		文件
checkbox	多选按钮
radio	单选按钮
button	按钮
submit	提交按钮
reset	重置按钮
hidden	隐藏
image	图片
 <input type="text" /> text和password

其他属性：

name		名字
maxlength	最大字符长度
value		默认值
placeholder	提示信息

单选框：

<input type="radio" name="sex" value="man" checked />
<input type="radio" name="sex" value="woman"/>

复选框：

<input type="checkbox" name="hobby"
 value="reading" checked />

按钮(普通按钮，提交按钮，重置按钮)：

<input type="button" name="" value="普通按钮"  />
<input type="submit" name="" value=""  />
<input type="reset" name="" value=""  />

图片提交按钮按钮：

<input  type="image" name="image_submit" src="xxx.jpg"  />

隐藏域：

<input type="hidden" name="" value=""/>

下拉列表：

<select name="city" size =" " mutiple>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>

例子：月份选择，城市选择

文本域：

<textarea name="" placeholder="提示信息" rows="2" cols="34">
</textarea>

form表单属性
action 提交路径
method get/post传送数据的方式
get直接把要传输的数据放在URL里面，适合传输少量数据，一般用于请求数据，明文传输
post把数据封装到http请求里面，适合传输大量数据和重要数据传输（登录，注册，发表文章）
name 表单名字
target _self _blank
提交一个表单，相当于点击了一个超链接，打开了一个新的网页，不过通过表单的方式请求
网页的时候，这个请求里面是带有数据的。
enctype http://www.w3school.com.cn/tags/att_form_enctype.asp

框架

<frameset cols="25%,75%">  rows上下划分  cols 左右划分
   <frame src="frame_a.htm"/>
   <frame src="frame_b.htm" name="myname"/> 
</frameset>

frame的name，可以作为超链接的target（目标）
注意：不能将 标签与 标签同时使用！

这是本人学习中的笔记，希望对你有所帮助。