web前端基础（一）

已于 2024-07-04 16:44:41 修改
阅读量847 收藏 20
点赞数 21
文章标签： 前端
于 2024-07-04 11:14:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaolin_ss/article/details/140174249
版权

文本标签：

快捷键：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"

        <title>hellohtml</title>

    </head>

    <body>

        <!--

        1.常用快捷键

        ctrl+s保存

        ctrl+x剪切

        ctrl+c复制

        ctrl+v粘贴

        alt+b运行

        ctrl+/  注释

        shift+alt+下 复制整行到下一行

       

        -->

    </body>

</html>
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/xiaolin_ss/article/details/140174249

标题和段落标签：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>标题和段落</title>

        <!--

        1.标题标签---块级标签

          格式：h1---h6  一级~六级标签

        2.段落标签---块级标签

          格式：<p></p>

        3.块级标签在之前之后都换行    

         -->

</head>

<body>

    <h1>这是一个标题</h1>

    <h2>这是一个标题</h2>

    <h3>这是一个标题</h3>

    <h4>这是一个标题</h4>

    <h5>这是一个标题</h5>

    <h6>这是一个标题</h6>

    zhangsan

    <p>lisi</p>

    zhangsan

</body>

</html>  

换行和水平线：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.">

    <title>换行和水平线</title>

    <!--

        1.换行---行内标签

        格式：<br>

        2.水平线---块级标签

        格式：<hr>  

    -->

</head>    

<body>

    username:xiaolin<br>

    xiaowu<br>

    xiaolin

    <hr>

    xiaohuang

    xiaoma

    <hr>

    </body>

</html>

 

字体标签：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字体标签</title>

</head>

<body>

    <hr>

    <!-- 加粗 -->

     <b>文字</b>

     <strong>文字</strong>

     <!-- 斜体 -->

      <i>wwww</i>

      <em>wwww</em>

      <!-- 删除线 -->

       <s>wwww</s>

       <del>wwww</del>

       <!-- 双引号 -->

        <q>wwww</q>

        <!--  下划线 -->

          <u>wwww</u>

          <ins>wwww</ins>

          <!-- 上标和下标字体 -->

           zhangsan<sup>*</sup>

           zhangsan<sub>*</sub>

           <!-- 大小号字体 -->

            <big>wwww</big>

            <small>wwww</small>

            <!--  **预保留   保留原格式-->

              <pre>

                wwww

                width

                haha

              </pre>

              <!-- 特殊字符 -->

               <!--

               空白符

               &nbsp；

               版权符

               &copy；

               大于小于

               &gt；&lt；

               

               -->

               <hr>

       hhhhh:&nbsp;&nbsp;&nbsp;xiaohuang

       &copy;xiaolinsuoyou

       &lt;&gt;        

</body>

</html>

列表标签：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>有序列表</title>

    <!--

    列表：

    1.有序列表

     ol：有序列表

           li：列表项

           有序列表默认type=“1”

           start表示起始序号

    2.无序列表

    ul；无序列表

        li；列表项

        默认实心圆

    3.数据列表

      格式：

          dl：数据列表

            dt：数据小标题

            dd：数据列表项

           

            列表就是一个块级元素

    -->

</head>

<body>

    <!-- 有序列表 -->

     <ol type="A">

        <li>内容</li>

        <li>内容</li>

     </ol>

     <ol type="1" start="100">

        <li>内容</li>

        <li>内容</li>

     </ol>

     <!-- 无序列表 -->

      <ul type="circle">

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

      </ul>

      <ul >

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

      </ul>

      <ul type="square">

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

        <li>内容</li>

      </ul>

      <!-- 数据列表 -->

        <dl>

            <dt>书</dt>

            <dd>1</dd>

            <dd>4</dd>

            <dd>3</dd>

            <dd>2</dd>

        </dl>

        <!-- 可以直接写dd -->

         <dd> 内容</dd>

         <!-- 也可以直接写li标签默认无序列表 -->

          <li>测试内容</li>

          <li>测试内容</li>

          <li>测试内容</li>

          <li>测试内容</li>



          <!-- 列表嵌套 -->

           <ul>

            <li>

                <ol>

                    <li>

                        <dt>标题</dt>

                        <dd>数据</dd>

                        <dd>数据</dd>

                        <dd>数据</dd>

                    </li>

                    <li>内容</li>

                    <li>内容</li>

                    <li>内容</li>

                </ol>

            </li>

            <li>内容</li>

            <li>内容</li>

            <li>内容</li>

            <li>内容</li>

           </ul>



</body>

</html>

再卷还是菜
关注
  • 21
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端基础总结
weixin_68043491的博客
06-06 1825
1.首先了解网页和浏览器网页:网页是网站的基本单位，也叫Web页面，是承载各种网站应用的平台。网页由主要由文字，图片和链接构成，除此之外，网页的元素还包括表格、动画、音频、视频等等。浏览器: 浏览器目前有五大代表,分别为1.IE浏览器 → Edge浏览器2.谷歌（Chrome）浏览器3.safari浏览器4.火狐（Firfox)浏览器5.Opera浏览器浏览器主要由1.用户界面 2.渲染引擎 3.js解释器(Javascript) 4.网络功能模块 5.数据持久化存储等五大部分组成浏览器的内核:2.web标
web前端开发基础教程一
m0_64365419的博客
09-26 9122
简单的来说，en就是英文网页，zh-CN就是中文网页。但这并不意味着，我们一旦定义好语言，就不能在其中书写别的语言了，只是说为了展现当前页面的语言而已。那么它的作用就体现在，假如说当前的页面使我们不熟悉的语言，那么我们可以进行翻译。
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
web前端基础知识
早睡早起长头发的博客
07-11 6881
一、网页、静态网页、动态网页 二、网页名词解释 三、Web标准 四、Web页面的组成
web前端开发基础知识
weixin_42256571的博客
12-10 2026
web前端开发基础知识 一、概论 网站：互联网上用于展示相关内容网页的集合。（一本书，在服务器端是以有很多文件的文件夹呈现） 网页：网站中的一页，一个网站中的网页通过超链接的方式，被组织在一起。（服务器端以文件的形式呈现） 以上所说的文件保存在服务器。浏览器的作用就是解析网页源代码，呈现出网页的形态，俗称渲染。 前端技术的构成：html(从语义的角度，描述页面结构)+css(审美的角度，美化页面)...
Web前端基础.md
01-13
Web前端基础
web前端基础案例
09-30
总结来说，这个"Web前端基础案例"教程旨在帮助初学者建立起对Web前端开发的全面理解，通过实践案例强化技能，从而能够独立创建具有基本功能和样式的静态网页。随着进一步的学习，你将能掌握更复杂的前端框架和技术，...
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
Web前端基础笔记1
08-08
【Web前端基础笔记1】 在Web开发领域，前端技术扮演着至关重要的角色，它负责构建用户与网站交互的界面。本笔记主要关注HTML（Hyper Text Markup Language），这是创建网页内容的基础语言。 1. HTML概述 HTML是一...
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 944
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 99
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 82
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
最新发布
清水欧度 Odoo ERP
07-23 745
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 582
CTFWP，ctfshow-web42
前端性能优化--懒加载
weixin_43799793的博客
07-19 189
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
基于 Gunicorn、Flask 和 Docker 的 Web 应用开发
2401_85639015的博客
07-19 1503
Docker 是一个开源的应用容器引擎，它允许开发者打包他们的应用以及应用的运行环境到一个可移植的容器中。容器可以运行在任何支持 Docker 的机器上，确保了环境的一致性。通过本教程，你将学会如何使用 Docker、Gunicorn 和 Flask 构建一个高效、可扩展的 Web 应用。每个步骤都提供了详细的指导和示例代码，确保你能够理解和实践每个环节。希望本教程能够作为你进入微服务架构领域的起点。
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 413
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 572
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
web前端基础练习题
02-28
以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值