跟着字节大佬学web前端笔记【HTML篇】（一）

最新推荐文章于 2024-08-16 16:28:57 发布

到底要努力多久

最新推荐文章于 2024-08-16 16:28:57 发布

阅读量537

点赞数 7

分类专栏：跟着字节大佬学web前端笔记文章标签：笔记

本文链接：https://blog.csdn.net/qq_61068913/article/details/139140371

版权

跟着字节大佬学web前端笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、VSCode常用快捷键

1.代码格式化：shift+Alt+F

2.向上或向下移动一行：Alt+⬆或Alt+⬇

3.快速复制一行代码：shift+Alt+⬆或shift+Alt+⬇

4.快速保存：Ctrl+s

5.快速查找：Ctrl+f

6.快速替换：Ctrl+h

二、HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题名字</title> 
</head>
<body>
    
</body>
</html>

三、标签

1.标题文字大小：<h1></h1>~<h6></h6>，双标签，vscode快捷生成：h$*6

2.标题位置：align

<h1 align = "left/center/right"> </h1>

3.段落标签：<p></p>

4.换行单标签：<br>

5.水平线标签：<hr>

<hr color="颜色" width="宽度" size="高度" align="水平位置">

6.图片标签：<img>

<img src="图片文件名带后缀" alt="图片的替代文本" 
width="规定图片宽度" height="规定图片高度，一般不设置" 
title="鼠标悬停在图片上给予的文字提示">

7.图片路径：绝对路径、相对路径、网络路径

（1）绝对路径：只能在本地盘符读取图片

<img src="D:\web-practice\html\picture.jpg">

（2）相对路径：HTML文件和图片文件在同一层文件夹下直接用图片文件名，不在同一层文件夹下:

a.子级关系：/

b.父级关系：../

c:同级关系：./

（3）网络路径：具体的网络地址

8.超文本链接：使用标签<a></a>来设置，超链接可以是一个字，一个词或者一组词，图等，可以点击这些内容跳转到新的页面。

链接有三种状态：未访问时显示为蓝色字体并带有下划线；访问过显示为紫色字体带有下划线；点击时为红色字体带有下划线。

<a href="url">链接文本</a>

9.文本：

常用文本标签（都可以嵌套到p标签中）
标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特定的含义

10.列表标签：有序列表、无序列表都可以嵌套使用。

（1）有序列表：<ol><li></li><ol>

<ol type="序号类型：1/A/a...">
    <li></li>
</ol>

（2）无序列表：<ul><li></li></ul>，快捷方式：ul>li*n（n根据自己需要的li数量修改）

<ul type="disc/circle/square/none">
    <li></li>
</ul>

11.表格标签：

表头：<th></th>
表格：<table></table>
行：<tr></tr>
单元格（列）：<td></td>
属性：border（边框），width（宽度），height（高度）

快捷方式：table>tr*n>td*n{单元格｝（n根据自己需要的数量修改）

12.表格单元格合并

水平合并：colspan
垂直合并：rowspan

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格单元格合并</title>
</head>
<body>
    <p>合并单元格6和7，colspan</p>
    <p>合并单元格14和19,rowspan</p>
    <p>合并单元格16，17，21，22,colspan and rowspan</p>
    <table border="1" width="550" height="100">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">6、7</td>
            <!-- <td>单元格7</td> -->
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td rowspan="2">14、15</td>
            <td>单元格15</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">16、17、21、22</td>
            <!-- <td>单元格17</td> -->
            <td>单元格18</td>
            <!-- <td>单元格19</td> -->
            <td>单元格20</td>
        </tr>
        <tr>
            <!-- <td>单元格21</td> -->
            <!-- <td>单元格22</td> -->
            <td>单元格23</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>
</body>
</html>

效果图

13.form表单：在web网页中用来给用户填写信息，从而能采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由容器和控件组成，一个表单一般包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫控件，表单是容器，它能够容纳各种控件

<form action="url" method="get|post" name="myform"></form>

属性说明

action：服务器地址

name：表单名称

method中get和post的区别

数据提交方式，get把提交的数据url可以看到，post看不到

get一般用于提交少量数据，post用来提交大量数据

14.表单元素：表单标签、表单域、表单按钮。

<form>
    <input type="text">  //输入框文本
    <input type="submit" value="按钮上的文字"> //提交按钮
    <input type="password"> //密码框
</form>

15.块级元素和内联元素

块元素	内联元素
块元素会在页面中独占一行（自上而下垂直排列）	行元素不会独占页面中的一行，只占自身的大小
可以设置width、height属性	行内元素设置width、height属性无效
可以包含行内元素和其他块级元素	不包含块级元素

常见块级元素：div,form,h1~h6,hr,p,table,ul......

常见内联元素：a,b,em,i,span,strong......

行内块级元素（特点：不换行、能够识别宽高）：button,img,input......

16.H5新标签

<header></header> 头部
<nav></nav> 导航
<section></section> 定义文档中的节，比如章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子