Web自动化——前端基础知识(二)

1. Web前端开发三要素

  1. web前端开发三要素

Web自动化——前端基础知识(二)_第1张图片

什么是HTMl?

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

什么是CSS?

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

什么是JavaScript?

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

Web自动化——前端基础知识(二)_第2张图片

2. 常用浏览器及其内核

  1. 一般我们看到的浏览器
    Web自动化——前端基础知识(二)_第3张图片
  2. 主流浏览器的内核
    Web自动化——前端基础知识(二)_第4张图片

3. HTML标签及语法规范

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

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

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

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

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

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

  • 标签的包含关系(父子标签)

Web自动化——前端基础知识(二)_第5张图片

  • 标签的并列关系(兄弟标签)
    Web自动化——前端基础知识(二)_第6张图片
  1. 打开开发者工具(F12)
    Web自动化——前端基础知识(二)_第7张图片
  • 可以切换模式
    Web自动化——前端基础知识(二)_第8张图片
  • 里面就是这样的
    Web自动化——前端基础知识(二)_第9张图片

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

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

    Web自动化——前端基础知识(二)_第10张图片

    6. HTML静态页面实战一

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

    Web自动化——前端基础知识(二)_第11张图片

    7. CSS基础

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

    Web自动化——前端基础知识(二)_第12张图片

    1. CSS基础
    • CSS由两个部分组成:选择器和多条式式式明
      Web自动化——前端基础知识(二)_第13张图片
    • CSS的样式代码写在head标签中的子标签style中

    Web自动化——前端基础知识(二)_第14张图片

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

    8. CSS选择器

    1. CSS选择器的作用:
      根据不同的需求把不同的标签选出来
    2. CSS选择器有哪些:
      标签选择器、类选择器、id选择器
    • 标签选择器
      Web自动化——前端基础知识(二)_第15张图片

    Web自动化——前端基础知识(二)_第16张图片

    • id选择器
      Web自动化——前端基础知识(二)_第17张图片
    • 类选择器
      Web自动化——前端基础知识(二)_第18张图片
    • HTML+CSS的表现
    
    
    	
    		
    		这是我的第一个html页面
    		
    	
    	
    		
    我只是一个盒子,空盒子
    我只是一个盒子,空盒子

    我只是标题1

    我只是标题2

    我只是标题3

    我是段落标签我是段落标签我是段落标签我是段落标签 签我是段落标签我是段落标签我是段落标签我是段落标签 我是落标签我是段
    标签我是段落标签我是段落标签 我是段落标签

    我是连接跳转,跳转百度
    我是无序列表
  • 第一项
  • 第二项
    1. 第一项
    2. 第二项
    3. 标题1 标题2
      第一行第一列 第一行的第二列
      第二行第一列 第二行第二列

    保存之后打开百度刷新:
    Web自动化——前端基础知识(二)_第19张图片

    你可能感兴趣的:(python—自动化,前端,自动化,html)