前端笔记试发前端三剑客笔记阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴--by coderwhy

常用快捷键

按键	效果	按键	效果
`Ctrl` + `Enter`	切换下一行	`Alt`+`Shift`+`↓`	向下拷贝
`Ctrl` + `/`	注释	`Win` + `D`	回到桌面

🚩HTML

1.1 html元素(element)速查

HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

1.2 html结构

！+回车快速生成html结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

lang="zh-CN"或"en"
head元素内编写配置信息(也称为元数据[meta data])
charset(字符编码)

1.3 html元素

常见元素：

p、h元素；img、a、iframe元素；div、span元素；

ul、ol、li元素；button、input元素；

table、thead、tbody、thead、th、tr、td

1、h元素(heading)：SEO优化

2、p元素(paragraph)

3、img元素：单标签、可替换元素

① src(source)属性：本地、网络路径；

绝对(absolute)路径：

网址、盘符

相对(relative)路径：

. 代表当前文件夹，可以省略；

.. 代表上级文件夹；

对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 / ，而不是 \

② alt属性：当图片加载不成功时，显示这段文本；

③ ~~width、height、border~~

4、a元素(锚anchor)

① href(Hypertext Reference)属性：本地、网络路径(url、下载内容、邮箱跳转)；

② target属性：

_self：默认值；
_blank：在一个新的窗口中打开URL

设置锚链接：

<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">HYMiniMall</a>
<a href="mai1to:3021523556@qq.com">发邮件到qq邮箱</a>

设置id，用#id链接
<p id="one"></p>
<a href="#one">段落一</a>

图片链接，a和img结合运用
<a href=""><img src="../image/01.jpg" alt="图片"></a>

5、iframe元素

① src(source)属性；

② frameborder属性：1显示；0不显示；

③ a元素target的其他值(配合iframe):

_parent：在父窗口(上一个窗口)中打开URL；
_top：在顶层窗口中打开URL

6、span、div(division)元素🔥

区别：span用于同一行间的内容；div分割块；

7、不常用元素

strong元素：加粗；
i元素：斜体；
code元素：等宽字体，用于代码；
br元素：换行；
hr元素：分割线

8、全局元素

id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式时标识元素；
class：单元素可以设定多个class、用空格隔开，它允许CSS和Javascript通过类选择器或者DOM方法来选择和访问特定的元素；
style：给元素添加内联样式；
title：给元素添加提示文本

前端笔记试发