1. 语法:使用各个标签来定义格式的
2. html基本常识:
1. 定义:Web编程的基础,与其他Web技术(如css)结合使用可以写出功能强大的网页
2. 作用:告诉浏览器如何显示标签中的内容,即写网页
3. 格式:被"<"和">"符号包围
4. 特点:
1. 标签是定义好的,不能自己创建,每个标签都有特定的含义
2. 不区分大小写,最好保持一致
3. 成对出现,前面的叫开始标签,后面的叫结束标签(例:<a></a>),如果标签中没有内容的话可以采用<a/>的格式
4. 对大小写不敏感
5. 属性:每个标记都有属性,属性是对标记功能的补充说明,写在头标记中,一个标记不能使用两个同名属性。例如:<font color="red">hello world</font>:红色字体显示hello world
6. 注释:<!--注释的内容-->
7. 完整结构:
<html> <head> <!--头标记--> <title>这是我的第一个网页</title> </head> <body bgColor="red"> 双十一以前是光棍节,现在是购物节 </body> <html>
8. 字符级标记对词语或词组进行显示控制
1. <html> 描述网页</html>
2. <head> 网页的头信息 </head>
3. <title> 网页的标题</title>
4. <body> 可见的页面内容 </body>
5. <h1> 文本被显示为标题</h1>:<h1>~<h6>定义标题,h1最大,h6最小
6. <p> 文本被显示为段落 </p>:html会在段落前后添加一个额外的空行
7. <br/>换行符:空白标签
3. 颜色的三种表示 :
1. 16进制代码(红绿蓝):bgcolor=#ff0000
2. rgb() :rgb(255,0,0)或rgb(100%,0%,0%)
3. 颜色关键字 :bgcolor=red
4. 段落控制:
1. <B>文本粗体显示</B>
2. <I>文本斜体显示</I>
3. <U>下划线</U>
4. <SUP>上标</SUP>
5. <SUB>下标</SUB>
5. 图像:
1. 定义:用<img>来定义图像
2. 作用:显示图片
3. img:空标签,只有属性,没有结束标签
1. 属性:
src:图片的路径
a. 绝对路径:
1. 完整的路径名
2. url地址(带http://)
b. 相对路径:
1. 同一级直接写文件名
2. 上一级:.../enviroment.zip
3. 下一级:/first/fist.html
width,height:宽,高
border:边框
align:排列对齐(top,middle,bottom,left,right)
alt:提示文字,兼容性不好
6. 表格:
1. 定义:用<table>来定义表格
2. 结构:一个table中包含多个tr,一个tr中包含多个td
<table>表格</table>
<tr>行</tr>
<td>单元格</td>
<th>表格的标题</th>
3. 属性:
1. colspan,rowspan:合并行,合并列
2. border:边框
7. 超链接:
1. 定义:用<a>来定义超链接
2. 位置:
1. 同一个页面的另一部分
2. 另一个页面
3. 另一个页面的特定部分
3. 属性:
1. href="链接路径"(用法与img的src相同)
2. target="目标":指链接文件打开的方式
_self :覆盖当前窗口(默认属性)
_blank :在新窗口打开
_top :
3. 锚点:
4. 例:<a href="city.jpg" target="_blank">内容</a> :点击内容,链接到
5. 浏览器:浏览器内核是最重要的(如:webkit,Trident等)
a. IE:微软
b. FireFox:火狐(方便调试网页,被称为程序员的浏览器
c. Chorome:谷歌
d. safari:
8. 表单:
1. 定义:用<form>来定义表单
2. 作用:用来与用户进行交互的一系列标记
3. 语法:<form action="提交表单的地址" method="提交方式">个各表单组件</form>
4. 组件:
1. <input type="输入组件类型"/>
text :文本框
password:密码框
radio :单选框(多个单选框设置的name属性相同时被设置为同一组,只能选择一个,checked属性代表默认选项,有多个checked则以最后一个为准)
checkbox:复选框
button :普通键
submit :提交键
reset :重置键
imag :图片键(提交键)
2. <select name="degree">:下拉列表,selected表示默认选项
<option value="1">初中</option>
<option value="2">高中</option>
3. <textarea rows="长度" cols="宽度">多行文本输入</textarea>
9. 框架集:
1. 说明:一个框架集可以将一个网页划分成多个独立的显示区域,每个区域都可以显示一个完整的页面
2. 作用:适合制作网站的后台页面
3. frameset标记:
1. 说明:这是一个框架集标记
2. 内容:里面可以放框架,也可以放框架
4. 属性:
1. cols:按列划分
2. rows:按行划分
5. frame和frameset的区分:
1. frame是框架,每个frame中可以放置一个网页
2. frameset是框架的集合,对框架进行布局,一个框架集中可以包含多个框架和框架集
6. 例:
<HTML> <HEAD> <TITLE> 框架集练习 </TITLE> </HEAD> <frameset rows="100px,*"> <frame src="top.html"/> <frameset cols="20%,*"> <frame src="left.html"/> <frame src="content.html" name="content"/> </frame> </frameset> <BODY> </BODY> </HTML>