
本笔记参考了pink老师的前端基础教学视频提炼并整合,视频链接
HTML常用标签文档类型声明标签,采用html5版本显示页面
语言标签(含有语言标签可以让浏览器翻译为该语言,但不翻译的话所有语言都可以正常显示)
中文是zh-CN
字符集
在
标签内,通过标签的charset属性规定html文件应该使用哪种字符编码UTF-8为万国码
标题标签
每个标签独占一行
我是一级标题
段落标签
vscode中使用alt+z来自动换行
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落中会有较大的空隙
内容
换行标签(break)
单目标签,在一段中强制某个区域后的文字换行显示
与
的明显区别就是没有大的空隙
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | 或者 | 使用strong标签语义更加强烈 |
| 倾斜 | 或者 | 使用em标签语义更加强烈 |
| 删除线 | 使用del标签语义更加强烈 | |
| 下划线 | 或者 | 使用ins标签语义更加强烈 |
shift+alt+下方向键:可以直接复制这一行内容到下一行
无语义盒子标签盒子用来装内容
这是头部 今日价格
divison指分割分区。span指跨度跨距
标签用来布局,一个独占一行,大盒子 不用占一行,可以有多个图像标签和路径
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 如果图片无法显示,则代替图片的文字 |
| title | 文本 | 提示文本,鼠标放在图片上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
宽度和高度一般修改一个,否则会变形。修改一个另一个会等比例改变。
属性之间以空格分开
边框一般在css中设定
目录文件夹和根目录目录文件夹:即为普通文件夹,但是存放了页面制作的相关素材
根目录:打开目录文件夹的第一层就为根目录
实际中会新建一个文件夹来存放这些图片
相对路径:以文件所在位置为参考,建立出的目录路径。图片相对于HTML文件所在的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / | ...下一级,如 |
| 上一级路径 | ../ | ...上一级 ,如 |
../的作用可以看作是让他回到上一级
绝对路径:在计算机中直接的位置
一般引用网页的直接图片地址
anchor n.锚
文本或图像
herf用于指定链接目标的url地址,为必须属性
target指定链接页面的打开方式,其中_self为默认在原页面打开替换,_blank为重新打开一个页面
2.链接分类1.外部链接: 例如
百度
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如
首页
3.空链接: 如果当时没有确定链接目标时,可以先用一个空的来代替
首页
4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件
5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如
第2集
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:
HTML 中的注释和特殊字符第2集介绍
1.HTML中的注释以“”结束。
注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的
可能写起来比较麻烦,直接用快捷键ctrl + /
2.在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。
记住空格、大于和小于号即可
<和>分别译为less than和greater than