Day5 常见的HTML元素

HTML元素的组成
以下图为例

通常都有一个起始标签<>和一个结束标签< / >
在起始标签和结束标签之间会写内容，以上面的例子来说，内容就是My cat is very grumpy。

没有内容的标签则不会有结束标签，因为不需要透过内容来产生效果，例如:img

元素内可以添加属性（Attribute)
以下图为例
元素的名称(p)和添加的属性名称(class)会空一格
属性名称(class)後面都会接一个等於「=」的符号放在起始标签<>内

VS CODE Emmet
只要在vs code内输入开头
例如: h1，VS CODE内建的Emmet 就会自动产生成完整的html元素

相关参考资料: Emmet Documentation

常用的几个HTML元素

1. 标题(Headings) : h1~h6
   以下图为例
   在VS CODE上输入h1~h6
   
   在浏览器上呈现的画面
   
   h1 是用来为网页的主标题，只会在网页上出现一次。
   h2则是次标题，h3则是相较於h2更次要的标题，以此类推到h6

2. 段落(Paragraph):p
   新增一段文章段落时，就可以使用p
   
   在浏览器上呈现的画面
   

3. 图片(image):img
   src 指的是source，内容要写图片的取得路径
   alt 指的是alternative，内容则是写给视障人士观看用的说明
   
   在浏览器上呈现的画面
   

新增图片的方式:

• 新增不是存在电脑的图片到网页上，可以按滑鼠右键→复制图片位址，将复制的内容贴到src="复制内容"
  即可
• 新增存在电脑内的图片到网页上，可以在src=" "引号内写资料夹名称/图片的档名，如果是资料夹里面资料夹内的图片就再多打一个斜线

4. 超连结: a
   在网页上插入URL
   href 指的是 Hypertext Reference
   
   在浏览器上呈现的画面
   
   点击紫色文字部分就会连到指定的网址

如果多新增一个属性 target="blank"
则会开启新分页到指定网址

如果新增 title="内容"，则会有显示弹跳视窗提示的效果

在浏览器上呈现的画面

5. 列表标签: ul li / ol li
   
   在浏览器上呈现的画面
   

在浏览器上呈现的画面

参考资料:HTML basics

以上为个人学习笔记整理
若有错误，欢迎指正