前端学习1

原创已于 2025-02-10 18:25:49 修改 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #前端

于 2025-02-09 16:28:20 首次发布

该文章已生成可运行项目，

路过点个赞叭
首先，html需要依赖浏览器来实现显示相关的元素和文本，所以我们一般使用chrome浏览器，在建立一个标准html页面结构需要下载vscode

HTML使用

在一个标准的html页面结构，输入!可得到一个html模板

head部分

<!-- HTML 标准模板 -->
<!DOCTYPE html> <!-- 指定 HTML 的版本，了解一下就行 -->
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 规定使用的字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //声明网页使用的字符集、作者、日期和时间、网页描述、关键词、页面刷新等
    <title>Document</title> <!-- 规定网页的标题 -->
</head>
<body>
    <!-- 其他主要的标签 -->
</body>
</html>//根标签，可以设置 lang 属性，修改使用的语言

html创建注释

HTML 使用 < !-- 一些注释… --> 来注释
快捷键：ctrl+/

<!-- 
多行注释
多行注释
多行注释
-->

创建文本

标题

<!-- 使用标题标签 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>
</body>
</html>

段落标签

<!-- 使用段落标签 -->
<!-- 使用标题标签 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一段文本</p>
</body>
</html>

换号

<!-- 使用换号标签 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这是一<br/>
        <br/>
        <br/>
        文字</p>
</body>
</html>

格式标签

一般使用css实现

<strong></strong>、<b></b>：对字体加粗
<em></em>、<i></i>：对字体倾斜
<del></del>、<s></s>：对字体加删除线
<ins></ins>、<u></u>：对字体加下划线

创建图片

使用 <img></img>

常见属性：
src ：指定要显示在浏览器上图片的路径 
alt ：该属性内的内容会在图片加载失败后以文字的形式显示在浏览器上（这有助于帮助我们调试代码或提示用户）
title：图片的标题，用鼠标悬停在浏览器显示的图片上时，这个标签内的内容会被显示出来，一般用作图片的辅助说明 
width、height：这两个属性可以调整图片的宽和高（一般用像素单位控制） 
border：显示图片的边框（一般用像素单位控制）

创建链接

使用<a> </a>
在1.跳转csdn
<a herf=“https://www.csdn.net/”>1.跳转csdn<a/>

创建表格

使用<table></table> 创建表格，内部使用 <tr></tr> 代表一个单元行，<td></td> 代表一个单元格

常见属性：
border：表格的是否带有边框，0 代表没有边框，其他数的值越大，边框越粗
width：表格的宽度
height：表格的高度
cellpadding：单元格内容距离边框的距离（默认 1px）
cellspacing：单元格与单元格之间的距离（默认 2px）
align：表格的对齐方向

创建列表

无序

<ul><li></li></ul> 创建无序列表
常见属性：

disc，实心原点（默认值）
circle，空心原点
square，方块

有序

<ol><li></li></ol> 创建有序列表

自定义列表

<dl><dt><dd></dd></dt></dl> 创建自定义列表

表单

<form></form>元素标签
action体现服务器地址
属性：type

text：文本框控件
password：密码框控件
radio：单选框控，加上属性 name 可以保证多个同名单选只有一个被选中，加上属性 checked 则可以设置默认选项
checkbox：复选框控件

打印五个小星星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>    
    let row = prompt("请输入行数:");
    let col = prompt("请输入列数:");
    //    外层打印行数
        for(let i=1;i<row;i++){
            // 里层打印小星星
            for(let j=1;j<= col;j++){

                document.write("⭐");
            }
            document.write("<br>");
        }
    </script>
</body>
</html>

九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    span{
        display : inline-block;
        padding : 5px  10px;
        margin : 20px;
        border : 1px solid pink;
        border-radius: 5px;
        box-shadow: 2px 2px 2px pink;
        background-color: lightblue;
    }
    </style>
</head>
<body>
     <script>   
// 外层控制行数
        for(let i=1;i<=9;i++){
            // 里层控制列数
            for(let j=1;j<=i;j++){
                document.write(`<span>${i}x${j}=${i*j}</span> ` );
            }
            document.write("<br>");
            }
     </script>
</body>
</html>

<span> 标签是一个通用的内联容器，本身不具有任何特定的语义，主要用于对文档中的内联内容进行分组，以便通过 CSS（层叠样式表）或 JavaScript 对这些内容进行样式设置或操作。

<script> 标签可以直接在 HTML 文件中嵌入 JavaScript 代码，这些代码会在浏览器解析到 <script> 标签时执行。通过这种方式，可以为网页添加各种交互逻辑。

本文章已经生成可运行项目