WEB day01
web前端
HTML: 负责搭建页面结构和内容 (盖房子 毛坯房) CSS: 负责美化页面 (装修) JavaScript:负责给页面添加动态效果和动态内容 JQeury: 是一个js框架,为了简化js开发而生 数据库
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,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:资源路径 页面资源和文件资源(浏览器能浏览则浏览 不能则下载)
回顾
内容标题标签 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:资源路径