前端与 HTML | 青训营笔记

402 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

一.语法规范

<!DOCTYPE html>文档类型声明,让文档知道网页的版本是html

<html lang="en">lang是用来指定语言的,en 英文,zh中文

<meta charset="UTF-8">meta用来设置网页基本信息,设置网页的元数据告诉浏览器如何解析网页,避免出现乱码

二.常用标签

1.表示强调

<em></em>表示强调,默认浏览器会以斜体显示em中的文字,读音上的强调

<i></i>与em显示效果相同,但是没有含义

<strong></strong>表示强调,默认浏览器会以黑体的形式显现,语义上的强调

<b></b>与strong效果相同,但无意义

<h1>-<h6> 标题标签,h1-h6强调等级逐渐降低

2.表示引用

<q></q>表示引用,双引号

<blockquote></blockquote>长引用,块元素,不要放在p标签中

<cite></cite> 短引用

<code></code> 代码引用

3.删除线和下划线

<del></del>     删除线    <s></s> 含义相同

<ins></ins>     下划线    <u></u> 含义相同

4.盒子标签

<div></div>标签用来布局,是一个大盒子。一行只能占一个

<span></span>标签也用来布局,一行可以放多个,是一个小盒子。

5.图像标签

<img src=“图像路径”/>

属性:

(1)alt 替换文本 图像显示不出来的时候用文字进行替换。也是无障碍的一种形式

eg.<img src="图片路径” alt="对图片的解释文字”/>

(3)title 提示文本,鼠标放到图像上,提示的文字。

eg.<img src="图片路径” title=“当鼠标当在图片上时会显示的文字”/>

(4) width 和 height 设置图像的宽与高

宽度和高度如果只修改一个,则另一个会等比例缩放。

eg. <img src="图片路径” width="500" height="500"/>

(5)border设置边框的粗细

eg. <img src="图片路径” border="15"/>

6.音频标签

<audio src="音频路径"></audio>

属性

(1)Controls 用来设置是否允许用户控制音频播放

(2)Autoplay 用来设置音乐是否自动播放

(3)loop循环播放

7.视频标签

<video src="视频路径"></video>

8.超链接

<a href="跳转目标页面" target="目标窗口的弹出方式”>文本图像</a>

属性

target:用于指定链接页面的打开方式,

_self为默认值,将原窗口换为超链接的窗口,

_blank为在新窗口中的打开方式,原窗口不变,打开另外一个窗口。

锚点链接:点击时可以快速定位到链接中的某个位置

eg.<a id ="bottom" href="#">回到顶部</a>

<a href="#bottom">回到底部</a>

用id指定

<a href="#live">个人生活</a>

<h3 id="live">个人生活</h3>