记一次web前端基础

什么是html???介绍如下!!!

  • html负责搭建页面结构和内容 (盖房子)
  • css 负责美化页面 (装修)
  • JavaScript 负责给页面添加动态效果和内容 (相当于给房子添加机关)
  • jQuery 对JavaScript的封装 可以写的更少但实现的更多
  • bootstrup 前端页面框架

HTML

  • XML:可扩展标记语言
  • HTML,HyperTextMarkupLanguage: 超文本标记语言, 超文本指不仅仅是纯文本还包括:文本样式 多媒体相关(图片 音频 视频) 学习HTML:主要学习的就是html里面有哪些标签,标签有哪些属性,标签和标签之间的嵌套关系

页面结构介绍

    <!DOCTYPE html><!-- 文档声明 
    负责告诉浏览器使用html哪个版本的标准解析页面-->
    <html><!-- html是根标签 所有内容都在它里面 -->
        <head><!-- 头标签 里面保存给浏览器看的内容 -->
            <meta charset="UTF-8">
            <title>第一个html页面</title>
        </head>
        <body><!-- 体标签 里面保存给用户看的内容 -->

        </body>
    </html>

常用的文本标签

  1. 文本标题标签: 字体加粗,独占一行,有上下的间距 align=left/right/center h1-h6
  2. 段落标签: 独占一行,有上下的间距 p
  3. 水平分割线 hr
  4. 换行 br

列表标签

  1. 无序列表 ul:type li
  2. 有序列表 ol:type start设置起始值 reversed降序 li
  3. 定义列表 dl dt dd
  4. 列表嵌套 有序和无序可以任意无限嵌套

图片标签 img

  • src: 路径

    1. 相对路径:当访问站内资源时使用 同一目录: 直接写文件名 上级目录: ../文件名 下级目录: 文件夹名/文件名
    2. 绝对路径:当访问站外资源时使用 图片盗链 节省本站资源 ,但有找不到图片的风险
  • alt: 当图片不能正常显示时显示的文本
  • title: 当鼠标在图片上悬停时显示的文本
  • width/height: 两种赋值方式: 1. 像素 2. 上级元素的百分比 如果只设置宽度 高度会等比例缩放
  • 支持的图片格式: jpg/jpeg png支持透明色 gif动图

超链接a

  • 如果超链接中不写href属性 则就是一个纯文本
  • href:资源路径

    1. 页面资源: 可以访问站内和站外页面
    2. 文件资源: 如果访问的文件浏览器支持浏览则直接浏览不支持则下载
  • target="_blank" 在新的窗口中显示页面, 默认值从当前页面跳转
  • 页面内部跳转, 先往目的地添加一个空的a标签作为锚, 通过另外一个a标签跳转到这个a标签的位置 回到顶部

表格标签table

  • 标签: table tr行 td列 th表头(加粗并居中) caption表格标题
  • 属性: table:border边框粗细 cellspacing单元格间距 cellpadding 单元格的内边距(单元格和内容的距离) td: rowspan跨行 colspan跨列

笔记

  1. 文本标签
  2. h1-h6 内容标题 独占一行 有上下外边距 字体加粗 字体从大到小 align=left/right/center
  3. p 段落标签 独占一行 有上下外边距
  4. hr 水平分割线
  5. br 换行
  6. 列表标签
  7. 无序列表: ul:type li
  8. 有序列表: ol:type start起始值 reversed降序 li
  9. 定义列表: dl dt dd
  10. 列表嵌套: 有序和无序可以任意无限嵌套
  11. 图片img
  12. src:路径 相对路径:访问站内资源使用

    同目录: 直接写文件名 上级目录: ../文件名 
    下级目录: 文件夹名/文件名 
    绝对路径:访问站外资源时使用, 图片盗链 节省本站资源 但是有可能找不到图片
  13. alt: 图片不能正常显示时显示的文本
  14. title: 鼠标悬停时显示的文本
  15. width/height: 两种赋值方式: 1.像素 2.上级元素的百分比 如果只设置宽度 高度会等比例缩放
  16. 超链接a
  17. 如果不写href属性 就是一个纯文本
  18. href: 资源路径 页面资源可以访问站内和站外的 和 文件资源:浏览器支持则浏览不支持则下载
  19. target="_blank" 在新的窗口中显示页面
  20. 页面内部跳转 回到顶部
  21. 表格table
  22. table属性: border边框的粗细 cellspacing单元格的间距 cellpadding单元格距内容的距离
  23. tr td:rowspan跨行 colspan:跨列 th caption## 目标

去除 iconfinder 上 icon 的水印

原理

利用水印像素点和原图像素点颜色合并的原理,如果拥有加过水印的图片和水印图片,就可以反向推出原图原像素点的颜色;前提是你得拥有他的水印图片

Last modification:July 4th, 2019 at 11:51 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment