空格和回车是无效的,需要使用HTML实体;
标记中不能有空格,如把
采用标记嵌套方式可以为同一个内容应用多个标记;
书写注释,方便程序开发。
5.HTML文档的基本结构元素
........ 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。 即当前页面采取的是 HTML5 版本来显示网页. 和标记表示该文档是HTML文档。 和标记表示文档头部信息。 和标记是网页的主体信息
1.头部内容
标记是所有头部标记的容器,它是开始标签后出现的第一个标签,以开始,以结束,开始和结束之间可以包含标题信息、元信息、定义CSS样式和JavaScript脚本代码等。 标记中的内容,一般不会显示在网页上。以下是中所包含的标记。1.标题
2.元信息标记
标记可提供相关页面的元信息(meta-information),有以下4种使用方法
- 字符集charset属性
规定 HTML 文档应该使用哪种字符编码
- 关键字描述
向搜索引擎说明网页的关键字
- 页面描述
对一个网页概括的描述
- 页面跳转
<meta http-equiv= “Refresh” content= “时间间隔的秒数;url=要跳转的网站”
3.标签
为页面上的所有链接规定默认地址或默认目标
<basehref= “http://www.baidu.com”>
4.标签
链接外部文件,例如样式表等
2.主体内容
即body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表)等等。HTML 5增加了article、section、nav、aside、header、footer等布局元素,以实现更好的语义解释。
三、HTML5的基本页面元素
==============
1.文本元素
段落标记
和换行标记
段落标记
来描述段落。网页显示时,包含在
标记对中的内容会显示在一个段落里。另起一行使用换行标记。
标题标记
n取1-6,h1最大,h6最小
块标记
和
2.列表元素
有序列表标记
- 列表信息
- 列表信息
- 列表信息
- 列表信息
- ...
type属性可以修改有序列表序号的样式
属性值 说明
1 数字1、2…
a 小写字母a、b…
A 大写字母A、B…
i 小写罗马数字i、ii、iii…
I 大写罗马数字Ⅰ、Ⅱ、Ⅲ…
start属性可以设置列表序号的起始值。
无序列表标记
- 列表信息
- 列表信息
- 列表信息
- 列表信息
- ...
无序列表的每个列表项目前默认显示黑色实心圆点。type属性修改无序列表符号的样式,disc实心圆点(默认),square方形,circle空心圆圈
自定义列表
-
关注我们
- 新浪微博
- 官方微信
- 联系我们
它是一系列项目和它们的解释。自定义列表以
-
标记开始,自定义列表项目以
开始,自定义列表的解释以
- 开始。
3.超链接元素
超链接属性
target属性可取下表所列各值:
超链接类型
1.内部链接
将超链接标记中href属性的URL值设置为相对路径,就可以在HTML文件中定义内部超链接。
2.外部链接
外部链接指网页中的链接标题可以链接到网站外部的文件,需要定义外部链接时,在超链接标记中,将其href属性的URL值设置为绝对路径即可。
3.书签链接
如果有的网页内容特别多,页面特别长,需要不断翻页才能看到想要的内容,这时,可以在页面中(一般是页面的前部)定义一些书签链接。
超链接路径
1.绝对路径
绝对路径指文件的完整路径,包括文件传输的协议HTTP、FTP等,一般用于网站的外部链接。http://www.baidu.com
2.相对路径
相对路径是指相对于当前文件的路径,它包含了从当前文件指向目的文件的路径,适用于网站的内部链接。
🍑同一目录
直接输入要链接的文档名 index.html
🍑链接上一目录
先输入“…/”,再输入目录名 …/images/pic1.jpg
🍑链接下一目录
先输入目录名,后加入“/” videos/v1.mov
3.根路径
根路径的设置以“/”开头,后面紧跟文件路径,例如:/download/index.html。
基准URL标签
如果一个页面中、、、等标签的绝大部分的链接URL的前面部分都是一样或、等标签的链接目标窗口大部分相同时,可以将URL这个公共的部分或公共的目标窗口提取出来放到中进行设置,而不必分别在每个标签中一一设置。
基准URL设置语法:
4.图像元素和多媒体元素
| 标签 | 功能 |
| — | — |
| | 设置文字在页面中的滚动效果 |
| — | — |
| | 在网页中嵌入图像 |
| | 在网页中嵌入Flash动画、音频和视频等多媒体内容 |
| | 在网页中嵌入音频 |
| | 在网页中嵌入视频 |
图像标记
利用标记插入图像是网页中最常用的图像插入方式。标记并不是在网页中插入图像,而是从网页上链接并显示一幅图像。
| 属性名 | 说明 |
| — | — |
| src | 图像地址 |
| title | 提示文本,鼠标放到图片上时提示的文字 |
| alt | 替换文本,图像显示不出来时的文字 |
| width/height | 设置图像宽度/高度 |
| border | 设置图像边框 |
| align | 设置图像对齐方式 |
多媒体文件标记
src url地址
autostart 自动播放
loop 循环播放
滚动文字设置
基本语法
滚动文字
主要有direction和behavior属性
direction属性值有:
up 设置文字向上滚动
down 设置文字向下滚动
left 设置文字向左滚动(默认方向)
right 设置文字向右滚动
behavior属性值有:
| behavior属性值 | 意义 |
| — | — |
| scroll | 设置文字循环往复滚动(默认行为) |
| slide | 设置文字只进行一次滚动 |
| alternate | 设置文字交替进行滚动 |
| scrollamount | 设置某个数值n ,设置文字滚动速度,值越大越快,默认值为6 |
| scrolldelay | 设置某个数值n , 设置文字在每一次滚动后,延迟一段时间后再进行下一次滚动,单位为毫秒,值越小越快 |
5.表格元素
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
884145007)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-Ge7RhAYO-1712884145008)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。