前端学习笔记分享

qainduan里

已于 2023-05-21 18:47:00 修改

阅读量97

点赞数 1

文章标签：前端学习笔记

于 2023-05-13 14:47:53 首次发布

本文链接：https://blog.csdn.net/m0_74978387/article/details/130657379

版权

基础学习路线就是从HTML到CSS，推荐B站黑马程序员

HTML

一、标签语法

HTML超文本（链接）标记（标签，带尖括号的文本英文）语言

标签成对出现，中间包裹内容
< >里面放英文字母（标签名）
结束标签比开始标签多/(eg:<strong></strong>)
双标签成对出现，单标签只有开始标签，无结束标签（eg：换行标签，<hr>水平线标签)
保存HTML标签的文件扩展名为.html

二、HTMl基本语法

<html></html>:html+回车直接生成

整个框架是！(英文)+Enter/Tab键直接生成

/*骨架*/
<!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>

三、标签的关系

父子关系（嵌套关系）
```
<html>
    <head></head>
</html>
```
兄弟关系（并列关系）
```
 <head></head>
 <body> </body>
```

四、注释

ctrl+/(添加/删除)直接生成注释

五、标题标签

一般在新闻标题、文章标题、网页区域名称、产品名称......出现

标签名：h1~h6(双标签)
效果：文字加粗，字号逐渐减小，独占一行，h1一个网页只能用一次

六、段落标签

一般用在新闻段落，文章段落，产品描述信息

标签名：p(双标签) eg：<p></p>
效果：独占一行，段落之间存在间隙

七、换行与水平线标签

换行： (单标签)不用回车键换行
水平线：<hr>(单标签)

八、文本格式化标签

为文本添加特殊格式，以突出重点

strong/b：加粗
ins/u：下划线
em/i：倾斜
del/s：删除线

九、图像标签-基本使用

在网页中插入图片

<img src="图片的URL"> ./+回车选择图片

<body>
    <!-- 截屏1 -->
    <img src="./截屏1.png">
    /*img是必须属性，src是图像的未知和名称*/
    /*一个 . 表示在当前路径下，两 . . 表示进入上一级文件夹*/

    <img src="./imagines/截图 2.png">
    <img src="../屏幕截图 2023-04-09 161726.png" >
</body>

属性：

alt 替换文本：图片无法显示的时候显示文字
title 提示文本：鼠标悬停在图片上的时候显示文字
width 图片的宽度：值为数字，无单位
heigth 图片的高度：值为数字，无单位

十、路径

查找文件时，从起点到终点经历的路线

相对路径：从当前文件位置出发查找文件文件夹名字 :/、进入当前文件：./、进入上一级文件夹：../
绝对路径：从盘符出发查找文件
\为windows默认，建议用/
文件的在线网址可以复制

十一、超链接

点击跳转到其他页面

<a herf= ...>...</a>
<a herf= "#" target="_blank">...</a>  /*  #是空链接，原来网页仍然打开  */

十二、音频标签、视频标签

<audio src="音频的URL></audio>

src 必须属性：支持mp3,Ogg,Wav
controls 显示音频控制面板
autoplay 自动播放(浏览器禁用)
loop 循环播放

<video src="视频的URL></video>

以上四点+muted 静音播放

十三、列表，表格，表单

列表：布局内容排列整齐的区域

无序：ul嵌套li，ul是无序列表，li是列表条目（ul里只能包裹li标签，li标签那里面可以包裹其他的）
```
<body>
    <ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>
</body>
```

有序：ol嵌套li，ol是有序列表，li是无序列表条目

<body》
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    </ol>
</body>

定义列表：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
```
<body>
    <dl>
        <dt>列表标题</dt>
        <dd>列表描述/详情</dd>
    </dl>
</body>
```

表格：展示数据

table(表格)嵌套tr(行)，tr嵌套td(内容单元格)/th(表头单元格)

table 在网页中，表格默认无边框线，若需要则加border属性
thead 表格头部，thbody 表格主体，thfoot 表格底部

合并单元格：将多个单元格合并成一个（跨行/列合并）

步骤：1.保留最左最上的单元格，添加属性（取值是数字，表示需要合并数量） 2.跨行合并：rowspan，跨列合并：colspan 3.删除其他单元格

表单：收集用户信息

input标签基本使用

type属性值不同，则功能不同（单) <input type="text/..">

属性：
- text：文本框，用于输入单行文本（不换行）
- password：密码框（显示为“”)
- radio:单选框
- checkbox：多选框
- file：上传1文件（一般一次只上传一个文件）
input标签占位文本：提示信息

<input type="...." placeholder="提示信息">
具体
- 单选框radio
  
  属性名：
  - name 控制名称：控制分组，同组只能选中一个（单）<input type="radio" name="自定义名" checked>+字
  - checked 默认选中：属性名和属性值相同，简写为一个单词
- 上传文件file：添加multiple属性可实现文件多选功能 <input type="file" multiple>
- 多选框checkbox：默认选中checked <input type="checkboc" checked>+字