网站建设一般的流程,网站重要性,网站调研怎样做,万金娱乐网站开发文章目录 1.前端开发简单分类2.前端开发环境配置3.HTML的简单介绍4.常用的HTML标签介绍 1.前端开发简单分类
前端开发#xff0c;这里是一个广义的概念#xff0c;不单指网页开发#xff0c;它的常见分类
网页开发#xff1a;前端开发的主要领域#xff0c;使用HTML、CS… 文章目录 1.前端开发简单分类2.前端开发环境配置3.HTML的简单介绍4.常用的HTML标签介绍 1.前端开发简单分类
前端开发这里是一个广义的概念不单指网页开发它的常见分类
网页开发前端开发的主要领域使用HTML、CSS 和 JavaScript等技术来创建运行在浏览器中的应用桌面应用开发虽然桌面应用通常是由后端语言如C、Java或C#开发的但现在也可以使用前端技术来开发桌面应用电脑上的应用。例如Electron框架允许开发者使用HTML、CSS和JavaScript来创建跨平台的桌面应用移动应用开发开发手机应用比如使用Java开发Android应用。
本篇博客分享网页开发的前端技术网页开发使用HTML、CSS和JavaScript这套技术来解决实际问题而HTML负责网页的结构页面元素和内容CSS负责网页的表现页面元素的外观、位置等页面样式如颜色、大小等JavaScript负责网页的行为交互效果。
2.前端开发环境配置 下载vscode 官网中下载对应的安装包安装即可。 插件下载 Auto Rename Tag自动补全功能view-in-browser在vscode中打开页面。鼠标右键选择View-in-Browser选项Live Server自动刷新页面。鼠标右键选择Open with Live Server选项
3.HTML的简单介绍
HTMLHyperText Markup Language超文本标记语言所谓的超文本不仅可以定义文本信息还可以定义图片、音频、视频、表格、链接等内容。而标记语句是由标签构成的语言HTML页面通过浏览器的渲染展示出来。 通过基础的HTML标签界面展示Hello world htmlheadtitlethe first page/title/headbodyHello world/body
/htmlhtml 标签是整个 html 文件的根标签、head 标签中写页面的属性、body 标签中写的是页面上显示的内容、title 标签中写的是页面的标题 什么是DOM树 DOMDocument Object Model树是一个用于表示HTML或XML文档结构的模型。 Document 文档对应的一个HTML文件或XML文件就是一个文档而HTML和XML之间的区别在于HTML侧重于展示信息展示数据而XML更侧重于存储数据Object一切皆对象对应的文档是一个对对象一个标签本质也是对象
DOM树将文档表示为一个节点树每个节点对应文档中的一个部分如标签、属性、文本等。比如上面的基础代码可以表示成DOM树结构
Document
└── html├── head│ └── title│ └── the first page└── body└── hello worldDOM树是动态的可以使用JavaScript来修改DOM树如添加、删除或修改节点这将直接反映到浏览器显示的网页上。这是实现动态网页和Web应用程序的基础。 标签之间的简单关系 html和headbody这些是父子关系而head和body标签是兄弟关系。 快速生成HTML的基础结构 在VSCode中我们安装插件可以通过快捷方式 回车键 生成HTML的基础结构代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/html称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件. html langen 其中 lang 属性表示当前页面是一个 “英语页面”(有些浏览器会根据此处的声明提示是否进行自动翻译). meta charsetUTF-8 描述页面的字符编码方式告诉浏览器按照UTF-8的方式解码当然编写代码的时候IDE设置的编码也要是UTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0,viewport 表示用户在设备上可以看到的网页的区域widthdevice-width, initial-scale1.0 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放
4.常用的HTML标签介绍 段落标签h1-h6 六个标签, 从 h1 - h6 数字越大则字体越小快捷键ALT Shift 下箭头快速复制粘贴
bodyh1hello/h1h2hello/h2h3hello/h3h4hello/h4h5hello/h5h6hello/h6
/body段落标签p 在HTML代码中回车浏览器不会解析成换行需要加上p标签
body纸上得来终觉浅绝知此事要躬行。p纸上得来终觉浅/pp绝知此事要躬行。/p
/body换行标签br br 是 break 的缩写. 表示换行
bodyp纸上得来终觉浅br 绝知此事要躬行。/p
/body格式化标签 在实际中这种格式化的工作是让CSS来做的但是HTML也提供一些了解。
bodystrongstrong 加粗/strongbb 加粗/bem倾斜/emi倾斜/idel删除线/dels删除线/sins下划线/insu下划线/u
/body效果展示strong 加粗 b 加粗 倾斜 倾斜 删除线 删除线 下划线 下划线 图片标签img img 标签必须带有 src 属性表示图片的路径当然路径的设置可以是相对路径也可以是绝对路径对应绝对路径可以是磁盘路径或网络路径。 alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字. title: 提示文本. 鼠标放到图片上, 就会有提示. width/height: 控制宽度高度. border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.
bodyimg src./image/百度一下.jpg alt百度一下 title百度一下
/body超链接标签a href: 必须具备, 表示点击后会跳转到哪个页面target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
bodya hrefhttps://www.baidu.com//a
/bodybodya hrefhttps://www.baidu.com/百度一下/a
/body超链接跳转的几种方式 外部链接: href 引用其他网站的地址 内部链接: 网站内部页面之间的链接. 写相对路径即可
bodya href./html02.html跳转/a
/body空链接: 使用 # 在 href 中占位
bodya href#空链接/a
/body下载链接: href 对应的路径是一个文件 (可以使用 zip 文件)
bodya hreftest.zip下载文件/a
/body网页元素链接: 可以给图片等任何元素添加链接
bodya hrefhttps://www.baidu.com/ target_blankimg src./image/百度一下.jpg alt图片加载失败 title百度首页 /a
/body锚点链接: 可以快速定位到页面中的某个位置 bodya href#one第一集/aa href#two第二集/ap idone第一集剧情 br第一集剧情 br.../pp idtwo第二集剧情 br第二集剧情 br.../p
/body
