ZG前端学习系统day01 2020-11-2

  • 主流浏览器的内核
    Chrome (google)                                       之前是Webkit 后来使用Blink
    Safria (苹果)                                                 Webkit
    FIrefox (Mozilla)                                               Gecko
    Opera                                                               之前Presto现在Blink
    IE                                                                     Trident

  • 网页三大组成部分
    结构       表现       行为
    结构:主要是一些文本 图片 音频 视频 等等基础样式
    表现:美化网页,网页的外衣 ,让网页更加的漂亮
    行为:使网页动起来,用来给网页添加动态

  • HTML 超文本标记语言
    “超”体现在不仅仅像text文件那样只包括文本 还可以有图片视频超链接等等
    “标记”又称作标签是一个容器 ,是内容的载体。

  • 骨架

  <!DOCTYPE html><!-- 文档类型声明 -->
<html lang="zh"><!-- 根标签 --><!-- lang用来确定是一个什么类型的网页  英文网页 en  中文zh——CN -->
<head>描述区
 <meta charset="UTF-8"><!-- 元信息标签,用来描述网页的一些信息  charset用来确定编码格式  utf-8 万国码  
 还有gb2312 国标码  支持中文简体  gbk  gb2312的升级版  支持中文简体和中文的繁体 -->
 <title></title><!-- 标题标签 -->
</head>
<body><!-- 内容区 -->
 
</body>
</html>
  • 注释 <!- - 需要注释的内容- ->

  • 标签的分类
    常规标签(双标签)和空标签(单标签)

  • 常见标签
    备注:
    1写在<的第一个单词叫做标签名
    2标签可以有属性 属性是对标签的一个描述说明,属性和属性名之间用"="连接 属性和属性之间用空格进行隔开
    3代码出现嵌套的时候使用tab(4个空格)进行缩进
    4 回车不会影响代码的执行效率

  1. 标题标签 h1~h6 注意:h1标签只能使用一次 h1 一般用于文章的标题或者网页的大Logo 而且不能因为文字的大小和文字粗细就直接确定来使用标题标签
  2. 段落标签 p 应用场景:用于网页中的段落
  3. 换行标签 br 应用场景:用来强制折行
  4. 文本标签 span (无语义 没有实质的意义)应用场景:可以看成一个小的盒子 里面装个几个或者一个文字,可以设置局部的样式
  5. 区块标签 div (无语义 没有实质的意义) 应用场景:可以理解成一个大盒子,来划分区域。
  • 文本格式化标签

文本加粗 b和strong 但是要注意 strong具有语义化着重文本
文本斜体 i和em 注意em具有语义化着重文本
上标和下标 sup和sub
删除和下滑 del和ins
图片 img 属性 src引用图片的地址 alt 当图片显示错误是对用户进行文字性提示 title 鼠标放入时显示文字 width 图片宽度 height 图片的高度 src和alt属性必须写 但是alt可以为空

  • 地址路径(绝对路径和相对路径)
    绝对路径 1 具体的网址 http:// 。。。。。。2具体的盘符 c://。。。。
    相对路径
    / 表示根目录
    ./当前目录
    …/返回上一级的目录
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值