html 详解
1:head 标签
添加 js
<head> 标签内 <script>
<title> 头部信息
<hr> 分割线
2:css 样式
内联样式: <p style="color:blue;margin-left:20px;">This is a paragraph.</p> style属性
元素背景色 <body style="background-color:yellow;">
字体 颜色 大小 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本居中对齐 <h1 style="text-align:center;">居中对齐的标题</h1>
内部样式表: 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<style type="text/css">
body {background-color:witer;} 这里 body 表示的是整个标签内 最要不要这样用,因为一般很少有这种情况
p {color:red;}
table {color:red;}
</style>
外部引用:使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3:图片 <img src="http://www.runoob.com/images/pulpit1.jpg" alt="pic is loss" style="float:right" width="304" height="228" usemap="#planetmap" >
alt 是加载不到图片显示的内容 此标签为 空标签 不需要闭合 style="float:right" 浮动图片在左边或者右边
下面的map 是对于图片中设定位置下点击出现的连接
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.sina.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.sohu.com">
</map>
4:表格:
tr 一行 td 一列
<table border="10" cellspacing="0"> border="1" 带有边框 cellspacing 单元间距 align 左右和中间位置
<tr>
<th>Header 1</th> 标题头部 都在这个table里 按列排列
<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>
5:列表:
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
6: html 区块 div span
div
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div> 分块
7: 表单 就是收集页面用户输入的部分
输入 <input type="text" name="name">
单选:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交:
<input type="submit" value="Submit">
文本域:
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
下拉选择:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
按钮:
<button type="button">点我!</button>
内嵌页面:
<iframe src="C:/Users/Administrator/Desktop/123.html" width="200" height="200"></iframe>
脚本: js
首先 在<script> 中编写脚本
然后在body 的标签中添加脚本的动作 οnclick=脚本方法名()
--------------------------------------------------------------------------------------------
HTML 5 学习
1:head 标签
添加 js
<head> 标签内 <script>
<title> 头部信息
<hr> 分割线
2:css 样式
内联样式: <p style="color:blue;margin-left:20px;">This is a paragraph.</p> style属性
元素背景色 <body style="background-color:yellow;">
字体 颜色 大小 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本居中对齐 <h1 style="text-align:center;">居中对齐的标题</h1>
内部样式表: 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<style type="text/css">
body {background-color:witer;} 这里 body 表示的是整个标签内 最要不要这样用,因为一般很少有这种情况
p {color:red;}
table {color:red;}
</style>
外部引用:使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3:图片 <img src="http://www.runoob.com/images/pulpit1.jpg" alt="pic is loss" style="float:right" width="304" height="228" usemap="#planetmap" >
alt 是加载不到图片显示的内容 此标签为 空标签 不需要闭合 style="float:right" 浮动图片在左边或者右边
下面的map 是对于图片中设定位置下点击出现的连接
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.sina.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.sohu.com">
</map>
4:表格:
tr 一行 td 一列
<table border="10" cellspacing="0"> border="1" 带有边框 cellspacing 单元间距 align 左右和中间位置
<tr>
<th>Header 1</th> 标题头部 都在这个table里 按列排列
<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>
5:列表:
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
6: html 区块 div span
div
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div> 分块
7: 表单 就是收集页面用户输入的部分
输入 <input type="text" name="name">
单选:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交:
<input type="submit" value="Submit">
文本域:
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
下拉选择:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
按钮:
<button type="button">点我!</button>
内嵌页面:
<iframe src="C:/Users/Administrator/Desktop/123.html" width="200" height="200"></iframe>
脚本: js
首先 在<script> 中编写脚本
然后在body 的标签中添加脚本的动作 οnclick=脚本方法名()
--------------------------------------------------------------------------------------------
HTML 5 学习