前期刚学过Java基础、WebServer,现在开始学习web前端和数据库
HTML 第一课
本节课的总结为:
课程回顾:
-
内容标题标签 h1-h6 独占一行 有上下外边距 字体加粗 align=left/right/center
-
段落标签 p 独占一行 有上下外边距
-
水平分割线 hr
-
换行 br
-
列表标签
-无序列表 ul:type li -有序列表 ol:type start reversed li -定义列表 dl dt dd - 列表嵌套 有序和无序可以任意无限嵌套
-
分区元素
- div:独占一行 和 span:共占一行 - h5新增 header article footer
-
元素分类
块级元素: 独占一行 包括:div h1-h6 hr p 行内元素: 共占一行 包括:span strong和b em和i del和s u
-
实体引用
- 空格 牛逼是屁-谐音记忆 - 小于号 < 老铁 - 大于号 > 干他
-
图片标签
- img: src路径 相对 访问站内资源和绝对 访问站外资源 alt title width、height:1.像素 2.百分比
-
图片地图
- map:name - 子元素 area: shape形状 coords坐标 href:资源路径
课程详解:
- web前端
- HTML: 负责搭建页面结构和内容 (盖房子 毛坯房)
- CSS: 负责美化页面 (装修)
- JavaScript:负责给页面添加动态效果和动态内容
- JQeury: 是一个js框架,为了简化js开发而生
- 数据库
XML
-
XML :可扩展标记语言
-
XML主要学格式
<books> <book></xxx> </books>
HTML
- Hyper Text Mark Language:超文本标记语言,超文本:指不仅仅是纯文本还包括字体的各种设置(大小、颜色、样式等)和多媒体(图片、视频、音频)相关。
- html学习内容:主要学习有哪些标签,标签有哪些属性,标签和标签之间的嵌套关系
创建HTML文件
html结构
<!DOCTYPE html><!-- 文档声明
告诉浏览器使用html哪个版本的标准解析页面
这是h5标准-->
<html><!-- 根标签 -->
<head><!-- 头:里面的内容是给浏览器看的 -->
<meta charset="UTF-8"><!-- 告诉浏览器字符集 -->
<!-- 设置页面标题 -->
<title>第一个html页面</title>
</head>
<body><!-- 体:里面的内容是给用户看的 -->
</body>
</html>
body内部常见的标签
文本标题
- h1-h6
- 特点: 独占一行,自带上下外边距
- 属性: align=left/right/center
段落标签 p
- 特点: 独占一行,自带上下外边距
水平分割线 hr
换行 br
列表标签
- 无序列表: ul(type) li
- 有序列表: ol(type start reversed) li
- 定义列表: dl dt dd 自带层级效果
- 列表嵌套: 有序和无序列表可以任意无限嵌套
分区标签
- 作用:用于统一管理多个标签 类似于容器,分区标签自身没有显示效果
- span:行内分区元素,共占一行
- div:块级分区元素,独占一行
-
html5标准中新增了几个分区元素
-
<div>头部</div> <div>体部</div> <div>脚部</div>
取代上面的写法 更直观 :
<header>头部</header> <article>正文</article> <footer>脚部</footer>
标签(元素)分类
- 块级元素:独占一行
div,h1-h6,p,hr - 行内元素:共占一行
span, 加粗 strong和b,斜体 em和i,删除线del和s,下划线u
实体引用(特殊字符)
- 空格:有折叠问题 牛逼是屁
- 小于号 < 老铁
- 大于号 > 干他
html 好他妈老 how to ml
图片标签img
- src:路径
- 相对路径:访问站内资源
a. 同级目录 直接写图片名
b. 上级目录 …/图片名
c. 下级目录 文件夹名/图片名 - 绝对路径:访问站外资源,好处节省网站资源,坏处可能找不到图片
- 相对路径:访问站内资源
- alt:当图片不能正常显示时显示的文本
- title:当鼠标悬停时显示的文本
- width/height: 宽高,赋值方式:1. 像素 2. 上级元素的百分比 如果只设置宽度 高度会等比例缩放
- 支持的图片格式: jpg/jpeg png(支持透明色) gif动图
- 练习:
创建demo06
在页面中添加两张图片,
第一张图片显示站内资源的图片(随便找一张)宽度300高度150,
鼠标悬停时显示"嘿嘿" ,
第二张图片从tmooc里面随便找一张图片
宽度body的30% 鼠标悬停时显示"呵呵"
图片地图map
-
map属性:name 代表地图的唯一标识
-
子元素: area
-
area属性:shape形状(矩形rect、圆形circle),coords坐标(矩形四个值两个对角线点的坐标,圆形三个值圆心坐标和半径)href:资源路径 页面资源和文件资源(浏览器能浏览则浏览 不能则下载)
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- #代表当前图片 --> <img alt="这是动图" src="../imgs/gif1.gif" width="100%" height="100%" usemap="#mymap"> <map name="mymap"> <!-- area:区域 shape:形状 1、rect:矩形 (4值,2个对角线的坐标) 2、circle:圆形 (3值,圆心坐标和半径) --> <!-- herf: 资源路径 页面资源路径和文件资源 如果是文件资源,浏览器支持,浏览器则浏览,若不支持,则下载--> <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" > <area shape="circle" coords="200,200,100" href="011.jpg"> <area shape="circle" coords="400,400,100" href="诺诚NC转换器4.0.rar"> </map> </body> </html>