一、Web前端开发三要素1、HTML(1)概述Html是超文本标记语言是用来描述网页的一种标记语言(2)核心功能用于描述网页结构的标记语言通过标签规则将内容呈现在浏览器中(3)文件特征扩展名为.html或.htm99%情况使用.html可用任意文本编辑器创建(4)关键特性以标签形式组织内容如记事本、PyCharm等编辑器均可编写但专业前端编辑器效率更高2、CSS(1)概述CSS层叠样式表是一种用来表现HTML/XML等文件样式的计算机语言(2)核心作用静态修饰美化HTML文档如字体、颜色、布局动态配合可与脚本语言结合实现元素格式化(3)局限单独使用无法实现交互功能需配合JavaScript等脚本语言3、JavaScript(1)简称: JS注意与Java语言无任何关联(2)应用领域: 主要应用于网页应用程序开发(3)核心价值: 实现页面动态效果如用户登录后显示个性化信息(4)典型场景: 按钮交互、页面跳转、数据动态加载等4、三者的关系(1HTML: 相当于人体骨架构建网页基础结构和内容(2CSS: 相当于服饰妆容使网页呈现美观的视觉效果(3)JavaScript: 相当于神经系统赋予网页交互能力和动态功能(4)学习重点: Web自动化测试需重点掌握HTML和CSS的结构解析JS了解即可(5)形象比喻:HTML毛坯房、CSS硬装软装、JS智能家居系统二、HTML标签及语法规范1、HTML标签1HTML标签形式基本结构由尖括号包围的关键词组成如html其中html可以替换为其他标签名称标签类型HTML标签有很多种html只是众多标签中的一个代表2HTML标签成对出现开始标签如html结束标签如/html,注意结束标签在标签名前有斜线/3HTML标签单个出现特殊形式极少情况下标签是单个出现的称为单标签典型例子br/表示换行注意单标签通常在标签名后加斜线/2、HTML标签的语法规范1标签与标签的关系包含关系结构特征—外层标签包含内层标签形成嵌套结构如html是head的父标签head又是title的父标签并列关系结构特征—同一层级的标签互不包含并列标签称为兄弟标签如head和body是兄弟标签2例子查看方法通过浏览器开发者工具(快捷键CtrlShiftI)查看网页HTML结构实际验证京东网站由多个尖括号包裹的标签组成存在父子关系如html包含headhead又包含meta和title存在兄弟关系如head和body是并列关系结论网页内容就是由这些标签及其关系构成的三、HTML基本结构和常用标签1、HTML基本结构!DOCTYPE html !-- 声明文档类型告诉浏览器这是HTML5文档 -- html langzh-CN !-- 根标签lang指定页面语言zh-CN中文 -- head !-- 头部存放页面元信息不直接显示在页面上 -- meta charsetUTF-8 !-- 字符编码UTF-8支持所有语言避免乱码 -- title我的第一个HTML页面/title !-- 页面标题显示在浏览器标签栏 -- !-- 还可以加CSS、JS链接、页面描述等元信息 -- /head body !-- 主体页面所有可见内容都放在这里 -- h1你好HTML/h1 !-- 一级标题最大的标题 -- p这是我的第一个HTML页面内容都在body标签里。/p !-- 段落文本 -- /body /html标签 / 声明作用!DOCTYPE html必须放在第一行声明这是 HTML5 文档HTML4 写法更复杂现在几乎只用 HTML5html整个页面的根标签所有其他标签都嵌套在里面lang属性指定页面语言head页面的 “后台配置区”内容不显示在页面正文只给浏览器 / 搜索引擎看meta charsetUTF-8核心元标签设置字符编码必须加否则中文会乱码title页面标题显示在浏览器顶部标签栏也是搜索引擎收录时的核心标题body页面的 “前台展示区”所有能看到的内容文字、图片、按钮等都放这里前端开发者使用的工具HBuilderX流行2、HTML常用标签知识点核心内容易混淆点/注意事项应用示例HTML基本结构!DOCTYPE声明、html根标签、head头部标签、body主体标签声明必须为首行标签层级需严格嵌套!DOCTYPE htmlhtmlheadtitle标题/title/headbody内容/body/html常用标签div容器盒子、h1-h6标题、p段落、br换行、strong (加粗文本)段落换行需用br回车符在前端不生效p段落1br段落2/p链接标签a hrefURL实现跳转href属性必须包含完整协议如http://a hrefhttps://www.baidu.com跳转百度/a列表标签ul无序列表、ol有序列表、li列表项无序列表默认显示圆点有序列表显示数字ulli项1/lili项2/li/ul表格标签table表格、tr行、th标题单元格、td数据单元格需配合border属性显示边框table border1trth标题1/thtd数据1/td/tr/table下拉框标签select下拉框、option选项value属性决定后端接收值selectoption value1选项1/option/select标签特性对比div无语义 vs h1语义化标题div需CSS装饰标题标签自带样式div容器/div vs h1主标题/h1开发工具技巧编辑器快捷键如Tab补全标签、浏览器实时预览文件路径需准确避免创建项目混淆右键HTML文件选择浏览器打开四、CSS基础1、CSS的主要作用1核心功能美化网页和进行页面布局具体包括控制字体大小、颜色、对齐方式调整图片外形设计页面布局和外观显示样式2HTML与CSS分工HTML专注的去做结构呈现CSS专注的做样式渲染2、CSS基础CSS由两个部分组成选择器和多条样式声明选择器作用指定修改HTML中具体元素的样式如ul、h1等标签样式声明结构使用大括号包裹多条样式声明键值对形式key:value如font−size:20px属性间用英文冒号分隔多个键值对用分号分隔代码位置写在head标签内的style标签中3、CSS选择器1CSS选择器的作用核心功能根据不同的需求把不同的标签选出来定位到特定标签后修改其样式类比理解与Web自动化测试中的元素定位原理相同都是通过特定方式找到目标元素应用场景前端开发中用于样式修改测试自动化中用于元素定位2标签选择器单标签选择器语法标签名 {样式声明}示例ul {margin-top: 10px; width: 1000px;}特点作用于所有该类型的标签复合标签选择器语法父标签 子标签 {样式声明}示例ul li {background-color: black;}特点通过空格表示层级关系只作用于特定父元素下的子元素3ID选择器语法规则HTML中定义div idfirst/divCSS中引用#first {font-size: 40px; color: blue;}核心特性页面内唯一性一个ID值在整个页面中只能出现一次优先级高在自动化测试中优先考虑使用ID定位元素使用建议开发中不常用因为复用性差测试中推荐用定位精确度高4类选择器语法规则HTML中定义div classmain_heading/divCSS中引用.main_heading {text-align: center; font-size: 50px;}与Python类的区别本质不同CSS中的class只是标签属性不是面向对象中的类关键字相同都使用class关键字但含义不同常用属性text-align文本对齐方式如center表示居中font-size字体大小如50px表示50像素