• 01-html基础&标签


    html相关概念&&建站流程

    • html
      • 英文:Hyper Text Markup Language
      • 中文:超文本标记语言
        • 标记语言:描述网页的一种语言
        • 超文本:可以进行点击且跳转的文本或者图片等
    • 网页的组成部分
      • 结构(html)==w3c(万维网联盟)
      • 样式(css)==w3c(万维网联盟)
      • 行为(js)==ECMA(欧洲厂商联盟)
    • html的发展史
    • xhtml 可扩展的超文本标记语言
      • xhtml和html的区别
        • xhtml后面必须带斜杠
        • xhtml的属性值必须是双引号
        • xhtml的标签必须都是小写
    • 建站流程
      • 申请域名
      • 租用服务器
      • 建设网站
        • 产品经理==>原型图
        • ui设计师==>ui设计图
        • 前端工程师==>将ui设计图百分百还原
        • 后端工程师==>将静态网页转换成动态(数据动态)的
        • 测试工程师==> 保证页面功能/性能没有问题
      • 推广
      • 维护

    html的基本结构

    • 手动编写
    <!-- 声明文档类型 -->
    <!DOCTYPE html>
    <html>
    <!-- 头部 -->
    <head>
        <!-- 网页的编码格式 -->
        <meta charset="UTF-8">
        <title>网页的标题</title>
    </head>
    <body>
        主体 文字,图片等
    </body>
    </html>
    
    • 自动生成网页基本结构
      • 新建一个.html后缀名的文件
      • 英文状态下,写出 ! 按回车或者tab键
      • alt+b运行到浏览器

    html的语法

    • 标签/标记/元素:放到尖括号里面的单词
      • 双标签/标记:成对出现的标签
      • 单标签/标记/空标签:单独出现的标签
    • 属性:放到标签后面,且用空格隔开
    • 属性值:属性和属性值之间用等号连接,属性值要用引号引起来,可以出现多个属性,且每个属性之间用空格隔开

    html的基本标签

    • 文章类
      • 标题标签 h1-h6
        • 双标签
        • h1-h6字体逐渐变小,且加粗
        • 独占一行
      • 段落标签 p
        • 双标签
        • 独占一行
      • 修饰类标签
        • 加粗 b strong
          1. 双标签
          2. 加粗
          3. 在同一行显示
        • 倾斜 i em
          1. 双标签
          2. 倾斜
          3. 同一行显示
        • 下划线 u
          1. 双标签
          2. 加下划线
          3. 在同一行显示
        • 删除线 del
          1. 双标签
          2. 加删除线
          3. 在同一行显示
        • 下标 sub
        • 上标 sup
        • 水平线 hr
          1. 单标签
        • 换行标签 br
          1. 单标签,强制换行
      • 特殊字符
        • 空格  
        • 左尖括号 <
        • 右尖括号 >
        • 版权符号 ©
        • 注册商标 ®
    • 图片 未加载提示文本
      • 单标签
      • src 图片路径
        • 绝对路径
        • 相对路径
          1. 当前文件和目标文件在同一个目录下面,直接图片名.后缀
          2. 当前文件和目标文件的文件夹在同一个目录下面 目标文件文件夹 名/图片名.后缀
          3. 当前文件的文件夹和目标文件的文件夹在同一个目录下面,当前文件套几层就写几个../目标文件文件夹名/图片名.后缀
      • alt 图片未加载成功的时候的提示
      • title 提示文本,鼠标滑到图片标签的提示信息,可以加在任何标签
      • width 宽度
      • height 高度
    • 超链接
      • 双标签
      • 自带下划线,自带字体颜色
      • href: 链接的地址 默认值 href="#"
      • target
        • _self 当前窗口打开 默认值
        • _blank 新开一个窗口打开

    vscode快捷键

    • 保存 ctrl+s
    • 注释 ctrl+/
    • 向前缩进 shift+tab
    • 向后缩进 tab
    • 全选 ctrl+a
    • 搜索 ctrl+f
    • 撤销 ctrl+z
    • 反撤销 ctrl+y
  • 相关阅读:
    css 透明气泡效果
    uniapp 跳转tabbar页面传递参数
    unaipp 发送验证码倒计时
    uniapp 返回顶部
    js 实现放大镜效果
    js 禁用右键菜单和禁止复制
    js 表格的添加和删除操作
    js 留言板(带删除功能)
    推荐几个好用的网站
    pc端使用rem适配
  • 原文地址:https://www.cnblogs.com/qdbj2020/p/13402172.html
Copyright © 2020-2023  润新知