web day01

WEB day01

  1. web前端
    • HTML: 负责搭建页面结构和内容 (盖房子 毛坯房)
    • CSS: 负责美化页面 (装修)
    • JavaScript:负责给页面添加动态效果和动态内容
    • JQeury: 是一个js框架,为了简化js开发而生
  2. 数据库
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
列表标签
  1. 无序列表: ul(type) li
  2. 有序列表: ol(type start reversed) li
  3. 定义列表: dl dt dd 自带层级效果
  4. 列表嵌套: 有序和无序列表可以任意无限嵌套
分区标签
  • 作用:用于统一管理多个标签 类似于容器,分区标签自身没有显示效果
  1. span:行内分区元素,共占一行
  2. div:块级分区元素,独占一行
  • html5标准中新增了几个分区元素
    头部
    体部
    脚部
    取代上面的写法 更直观
    头部
    正文
    脚部
标签(元素)分类
  1. 块级元素:独占一行
    div,h1-h6,p,hr
  2. 行内元素:共占一行
    span, 加粗 strong和b,斜体 em和i,删除线del和s,下划线u
实体引用(特殊字符)
  1. 空格:有折叠问题   牛逼是屁
  2. 小于号 < 老铁
  3. 大于号 > 干他
    html 好他妈老 how to ml
图片标签img
  • src:路径
    1. 相对路径:访问站内资源
      a. 同级目录 直接写图片名
      b. 上级目录 …/图片名
      c. 下级目录 文件夹名/图片名
    2. 绝对路径:访问站外资源,好处节省网站资源,坏处可能找不到图片
  • 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:资源路径 页面资源和文件资源(浏览器能浏览则浏览 不能则下载)

回顾

  1. 内容标题标签 h1-h6 独占一行 有上下外边距 字体加粗 align=left/right/center
  2. 段落标签 p 独占一行 有上下外边距
  3. 水平分割线 hr
  4. 换行 br
  5. 列表标签
  • 无序列表 ul:type li
  • 有序列表 ol:type start reversed li
  • 定义列表 dl dt dd
  • 列表嵌套 有序和无序可以任意无限嵌套
  1. 分区元素
  • div:独占一行 和 span:共占一行
  • h5新增 header article footer
  1. 元素分类
  • 块级元素: 独占一行 包括:div h1-h6 hr p
  • 行内元素: 共占一行 包括:span strong和b em和i del和s u
  1. 实体引用
  • 空格  
  • 小于号 <
  • 大于号 >
  1. 图片标签
  • img: src路径 相对 访问站内资源和绝对 访问站外资源 alt title width、height:1.像素 2.百分比
  1. 图片地图
  • map:name
  • 子元素 area:shape形状 coords坐标 href:资源路径
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值