学习目标:
HTML4.0和CSS3.0的基本用法
HTML4.0思维导图:
HTML4.0学习内容
1.HTML的简介:
html全称是超文本标记语言(HyperText Mark-up Language)
meta 用来规定该html文件的编码字符集的类,除UTF-8字符集外还有Big-5,IOS8859-1,GBK等字符集
因html4.0的版本中常用标签的语法规则不是十分规范,W3C万维网联盟提出了一个新的标准——XHTML1.0
xml文件中的标签自定义通过namespace(命名空间)
html文件中的标签都是固定好的,可以把html文档看成是倒挂的树形结构
XHTML其实是由html4.0版本通过严格的语法规定出的版本
W3C联盟提出了一系列标准把静态页面分成了3个部分
1.结构层 使用xhtml来进行体现 (后期被html5替代)
2.表现层 使用CSS层叠样式来体现
3.行为层 使用JavaScript来体现
另外同一html文件在不同的浏览器下浏览可能会有差异,建议使用火狐,谷歌,IE6-7及IE13以下版本
2.HTML的文档结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
3.基本标签:
3.1表单篇:
1.form标签
form 表单 action=“url” 表示表单跳转的目标地址,method=“” 是请求方式,共分为 get和 post 两种
*面试问题:get和post请求有什么区别?
答: Post请求相对安全,不会显示地址栏url的信息参数,大小没有限制。
Get请求不安全 地址栏中会显示有name属性的信息参数,大小限制64k。
2.input标签
<input type="">
Type=”text” 文本框
Password 密码框
Radio 单选框 : Name属性成一组 checked=“checked” 被勾选
Checkbox 多选框
Reset 重置
Submit 提交
Button 按钮
File 上传组件
select选择框: 选择框和option标签进行连用 ----选项
disabled=“disabled” 用户禁用某个组件
multiple =” multiple” 多选
textarea 文本域 常用属性 rows 行 cols 列
3.div标签: 常用于划分区域
3.2图片篇:
1.Img标签
<img src="" alt="" width="" height="" >
Src ----图片的路径地址
Alt ----(如果图片不显示)文字占用图片的位置
Width 宽度 Height高度 大小用像素(px)表示
图片跳转利用a标签的href属性 表示链接地址
Map 表示的是一种映射 area表示区域shape表示区域模型
代码示例:
<img src="image/柴犬.jpg" width="600" height