第六届字节跳动青训营第六课 | 青训营

65 阅读2分钟

行内元素 1.文字类型修饰 eg:嵌入到段落p元素里面

2.图像元素img(重点) 前提:把网页中需要显示的图片文件copy到站点的对应目录中!!! 元素:img 核心属性1: key:src value:相对路径(相当于本文件)(不推荐使用绝对路径) img标签为单标签,不是闭合标签

3.超链接元素a 元素:a 核心属性1: key:href value:url字符串或是"#" 应用1:

这是一段超链接的demo文本,点击这里,跳转到百度页面

应用2: 尝试在一个图片元素中添加超链接 应用3: 尝试在一个列表元素中为每一个列表项添加超链接 应用4: 尝试在一个表格中,添加多个图片小图,为每个小图添加超链接

(内链--跳转到自己站点的其他页面或是自己页面的其他部分) 应用1:p38-39 尝试链接本站点中不同层级的页面文件 (注意:相对路径,与img标签的src属性类似) 应用2:P39 尝试制作长页面,在长页面中添加书签,然后添加对书签的超链接 书签:XXX 超链接:链接内容

4.图像热点超链接元素(自学) 目标:一张图片中可以添加多个超链接区域 重点:坐标的设定,区域的绘制

5.音频元素 元素:audio 核心属性1: key:src value:类似于img里面的src属性值 audio为双标签元素,闭合标签

6.视频元素 元素:video 核心属性1: key:src value:类似于img里面的src属性值 video为双标签元素,闭合标签

【总结】 1.src属性值:相对资源位置的书写(相对于自身文件的位置) 2.超链接元素a (1)外部链接的写法(链接到外部网站)---href属性值(从协议开始写起,例如,www.baidu.com) (2)内部链接的写法(链接到本站点的其他页面以及其他所有文件)--href属性值(相对路径:相对于本页面文件?站点的根目录?) 作用: 可以跳转至其他页面 可以实现资源的下载 3.自身链接的写法(跳转至自身页面的其他位置) 注意:实现需要借助锚点的方式,成对的使用