参考个人文章:http://www.zhuzhuman.com/nav-1/type-4/article/4.html
web前端:
1.HTML(网页内容载体 Hypertext Markup Language),网页的结构层(骨架)。
2.CSS(网页外衣 Cascading styles sheets),网页表现层(样子)。
3.JS(实现网页上的特殊效果和逻辑 JavaScript),网页行为层(行为)。
1-1.认识html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>举个例子</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="此网页描述" />
</head>
<body>
网页在浏览器显现的区域
</body>
</html>
1. DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本,<!DOCTYPE html> 是最简洁写法。
2. <html lang="en">...</html> html标签,标签里面包含body、head等标签。lang=“en“用来告诉浏览器这是一个英文页面,也可以为lang="zh"或lang="zh-CN"表示中文网页。
3. <head>...</head> head标签,里面常放meta、title、link、style、script等标签。一般用来放标题、关键字、css、js等内容。
4. <meta charaset="UTF-8" ,声明你的编码语言格式,utf-8支持中文。
5. <title>...</title> title标签。网页的标题。即平常打开的网页窗口的名字。
6. <body>...</body> body标签,网页主要显示区域。里面用来放要在网页上显示的内容。
1-2.认识html里面的标签
1-2-1 标签书写分类:
1. 成对出现的标签:<html></html>、<head></head>、<body></body>、<p></p>....等等
这些标签是以</标签名>为闭合标签,标签中间写相应内容。
2. 单标签:<meta />、<br/>、<link />、<input />...等,
这些标签是单标签,使用时为了规范尽量要加 / 。单标签一般通过标签属性来添加相应功能。
1-2-2 代码注释
1. html代码注释:
<!--注释内容-->
2. css代码注释:
/*注释内容*/
3. js代码注释:
单行代码注释://注释内容;
多行代码注释:/*多行代码*/。
1-2-3 标签介绍(红色为常用标签)
1.body标签:
<body>...</body>放网页要展示的内容。
2.p标签:
<p>...</p>段落标签,添加段落,有默认样式。
3.<h1></h1> →<h6></h6>标题标签,
从h1到h6越来越小,有默认样式。
4.strong、em标签:
强调标签<strong></strong> 加粗;<em></em>斜体。
5.span标签:
<span>...</span>默认没任何样式,单可以用css控制里面内容的样式。
6. q标签:
<q>...</q>短文本引用。显示会给标签内容加双引号。
7. blockquto标签:
<block>...</block>长文本引用标签。有默认样式,段落前后缩进。
8. br标签:
<br/>换行标签。
9. 标签:
空格符每写一个只代表一个空格,
10. hr标签:
<hr/>添加水平横线有默认样式。
11. adress标签:
<adress></adress>一般写地址,邮件,签名,身份等(语义化),默认斜体。
12. code、pre标签:
<code>...</code>引入一行代码。<pre></pre>引入多行代码。
13.ul、ol、li 标签:
<ul><li></li><ul> 无序列表,默认样式为每个li前为小黑点。<ol><li></li><ol> 有序列表,默认样式为每个li前为数字。
<ul> <!-- 无序列表 -->
<li></li>
<li></li>
</ul>
<ol> <!-- 有序列表 -->
<li></li>
<li></li>
</ol>
14. dl、dt、dd 标签:
定义列表 <dl> <dt>列表标题</dt> <dd>列表项</dd> </dl>
<dl>
<dt>列表标题</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
</dl>
15. div 标签:
<div></div> 最常用的标签,常用于布局排版。
16. table、caption、thead、tbody、tr、th、td:
background背景图片,bgcolor背景色,cellpadding文本到单元格边框距离,cellspacing单元格到表格边框距离
<table id="mytable" summary="表格简介文本">
<thead>
表头
</thead>
<caption>标题文本</caption>
<tbody>
<tr> <!-- 第一行(标题行) -->
<th>第一列的标题</th>
<th>第二列的标题</th>
</tr>
<tr> <!-- 第二行(内容行) -->
<td>第二行第一列</td>
<td>第二行第二列</td>
<td colspan="2"></td> <!-- 一个单元格占2列,可用于横向合并单元格 -->
<td rowspan="2"></td> <!-- 一个单元格占2行,可用于纵向合并单元格 -->
</tr>
<tr> <!-- 第三行(内容行) -->
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var oTable = document.getElementById('mytable');
oTable.rows //获取所有tr,数组形式
oTable.cells //取tr下的td,数组形式
oTable.insertRow() //添加一行
oTable.insertCell() //添加一列
oTable.deleteRow() //删除一行
oTable.deleteCell() //删除一列
</script>
17. a标签:
超链接标签<a href="超链接网址" title="鼠标滑过显示的文本" target="_blank" >超链接显示的文本</a>
默认a标签是在当前页打开,target属性为blank时在新窗口打开。
a标签伪类顺序:a:link > a:visited > a:hover > a:active
注:
a标签具有分析url的功能,类似window.location 有protocol,hostname,host,port,search,hash,href,pathname等属性
a标签也具有同样的属性,var a = document.getElementById('atest'); a.hostname; a.host; ....
18. img标签:
<img src=“图片地址” alt="图片下载失败时可看到指定的文本" tltle="鼠标滑过图片时显示的文本" />
19. form标签:
<form method="传送方式(GET/POST)"action="服务器接受数据的地址"></form>
<form>
<label for="user">账号</label> <!-- for加input的id值,可以将这个label和这个input关联起来,点击这个label标签,也能触发input获焦 -->
<input type="text" placeholder="账号" name="username" id="user"/> <!-- name属性是用来让后台知道每个input的值是来自哪个input -->
<label for="pw">密码</label> <!-- placeholder是在输入框没值时显示的内容,当输入内容时会消失。和value不一样,value就是实实在在的值 -->
<input type="password" placeholder="密码" name="password" id="pw" />
</form>
20. input标签:
<input type="text/password/button/submit/reset/radio/checkbox" /> 按钮或输入框,有不同类型,分别对应文本/密码/按钮/提交按钮/单选/复选,H5新增了很多类型:number、date、tel、email、range、time等等
<form>
<input type="radio" name="love" value="喜欢" checked="checked" /> <!-- checked属性是指这个选项默认被选中 -->
<input type="radio" name="love" value="不喜欢" /> <!-- 单选框按钮的name值得一样 -->
</form>
<form>
<input type="checkbox" name="love1" value="登山" checked="checked" />
<input type="checkbox" name="love2" value="划船" /> <!-- 复选框的name值得不一样 -->
<input type="checkbox" name="love2" value="骑车" />
</form>
21. textarea标签:
<textarea rows="行数" cols="列数">文本内容</textarea> 文本域标签,也可用样式控制大小。
22. select标签:
下拉选项框
<select multiple="multiple"> <!-- multiple属性可以使下拉列表多选,此时下拉列表样式是带滚动条的。进行多选时和相应系统多选文件时操作一样。 -->
<option value="读书">读书</option> <!-- value属性是向服务器提交的值 -->
<option value="看报">看报</option>
<option value="听歌" selected="selected">听歌</option> <!-- selected属性是指这个选项默认被选中 -->
</select>
23. marquee 跑马灯(弹幕):
<marquee loop="3">弹幕</marquee> 相关属性:loop循环次数,direction滚动放向(left,right),behavior滚动方式(scroll,clide,alternate),width,height,bgcolor背景色,scrollamount滚动次数,scrolldelay延时
24. iframe和frame标签:
将别的网页整体引入自己的页面
<head>
<frameset rows="15%,*"> <!-- 行高可为多个值,*代表该行占据剩余空间 -->
<frame src="http://www.baidu.com" />
<frameset cols="20%,*">
<frame src="http://www.hao123.com" />
<frame src="http://www.qq.com" />
</frameset>
</frameset>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
<!--
frame已经很少使用。
iframe和frame区别:
1.frame不能脱离frameset单独使用,iframe可以
2.frame不能放body里,iframe必须放body里
3.frame的高度能通过frameset控制,iframe可以自己控制
-->