鼎泰网
Web自动化——前端基础知识（二）
创始人
2025-05-29 21:53:43
0次

1. Web前端开发三要素

  1. web前端开发三要素

1676026717439.png

什么是HTMl？

  • Html是超文本标记语言，是用来描述网页的一种标记语言
  • HTML是一种标签规则的形式将内容呈现在浏览器中
  • 可以以任意编辑器创建，其文件扩展名为.html或.htm保存即可

什么是CSS？

  • CSS的中文名称为层叠样式表
  • 是一种用来表现HTML或XML等文件样式的计算机语言
  • 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化

什么是JavaScript？

  • 简称JS，但其与java开发语言没有任何的关系
  • 被广泛的应用于web应用程序的开发
  • 因为有了JS的加入，使得web应用程序可以实现各种页面动态效果
  1. 三者的关系

1676027272893.png

2. 常用浏览器及其内核

  1. 一般我们看到的浏览器
    1676027415267.png
  2. 主流浏览器的内核
    1676027460538.png

3. HTML标签及语法规范

  1. HTML标签及语法规范
    html标签是有尖括号保卫的关键词，例如

  2. HTML标签绝大多数的情况下是成对儿出现的

  3. 如和,第一个标签是开始标签，第二个标签是结束标签

  4. HTML标签极少情况下是单个儿出现的，我们称之为单标签

  5. 常见单标签
    0    ,代表着换行的意思

  6. 标签与标签的关系：包含关系、并列函数

  • 标签的包含关系（父子标签）

1676028140485.png

  • 标签的并列关系（兄弟标签）
    1676028266525.png
  1. 打开开发者工具（F12）
    1676029399782.png
  • 可以切换模式
    1676029530350.png
  • 里面就是这样的
    1676029751062.png

4. HTML基本结构与环境搭建

  • HTML基本结构
标签：

为文档类型声明，表示该文件为 HTML5 文件。 声明必须是 HTML 文档的第一行，位于 标签之前。

标签对： 标签位于 HTML 文档的最前面，用来标识 HTML 文档的开始； 标签位于 HTML 文档的最后面，用来标识 HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。 标签对：

标签包含有关 HTML 文档的信息，可以包含一些辅助性标签。如 ， ， ， 等，但是浏览器除了会在标题栏显示 元素的内容外，不会向用户显示 head 元素内的其他任何内容。

标签对：

它是 HTML 文档的主体部分，在这个标签中可以包含等众多标签， 标签出现在 标签之后，且必须在闭标签 之前闭合。

  • 京东网站结构如下：
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXFhlrFu-1679040056954)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca2f23e32109429f89fda2ac49924087~tplv-k3u1fbpfcp-watermark.image?)]

5. HTML常用标签以及HBuilder IDE的下载地址

  1. HBuilder下载官网地址：

    https://www.dcloud.io

  • 进入官网，免费下载最新版的HBuilder。
  • HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
  1. HTML标签参考手册：https://www.w3school.com.cn/tags/index.asp
  • 这是我的第一个html页面

这是我的第一个html页面
我只是一个盒子，空盒子
我只是一个盒子，空盒子
我只是标题1
我只是标题2
我只是标题3
我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段
标签我是段落标签我是段落标签我是段落标签
我是连接跳转，跳转百度
我是无序列表
  • 第一项
  • 第二项
    1. 第一项
    2. 第二项
      3. 标题1标题2
      第一行第一列第一行的第二列
      第二行第一列第二行第二列

    1676037014254.png

    • 以上添加
      代表段落
    • 打开浏览器如下：

    1676036743480.png

    6. HTML静态页面实战一

    会员登录立即注册享积分换礼、返现等专属优惠
    获取手机动态验证码
    记住密码
    登  录
    您也可以用合作网站的帐号登录去i旅行网

    1676038100912.png

    7. CSS基础

    1. CSS简介
    • CSS的主要作用就是美化网页，进行页面布局
    • 更具体的说，CSS可以做字体大小，颜色，对齐方式等；图片的外形；页面的布局以及外观显示样式等等

    1676038302586.png

    1. CSS基础
    • CSS由两个部分组成：选择器和多条式式式明
      1676038366157.png
    • CSS的样式代码写在head标签中的子标签style中

    1676038447131.png

    1. CSS基础总结
    • 通过选择器可以具体指定修改HTML中具体谁的样式
    • 选择器后边的大括号内是具体要修改的样式声明
    • 样式的声明是由键值对儿的形式出现的，如key：value
    • 属性和属性值之间使用英文冒号(:)进行分隔
    • 多个键值儿之间使用英文分号（:）进行分隔

    8. CSS选择器

    1. CSS选择器的作用：
      根据不同的需求把不同的标签选出来
    2. CSS选择器有哪些：
      标签选择器、类选择器、id选择器
    • 标签选择器
      1676038901597.png

    1676038959305.png

    • id选择器
      1676039069808.png
    • 类选择器
      1676039171421.png
    • HTML+CSS的表现
    
这是我的第一个html页面
    我只是一个盒子，空盒子
    我只是一个盒子，空盒子
    我只是标题1
    我只是标题2
    我只是标题3
    我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段
    标签我是段落标签我是段落标签我是段落标签
    我是连接跳转，跳转百度
    我是无序列表
  • 第一项
  • 第二项
    1. 第一项
    2. 第二项
      3. 标题1标题2
      第一行第一列第一行的第二列
      第二行第一列第二行第二列

    保存之后打开百度刷新：
    1676040169604.png

    词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

    上一篇：ST泉为及子公司近一年累计发生59项诉讼案件

    下一篇：数据库常见问题【复试自用】

    相关内容

    热门资讯

    上海特大案件曝光！涉案金额超亿... 今年以来，公安部会同金融监管总局开展打击金融领域黑灰产违法犯罪专项工作，对保险等领域违法犯罪进行重点...
    关于单方面免签政策常见问题，国... 今天（11月23日），国家移民管理局针对单方面免签政策常见问题进行解答。 1.哪些国家人员可适用单方...
    “最快护士”张水华再夺冠 新京报记者 刘锦涵
 制作 葛佳丹 ▲新京报我们视频出品（ID：wevideo） 11月23日，“最...
    原创 沉... 在国际关系的复杂舞台上，每一个动作都可能引发连锁反应。近期，高市早苗的发言无疑是这一舞台上的一次重要...
    宁夏回族自治区党委书记，用“玫... “特别是何杰勇夺马拉松男子冠军，充分证明宁夏也能生长出绚丽的玫瑰……” 11月22日，宁夏回族自治区...
    原创 日... 小泉进次郎的表态，无疑是对高市早苗政策的公开反击。尽管两人曾是同一阵营的人物，并且高市将小泉任命为防...
    法律明白人｜白广万：学法律强本... “以前村民来问遗产分割、合同纠纷的问题，我心里一点底都没有，只能劝大家别着急，给不出实在的办法。”回...
    科技周报|多品牌手机遭遇“绿线... 多品牌手机遭遇“绿线门”，售后政策引不满 近期一场由手机屏幕绿线问题引发的消费维权潮在社交平台上持续...
    美政府再次对加州提起诉讼 参考消息网11月23日报道据美联社11月21日报道，特朗普政府起诉加利福尼亚州向非法留美学生提供州内...
    传“警银通”郑州暂时停用，有银... 10天前，#律师银行取4万元遭盘问报警#登上热搜。关于“银行反诈层层加码”的讨论一直在继续。 11月...