阿勒泰建设招聘网站,新手如何做微信公众号,360直播无插件高清足球,wordpress 双分页1. Web前端开发三要素
web前端开发三要素 什么是HTMl#xff1f;
Html是超文本标记语言#xff0c;是用来描述网页的一种标记语言HTML是一种标签规则的形式将内容呈现在浏览器中可以以任意编辑器创建#xff0c;其文件扩展名为.html或.htm保存即可
什么是CSS#xff1f;…1. Web前端开发三要素
web前端开发三要素 什么是HTMl
Html是超文本标记语言是用来描述网页的一种标记语言HTML是一种标签规则的形式将内容呈现在浏览器中可以以任意编辑器创建其文件扩展名为.html或.htm保存即可
什么是CSS
CSS的中文名称为层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页元素进行格式化
什么是JavaScript
简称JS但其与java开发语言没有任何的关系被广泛的应用于web应用程序的开发因为有了JS的加入使得web应用程序可以实现各种页面动态效果
三者的关系 2. 常用浏览器及其内核
一般我们看到的浏览器 主流浏览器的内核
3. HTML标签及语法规范 HTML标签及语法规范 html标签是有尖括号保卫的关键词例如 html HTML标签绝大多数的情况下是成对儿出现的 如html和/html,第一个标签是开始标签第二个标签是结束标签 HTML标签极少情况下是单个儿出现的我们称之为单标签 常见单标签/br0,代表着换行的意思 标签与标签的关系包含关系、并列函数
标签的包含关系父子标签 标签的并列关系兄弟标签
打开开发者工具F12
可以切换模式 里面就是这样的
4. HTML基本结构与环境搭建
HTML基本结构 标签
为文档类型声明表示该文件为 HTML5 文件。 !DOCTYPE 声明必须是 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的下载地址 HBuilder下载官网地址 https://www.dcloud.io
进入官网免费下载最新版的HBuilder。HBuilder目前有两个版本一个是windows版一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
HTML标签参考手册https://www.w3school.com.cn/tags/index.asp
这是我的第一个html页面
!DOCTYPE html
htmlheadmeta charsetUTF-8title这是我的第一个html页面/title/headbodydiv我只是一个盒子空盒子/divdiv我只是一个盒子空盒子/divh1我只是标题1/h1h2我只是标题2/h2h3我只是标题3/h3p我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段br标签我是段落标签我是段落标签我是段落标签/pa hrefhttp://www.baidu.com我是连接跳转跳转百度/abru1我是无序列表li第一项/lili第二项/li/u1oltable border1li第一项/lili第二项/li/oltrth标题1/thth标题2/th/trtrtd第一行第一列/tdtd第一行的第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/tableselect nameidoption value选项1/optionoption value选项2/optionoption value选项3/option/select/body
/html 以上添加br代表段落打开浏览器如下 6. HTML静态页面实战一
div classboximg src./img/QQ截图20211207150902.png classimg1div classdecspan classz1会员登录/spanspan classz2立即注册/spanspan classz3享积分换礼、返现等专属优惠/span/divdiv classline/divdiv classradioinput typeradio namec idalabel fora classlab1普通登录/labelinput typeradio namec idblabel forb classlab2手机动态密码登录/label/divinput typetext name id placeholder请输入注册手机/邮箱 classuserdiv classpwpwpwinput typepassword name id placeholder请输入密码 classuser1div classyzm-img获取手机动态验证码/div/divdiv classjizhuinput typecheckbox name idelabel fore30天内自动登录/labelspan记住密码/span/divdiv classlogin登nbsp;nbsp;录/divdiv classline2/divdiv classtxt您也可以用合作网站的帐号登录去i旅行网/divdiv classtuimg src./img/44.png alt/div/div 7. CSS基础
CSS简介
CSS的主要作用就是美化网页进行页面布局更具体的说CSS可以做字体大小颜色对齐方式等图片的外形页面的布局以及外观显示样式等等 CSS基础
CSS由两个部分组成选择器和多条式式式明 CSS的样式代码写在head标签中的子标签style中 CSS基础总结
通过选择器可以具体指定修改HTML中具体谁的样式选择器后边的大括号内是具体要修改的样式声明样式的声明是由键值对儿的形式出现的如keyvalue属性和属性值之间使用英文冒号(:)进行分隔多个键值儿之间使用英文分号:进行分隔
8. CSS选择器
CSS选择器的作用 根据不同的需求把不同的标签选出来CSS选择器有哪些 标签选择器、类选择器、id选择器
标签选择器 id选择器 类选择器 HTMLCSS的表现
!DOCTYPE html
htmlheadmeta charsetUTF-8title这是我的第一个html页面/titlestyleli {font-size: 50px;color: red;}ul li {background-color: black;}#first {font-size: 30px;color: blue;}.second{font-size: 20px;color: brown;}/style/headbodydiv idfirst我只是一个盒子空盒子/divdiv classsecond我只是一个盒子空盒子/divh1我只是标题1/h1h2我只是标题2/h2h3我只是标题3/h3p我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段br标签我是段落标签我是段落标签我是段落标签/pa hrefhttp://www.baidu.com我是连接跳转跳转百度/abru1我是无序列表li第一项/lili第二项/li/u1oltable border1li第一项/lili第二项/li/oltrth标题1/thth标题2/th/trtrtd第一行第一列/tdtd第一行的第二列/td/trtrtd第二行第一列/tdtd第二行第二列/td/tr/tableselect nameidoption value选项1/optionoption value选项2/optionoption value选项3/option/select/body
/html保存之后打开百度刷新
