HTML 学习第一天

119 阅读2分钟

html 骨架

!  回车 / tab	生成html骨架

注释 <!--xxxx-->

ctrl + shift + p  打开命令面板

alt + b 	open in default browser
批量修改 同一内容:选中,ctrl + d 

p   回车 / tab ,就生成了 p 标签

doctype 指明了 html 的版本,以及浏览器使用的渲染模式。

head标签是作用于网页的头部,它的内容不会在正文中显示出来。

html 文件名最好别带空格

<h1>Hello World</h1>	# 开始标签  标签内容  结束标签
<img src="url" />	# 开始标签上,可以有一些属性

img 标签里 不需要 再嵌入 其他标签,在这种情况下,可以 省略结束标签,在开始标签后面写一个 / 就可以了

默认情况下,浏览器会把多个连续的空格、换行 合并成一个空格。

URL

http://www.example.com/post/2016/fe.html?print=1&color=no#heading

协议 http

  • ://

Host 域名 www.example.com

Path路径 /post/2016/fe.html

Query参数 print=1&color=no

  • #

Hash heading 定位到指定id 的元素,锚点作用,页面内进行滚动

标签

h标题 独占

p段落 独占

br换行 单标签

hr 水平分割线 单标签


文本格式化标签:

strong 加粗

ins 下划线

em 倾斜

del 删除线


图片标签

<img src="地址" alt="图片加载失败时,显示的文本" title="鼠标悬停时,显示的文本">
<img width="">	

单标签,img标签展示对应的效果,需要借助标签的属性进行设置。

当图片加载失败时,才显示 alt 的内容

对于 width 和 height ,只设置其中一个,另一个就会等比例缩放。

如果同时设置 width 和 height ,设置不当就会变形。

多个属性之间 以空格隔开


音频标签

<audio src="地址" controls loop></audio>

controls 显示播放控件,不加controls,页面不会展示

loop 循环播放

音频标签支持:mp3,wav,ogg


视频标签

<video src="./语言之庭.mp4" width="600" controls autoplay muted></video>

视频可以实现自动播放,但 autoplay 必须搭配 muted 来使用,静音自动播放


链接标签

链接
<a href="url">牛牛</a>
属性
href="#"		空链接
target="_self"	当前窗口打开			默认是 _self
target="_blank"	新窗口打开

下载插件

open in default browser

chinese