体育生学编程——html学习
2015-02-04 20:06
197 查看
HTML学习
1、HTML介绍（了解即可）
HTML (Hyper Text Markup Language)：HTML就是超文本标记语言的简写，是最基础的网页语言
HTML的版本：
2.0（IETF）、3.0（W3C）、4.01（W3C）、5.0（W3C）
IETF： Internet Engineering Task Force
W3C：World Wide Web Consortium
HTML的特点：
是通过标签来定义的语言，代码都是由标签所组成，代码不用区分大小写
由<html>开始，</html>结束
由头部分<head></head>和体部分<body></body>两部分组成
头部分是给HTML页面增加一些辅助或者属性信息，它里面的内容会最先加载
体部分是真正存放页面数据的地方
HTML的标签：
多数标签都是有开始标签和结束标签。例如：<html></html> <p>段落段落</p>
其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。例如：换行<br /> 分割线<hr /> 也可以写作<br><hr> 斜线可以不写
HTML标签中的属性：
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性
通过对属性值的改变，增加了更多的效果选择
属性名与属性值之间用“=”连接
属性值可以用双引号、单引号、不用引号，一般都会用双引号（或公司规定书写规范）
2、头标签<head>
<title>页面的标题
<base>
页面超链接的基本属性
href：页面所有超链接默认从这个路径开始
target：页面所有超链接默认的target
<meta>
页面描述信息
<meta name="keywords" content="Java,.Net,Android,iOS">蜘蛛爬取时看，搜素引擎SEO有关
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 告知浏览器此页面内容、类型、编码
<meta http-equiv="refresh" content="3;url=http://www.maomao.com">三秒后刷新到某个页面
3、字体<font>
字体标签<font>：<font size=5 color=red>字体标签示例</font>
简单颜色可是直接写对应的英文
复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列
如：#FF0000表示红色、#00FF00表示绿色
标题标签<h1>、<h2> ... <h6>：
标题是文本中常用的内容，为了方便操作而定义的
其实就是某个字号和粗体的组合
4、列表<dl><dt><dd>
无标签：<dl>列表、<dt>标题、<dd>列表项
数字标签：
<ol>列表、<li>列表项
type属性更改项目符号（a A 1 i I）
符号标签：
<ul>列表、<li>列表项
type属性更改项目符号（circle空心圆、disc实心圆、square正方形）
<span style="font-size:14px;"> <dl> <dt>公司部门</dt> <dd>软件研发部</dd> <dd>财务部</dd> <dd>行政部</dd> <dl> <ol type="i"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol> <ul type="square"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol></span>效果图
5、超链接<a>
链接标签<a>：<span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span>
href：要链接的地址
target：显示位置
<span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark" /></span>
在页面的某个位置做出标记
<span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span>
点击链接跳转到标记位置
6、图像<image>
图像标签<img>：<span style="font-size:14px;"><span style="white-space:pre"> </span><img src="1.jpg" align="right" border="3" alt="图片说明文字" /> </span>src: 图片路径
align: 对齐方式
border: 边框粗细
图像地图<map>：
在<img>标签中使用usemap属性，指定图像可以用作地图
使用<map>及<area>标签可以把图像的一部分作为超链接
<span style="font-size:14px;"><span style="white-space:pre"> </span><img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map></span>7、框架<frameset>
框架集合标签<frameset>：<frameset>中可以放入多个<frame>框架，把页面分成几个部分
<frameset>不能放在body中
<span style="font-size:14px;"><frameset rows="20%,*">
<frame src="1.html" name="top" />
<frameset cols="20%,*">
<frame src="2.html" name="left" />
<frame src="3.html" name="right" />
</frameset>
</frameset></span>rows：框架集合每行的高度cols：框架集合每列的宽度
src：框架中显示的页面
name：框架的名字，可用做超链接的target
内联框架<iframe>：
<span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe>
<iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span> 可以在页面中嵌入另一个页面src：要嵌入的页面
innerHTML：如果浏览器无法显示iframe，则会显示该文本
8、表格<table>
表格标签<table>：<caption> 标题
<tr> 表格中的一行
<td> 放在<tr>中代表一个单元格
<th> 类似<tr>通常用在第一行或最后一行
<span style="font-size:14px;"><table border="1" width="40%" > <!-- 40%会岁窗体大小变化 -->
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”>
<td>张三</td>
<td>23</td>
</tr>
</table></span>
多行多列<td>：
colspan属性：控制一个单元格占多列
rowspan属性：控制一个单元格占多行
<thead>、<tbody>、<tfoot>：
三个标签都是放在table下，内部可以放tr标签
<thead> 表头，通常用在第一行
<tbody> 表体，表格中间的内容，可以有多个
<tfoot> 表脚，通常用在最后一行
9、表单<form>重要<input>
表单标签<form>：内部可以包含文本框、单选、多选、下拉列表等表单项
可以把用户在页面中的输入和选择提交到一个地址
常用属性：
action：提交地址
method：提交方式
<span style="font-size:14px;"><form action="要提交的地址" method="get">
<input type="text" name="username">
<input type="password" name="password">
</form></span>输入项<input>：
通过指定type属性可以定义不同的输入项：
text：普通文本框
password：密码框
radio：单选按钮
checkbox：多选按钮
file：文件
hidden：隐藏字段
submit：文本提交按钮
image：
图片提交按钮
reset：重置按钮
button：普通按钮
下拉列表<select>
默认为单选，multipe属性指定是否为多选
size属性指定显示个数
内部用<option>标签指定其中选项
文本域<textarea>
rows属性指定行数
cols属性指定列数
标签<label>
可以用来方便点击或者设置快捷键
<label><input type="radio"> 男</label>
<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />
<span style="font-size:14px;"> <form action="success.html" method="get">
<table width="50%" border="1" cellpadding="10" cellspacing="0">
<tr>
<td>用户名：</td>
<td><input id="user" name="username" type="text"></td>
</tr>
<tr>
<td>密码：</td>
<td><input
name="password" id="pass"type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<label><input type="checkbox" name="interest" value="smoke">抽烟</label>
<label><input type="checkbox" name="interest" value="drink">喝酒</label>
<label><input type="checkbox" name="interest" value="tangtou">烫头</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="file" name="portrait ">
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<!--multiple="multiple" size="10" -->
<option>-请选择城市-</option>
<option value="bj">-北京-</option>
<option>-广州-</option>
<option>-成都-</option>
<option>-上海-</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="rusume" rows="10" cols="30">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
<input type="image" src="../image/reg.gif">
<input type="reset" value="重填">
<input type="button" value="普通按钮" onclick="alert('你好！')">
</td>
</tr>
<label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 -->
</table>
<input type="hidden" name="xxx" value="ssss">
</form></span>
10、注释<!-- --> 特殊字符
特殊字符：一些特殊符号，比如< > & 等，在代码中会被浏览器识别并解释
所以用一些特殊的方式来表示
注释用<!-- 注释内容-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 