企业官网建设流程全解析

网站建设电,常州市中大建设工程有限公司网站,百度账号中心官网,注册安全工程师报名文章目录 一、块级元素和内联元素1. 块级元素#xff1a;2. 内联元素#xff1a;二、HTML中的图片1. 语法#xff1a;2. 图片属性#xff1a;3. 常见的图片格式#xff1a;三、路径1. 相对路径2. 绝对路径四、视频与音频1. 视频标签2. 音频标签五、超链接1.超链接2. 锚点…文章目录一、块级元素和内联元素1. 块级元素2. 内联元素二、HTML中的图片1. 语法2. 图片属性3. 常见的图片格式三、路径1. 相对路径2. 绝对路径四、视频与音频1. 视频标签2. 音频标签五、超链接1.超链接2. 锚点链接3. 页面滑动效果总结一、块级元素和内联元素在 HTML 中有两种元素类别:块级元素和内联元素。分类不同决定着展示形式不一样。1. 块级元素块级元素独占一行它可以嵌套其他元素常见的比如p、h、div等2. 内联元素可以一行放多个通常与文本一起使用不能嵌套块级元素可以嵌套其他内联元素。常见比如 strong、em、a等段落p标签里面不要放其他块级元素。 段落里面主要放文字相关比如内联元素。但是元素分类不是一直不可更改的后面 的css可以通过display改变他们显示模式。二、HTML中的图片1. 语法img src某某图片.png alt图片名字单标签空元素默认包含两个属性src和altsrc属性指向要插入到页面的图像地址alt属性备选文本用于在图片无法显示文本或者因为网速慢情况下显示的文字。属性采取键值对形式。 属性值属性之间没有必要的先后顺序但是属性之间必须有空格分隔2. 图片属性属性作用src指向要插入到页面的图像地址alt备选文本。图片无法显示提示的文字width设置图片宽度建议css修改height设置图片高度建议css修改title图像标题。鼠标悬停显示的文本3. 常见的图片格式jpeg / jpg有损压缩技术放大缩小会变得 模糊或有锯齿。适用场景摄影照片、网页图片 非透明背景png无损压缩支持透明度。适用场景Logo、网页图形、需要透明度的图像。gif支持动画最多256色。支持简单动画和透明背景适用场景简单动画、表情包、低色彩图形。webpGoogle 开发的现代格式。 支持有损/无损压缩、透明度和动画。适用场景网页优化替代JPEG/PNG/GIF代表淘宝等。avif基于AV1视频编码支持高压缩率和HDR。压缩效率优于WebP。适用场景未来网页优化需高性能压缩的场景(B站、京东等三、路径在HTML中路径用于指定文件如图像、样式表或其他网页的位置。白话图片相对于html文件的位置html怎么找到图片。1. 相对路径相对于当前文件位置的路径同一目录直接使用文件名即可./表示当前文件夹​​​​​下级子目录使用目录名/文件名上级目录使用../返回上一级。h3一、相对路径/h3 h41. 同一级路径/h4 img src./pig.png alt h42. 下一级路径/h4 img srcimg/pig.png alt img src./img/pig.png alt h43. 上一级路径/h42. 绝对路径绝对路径是从根目录开始的完整路径包含完整的 URL 地址。了解即可h41.盘符路径/h4 img srcE:\HTML5\代码\pig.png alt img srcE:/HTML5/代码/pig.png alt h42.网络路径/h4 img srchttps://www.itcast.cn/2018czgw/images/logo2.png alt四、视频与音频1. 视频标签语法video src./media/1.mp4 width400 controlscontrols/video视频标签属性属性作用src指向要插入到页面的视频地址controls显示浏览器自带播放控件width/height设置视频的宽高autoplay自动播放loop循环播放muted静音poster预览图像视频标签兼容性写法!-- 兼容性写法 -- video width400 controls muted loop poster./media/yu7.jpg source src./media/yu7.mp4 typevideo/mp4 p 您的浏览器不支持视频播放 /p /video将 src 属性放在几个单独的 source 元素当中这些元素分别指向各自的资源。浏览器会检查 source 元素并且播放第一个与其自身相匹配的媒体。每个 source 元素都含有 type 属性浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属 性浏览器会尝试加载每一个文件直到找到一个能正确播放的格式但是这样会消耗掉大量的时间和资源。2. 音频标签音频标签与视频标签类似使用audio。!-- 音频标签浏览器不让自动播放 后续可以用js实现 -- audio src./media/ldh.mp3 controls muted autoplay/audio !-- 兼容性写法 -- audio controls source src./media/ldh.mp3 typeaudio/mp3 p 您的浏览器不支持音频播放 /p /audio五、超链接1.超链接超链接使我们能够将我们的文档链接到任何其他文档或其他资源也可以链接到文档的指定部分。语法a href /ahref属性也称为超文本引用或目标它将包含一个网址来创建一个基本链接。链接可以包含除了自身之外的其他元素比如 文字、标题、图片、视频等。其他属性title鼠标悬停的提示文字target打开页面的方式 ( _self默认当前窗口打开_blank新窗口打开)!-- 超链接 -- !-- 1. 内部链接 -- a href./11-音视频标签.html音视频/a !-- 2. 外部链接 -- a hrefhttps://www.deepseek.com/ titledeepseek target_blankdeepseek/a !-- 3. 空连接 -- a href#产品介绍/a !-- 4. 下载链接 -- a href./download.zip下载软件/a !-- 5. 邮件链接 -- a hrefmailto:123qq.com联系我们/a2. 锚点链接锚点链接允许用户在同一个页面内跳转到指定位置。 非常适合长页面导航。a href#2 2. 外部链接/a br h2 id22. 外部链接/h23.页面滑动效果想要点击链接之后。页面具有滑动效果。 请在head标签中添加下面代码。style html { scroll-behavior: smooth; } /style总结这篇主要介绍块级元素和内联元素HMTL中的图片地址视频与音频以及超链接。下一篇介绍布局标签网站结构标签无语义标签列表标签表格表单以及辅助标签。