HTML课程笔记补1

1.文本标签(1)用于包裹词汇、短语等。(2)通常写在排版标签里。(3)排版标签宏观文本标签微观。(4)文本标签通常是行内元素。常用文本标签em要着重阅读的内容strong十方重要的内容(语气比em强)span没有语义用于包裹短语的通用容器。不常用的文本标签cite作品标题dfn特殊术语或专属名词del和ins删除的文本【与】插入的文本sub与sup下标文字【与】上标文字code一段代码samp从正常的上下文中将某些内容提取出来kbd键盘文本表示文本是通过键盘输入的abbr缩写配合title属性bdo更改文本方向要配合dir属性可选值是ltr(默认)、rtlvar标记变量可以和code标签一起使用small附属细则b摘要中的关键字、评论中的产品名称i本意人物的思想活动、所说的话现在多用于呈现字体图片u与正常内容有反差文本(不常用)q短引用(不常用)blockquote长引用(不常用)address地址信息2.图片标签2.1 基本使用标签名 标签语义 常用属性img 图片 src图片路径又称图片地址——图片的具体位置alt图片描述width图片宽度单位是像素height图片高度单位是像素总结1. 像素px是一种单位学到 CSS 时我们会详细讲解。2. 尽量不同时修改图片的宽和高可能会造成比例失调。3. 暂且认为 img 是行内元素学到 CSS 时会认识一个新的元素分类。4. alt 属性的作用- 搜索引擎通过 alt 属性得知图片的内容。——最主要的作用。- 当图片无法展示时候有些浏览器会呈现 alt 属性的值。- 盲人阅读器会朗读 alt 属性的值。2.2 路径的分类1.相对路径以当前位置作为参考点去建立路径已有结构 符合 含义文件 ./ 同级/ 下一级../ 上一级2.绝对路径以根位置作为参考点去建立路径(1)本地绝对路径 Ea/b/c/哦杰哥.jpg (很少用)(2)网络绝对路径 https://ww.atguigu.com/images/index_new/logo.png注意点本地绝对路径如果更换设备处理起来很麻烦如果服务器开启了防盗链就无法使用网络绝对路径。2.3常见图片格式1.jpg格式概述扩展名为.jpg或.jpeg是一种有损的压缩格式(把肉眼不容易观察出来的细节丢弃了)特点支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。场景对图片细节没有极高要求的场景例如网站的产品宣传图--该格式在网页里很常见。2.png格式概述扩展名为.png是一种无损的压缩格式能够更高质量的保存图片。特点支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。场景:1想让图片有透明背景;2想更高质量的呈现图片;例如:公司logo图、重要配图等。3.bmp格式:概述:扩展名为.bmp不进行压缩的一种格式在最大程度上保留图片更多的细节。特点:支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。场景:对图片细节要求极高的场景例如:一些大型游戏中的图片。(网页中很少使用)4.gif格式:概述:扩展名为.gif仅支持256种颜色色彩呈现不是很完整。特点:支持的颜色较少、支持简单透明背景、支持动态图。场景:网页中的动态图片。5.webp格式:概述:扩展名为.webp谷歌推出的一种格式专门用来在网页中呈现图片。特点:具备上述几种格式的优点但兼容性不太好一旦使用务必要解决兼容性问题。场景:网页中的各种图片。6.base64格式1.本质:一串特殊的文本要通过浏览器打开传统看图应用通常无法打开。2.原理:把图片进行base64编码形成一串文本。3.如何生成:靠一些工具或网站。4.如何使用:直接作为img标签的src属性的值即可并且不受文件位置的影响。5.使用场景:一些较小的图片或者需要和网页一起加载的图片。3.超链接主要作用:从当前页面进行跳转。标签名a标签语义超链接常用属性·href要跳转的具体位置。·target :跳转时如何打开页面常用值如下_self:在本页签中打开。_blank:在新页签中打开。3.1跳转到页面!--跳转其他网页--a hrefhttps://Ww.jd.com/ target_blank去京东/a!--跳转本地网页--a href./10_HTML排版标签.html” target”_self去看排版标签/a注意点:1.代码中的多个空格、多个回车都会被浏览器解析成一个空格!2.虽然a是行内元素但a元素可以包裹除它自身外的任何元素!3.2 跳转到文件!-- 浏览器能直接打开的文件--a href”./resource/自拍.jpg看自拍/aa href./resource/小电影.mp4看小电影/aa href”./resource/小姐姐.gif看小姐姐/aa href./resource/如何一夜暴富.pdf点我一夜暴富/a!--浏览器不能打开的文件会自动触发下载--a href./resource/内部资源.zip内部资源/a!--强制触发下载--a href./resource/小电影.mp4download电影片段.mp4下载电影/a注意1:若浏览器无法打开文件则会引导用户下载。注意2:若想强制触发下载请使用download属性属性值即为下载文件的名称。3.3 跳转到锚点锚点网页中的一个标记点。·第一步:设置锚点!--第一种方式:a标签配合name属性 --a nametest1/a!--第二种方式:其他标签配合id属性 --h2idtest2我是一个位置/h2注意点:1.具有href属性的a标签是超链接具有name 属性的a标签是锚点。2.name和id都是区分大小写的且id最好别是数字开头。·第二步:跳转锚点!--跳转到test1锚点--a href#test1去test1锚点/a!--跳到本页面顶部--a href#回到顶部/a!--跳转到其他页面锚点--a hrefdemo.html#test1去demo.html页面的test1锚点/a!-- 刷新本页面 --a href刷新本页面/a!--执行一段js,如果还不知道执行什么可以留空javascript:;--a hrefjavascript:alert(1);点我弹窗/a3.4唤起指定应用通过a标签可以唤起设备应用程序。喷逊栏定应用png!-- 唤起设备拨号 --a hreftel:10010电话联系/a!--唤起设备发送邮件--a hrefmailto:10010qq.com邮件联系/a!--唤起设备发送短信 --a hrefsms:10086短信联系/a