一、web标准
web标准是网页制作的标准,它是由一系列标准组成的,主要包含三个方面:
结构(html,xhtml),表现(css),行为(javascript)
其中结构和表现的标准由w3c制定,行为标准由ECMA制定
w3c—万维网联盟
ECMA—欧洲电脑厂商联合会
二、html相关概念
1.html—超文本标记语言
2.xhtml—可扩展的超文本标记语言
3.html5—html的第五次重大修改
注:html和xhtml的区别:
xhtml相对于html并没有增加新的标签,只是语法要求更加严格,比如:
标签必须闭合,标记名称必须小写等
三、dw常用快捷键
1.ctrl+n 新建文件
2.ctrl+u 打开首选参数面板
3.ctrl+s 保存
4.F12 预览网页
5.F4 显示或隐藏文件面板
6.ctrl+z 撤销
7.ctrl+y 恢复
8.ctrl+f 查找
9.ctrl+g 快速跳转到第几行
10.ctrl+tab 编辑窗口切换
四、html基本结构
1.文档声明
作用:告知浏览器文档使用哪种 HTML 或 XHTML 规范
html5的文档声明: <!DOCTYPE html>
2.html是网页的根元素或根标签,所有的网页内容和标签都放在html标签之间
语法: <html></html>
3.html包含了两大部分:head部分和body部分
head部分:一般设置meta头元素或引入一些外部的css文件,js文件等以及关键词,描述
设置字符编码:
<meta charset="utf-8"/> 防止网页出现乱码
其他编码格式:gb2312,gbk
body部分:所有要在网页中显示的内容及放置内容的标签都放在body部分
五、html基本语法
1.常规标记
语法: <标记 属性="属性值" 属性="属性值"></标记>
eg: <div class="box" id="main"></div>
2.空标记
语法: <标记 属性="属性值" />
eg: <img src="1.jpg"/>
注:a)属性和属性值用等号连接,属性值要放在双引号中(所有标点符号都必须是英文状态下的)
b)标记名称全部使用小写
c) 属性和属性之间用空格隔开,不分先后顺序
六、html常用标记
1.网页标题
语法: <hx>网页标题内容</hx> (x为1-6)
eg: <h3>千锋教育</h3>
2.段落文本
语法: <p>段落文本内容</p>
3.空格
html转义字符:
注:常用其他转义字符:
">" >
"<" <
4.强制换行
语法: <br/> (空标记)
5.加粗
语法: <strong>加粗文本内容</strong>
<b>加粗文本内容</b>
6.倾斜
语法:<em>倾斜文本内容</em>
<i>倾斜文本内容</i>
7.水平分隔线
语法: <hr/>
8.上标和下标
语法: <sup></sup> 上标
<sub></sub> 下标
9.无序列表
语法: <ul>
<li>aaa</li>
<li>bbb</li>
...
</ul>
10.有序列表
语法: <ol type="A" start="2">
<li>aaa</li>
<li>bbb</li>
...
</ol>
注:type用来设置序号的类型,可以设置A,a,i,I,1
start用来设置从几开始
11.自定义列表
语法: <dl>
<dt>A</dt>
<dd>a1</dd>
<dd>a2</dd>
...
<dt>B</dt>
<dd>b1</dd>
<dd>b2</dd>
...
</dl>
注:dt和dd是并列关系
在dl中可以存在多组dt,dd,每组中只能存在一个dt,可以存在多个dd
--------------------------------------------------------------
相对路径的三种写法:
1.当当前文件和目标文件在同一目录下,写法如下: 目标文件名+扩展名
2.当当前文件和目标文件所处文件夹在同一目录下,写法如下: 目标文件所处文件夹名/目标文件名+扩展名
3.当当前文件所处文件夹和目标文件所处文件夹在同一目录下,写法如下:../目标文件所处文件夹名/目标文件名+扩展名
注:../是指返回到上一级目录
----------------------------------------------------------------
12.图片
语法: <img src="图片路径" width="数值" height="数值" alt="替换文本" title="提示文本"/>
注:alt和title的区别
title是当鼠标悬停在图片上时要显示的提示信息
alt是当图片由于某些原因无法正常加载时要显示的替换信息
13.超链接
语法:<a href="链接地址或链接文件" target="_blank" title="提示信息">链接文本或图片</a>
注: target属性用来设置超链接是否在新窗口打开
target="_blank" 链接在新窗口打开
target="_self" 默认值,在本窗口打开
注:空链接 <a href="#">新闻资讯</a> (跳转到页面的顶部)
14.表格
作用:显示数据
语法: <table border="1" cellspacing="0" cellpadding="0">
<tr height="30">
<td width="100" align="center">a</td>
<td width="150">b</td>
</tr>
...
</table>
注:表格相关属性:
(1)border 设置边框的宽度
(2)cellspacing 设置单元格之间的间距
(3)cellpadding 设置内容和单元格之间的空隙
(4)align="left|center|right" 设置单元格内容的对齐方式
(5)width 设置单元格的宽度
(6)height 设置单元格的高度或者tr的高度
(7)colspan="数值" 合并列(给td加)
(8)rowspan="数值" 合并行(给td加)
八、表单
作用:用来搜集用户信息
语法:<form method="" action=""></form>
注:所有的表单控件都要放在form标签之间
1.文本框
语法: <input type="text" value="admin" name="username"/>
注:value用来设置默认值
name属性主要供后端获取输入的内容或信息
2.密码框
语法:<input type="password"/>
3.提交按钮
语法: <input type="submit" value="登录"/>
注:提交按钮的默认value值为提交或提交查询,可重新设置需要的value值
4.重置按钮
语法: <input type="reset"/>
5.单选按钮
语法:<input type="radio" name="***" checked="checked"/>
注:使用单选按钮时,一组中的单选按钮必须添加一致的name属性值,才能实现多选一的效果
设置checked属性可以实现页面加载完成后添加默认选中状态
当属性和属性值相同时,可以省略属性值,如checked="checked" 可以简写为checked
6.复选框(复选按钮)
语法:<input type="checkbox" checked disabled/>
注:checked属性主要应用在单选和复选按钮上
disabled属性用来设置input控件的禁用状态
7.下拉列表
语法: <select>
<option>a</option>
<option selected>b</option>
...
</select>
注:selected用来设置下拉列表的默认选中项
8.文本域
语法:<textarea cols="字符宽度" rows="行数"></textarea>
扩展:禁止用户通过拖拽改变文本域的大小
textarea{resize:none;}
9.普通按钮
语法:<input type="button" value="***"/>
注:普通按钮不具备提交的功能,通常结合js使用
普通按钮默认value值为空,可以重新设置value属性
-----------------------------------------------------------------
form标签上的相关属性解释:
1.method 用来设置数据传送方式,一般为get和post方式
注:get和post的区别
a)get用来获取服务器的数据,post用来向服务器发送数据
b)get安全性比较低,post安全性更高
c)get可以传送的数据量较小,post可以传送的数据量较大
2.action 用来设置数据要发送到的位置,一般为后端文件
eg: <form method="get/post" action="http://www.qfedu.com/index.php"></form>
九、div
作用:在布局网页时用来划分板块
语法: <div></div>
十、span
语法: <span></span>
注:span没有固定的表现格式,只有在对它应用样式时,才会产生视觉上的差异
span可以实现将文本的某一部分独立出来
十一、iframe框架
语法: <iframe src="3.表单.html" width="500" frameborder="0" scrolling="auto"></iframe>
注:width:iframe框架的宽度
height:iframe框架的高度
frameborder 设置iframe框架的边框
scrolling = "no" 隐藏(去掉)iframe的滚动条
五、html注释
语法: <!--注释内容-->