前端基础

前端基础

1.基础介绍

1). 网页有哪些部分组成 ?

文字、图片、音频、视频、超链接、表格等等。

2). 我们看到的网页，背后的本质是什么 ?

程序员写的前端代码 (备注：在前后端分离的开发模式中，)

3). 前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页

浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

  • HTML：负责网页的结构（页面元素和内容）。

  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

  • JavaScript：负责网页的行为（交互效果）。

官方文档：https://www.w3school.com.cn/

2.html

要想知道更多的html去这个开发者网站：html元素参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

如果看不懂想看中文网站可以把链接里面的en-US改成 zh-CN

大致的框架：输入一个!然后点回车会出现框架

<html>
    <head>
        <title>head里面一般不渲染</title>
    </head>
    <body>
        <h1>一般在body渲染</h1>
        <p>这是段落</p>
    </body>
</html>
<!-- 在此处写注释 -->

HTML中的标签特点

  • HTML标签不区分大小写
  • HTML标签的属性值，采用单引号、双引号都可以
  • HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

块级元素：

  • 以块展示
  • 出现在新的一行
  • 占一行
  • 上面的基本都是块

内联元素：

  • 在块级元素
  • 不会换行
  • 只占必要部分长度
<p>这<strong>是</strong>段落</p> <!-- 给是加粗 -->
<!-- 给文字附上一个超链接-->
<a href="https://google.com">aaa</a>
<!-- 这样的话是打开一个新的界面-->
<a href="https://bilibili.com" target="_blank">bilibili</a>

list:(类似印象笔记的点点和数字

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

一些详细操作：

快捷输入：直接打内容然后回车就行

<html>
    <head>
        <title>head里面一般不渲染</title>
    </head>
    <body>
        <h1>一般在body渲染</h1>
        <p>这<strong>是</strong>段落</p>
        <a href="https://google.com">aaa</a>
        <!-- 给文字附上一个超链接-->
        <!-- list-->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ol>
        <!-- 表格-->
        <table>
            <thead>
                <th>1</th>
                <th>1</th>
                <th>1</th>
                <th>1</th>
            </thead>
            <tbody>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tbody>
            <tbody>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tbody>
        </table>
        
<!-- 空行 -->
        <hr><!-- 分割线 -->
        <!--表单 form-->
        <form>
            <div>
                <label>first name</label>
                <input type="text" name="firstname" placeholder="Enter First Name">
                <!--填的信息被赋值给name placeholder是表单的提示信息-->
                <input type="submit" name="firstname" value="submit">
            </div>
        </form>
        <button> an按</button><!-- 一个按钮 -->
        <!-- 图片的地址和描述 -->
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.hnzlsx.com%2Fueditor%2Fphp%2Fupload%2Fimage%2F20190905%2F1567648164727266.gif&refer=http%3A%2F%2Fwww.hnzlsx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644846318&t=cb41fb12dd49f9694ac101c0ddbaf8e1" alt="乱找的图片">
        <blockquote>
            啊对对对对对对对对
        </blockquote>
        <!-- 把鼠标放在wlq上面会出现前面的信息 -->
        <p><abbr title="其实她是天才">wlq</abbr>是个sb</p>
        <!-- 引言 -->
        <p><cite>wuwuwu</cite>by嘤嘤怪</p>
        <span>毫无意义的框架</span>
    </body>
</html>

路径的书写方式：

  • 绝对路径

  • 相对路径

    ./ : 当前目录 , ./ 可以省略的

    ../: 上一级目录

3.CSS

codepen.io是一个前端代码在线编辑网站

css网站和html网站在一块

css是层叠样式表

三种方式添加CSS

1.外部样式表（常用）

css保存在.css文件中 在html里使用引用

创建一个文件style.css

在head里添加

<link rel="stylesheet" type="text/css" href="style.css">

2.内部样式表

将css放在html

posted @   wlqtc  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
·  SpringBoot
·  bootstrap
·  前端：BOM和DOM
·  前端基础之BOM和DOM
·  Java学习笔记 (十二) 前端基础1
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae