HTML、CSS学习笔记小结

已于 2022-11-25 01:31:50 修改
阅读量552 收藏 2
点赞数
分类专栏： 前端 文章标签： html css 前端 学习
于 2022-11-25 01:31:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwehne/article/details/128029666
版权

目录

1，HTML

1.1 简单介绍

1.2 快速入门

1.3 基础标签

 代码演示：

1.4 图片、音频、视频标签

 代码演示：

1.5  超链接标签

代码演示：

1.6  列表标签

代码演示：

1.7 表格标签

代码演示：

1.8 布局标签

代码演示：

1.9 表单标签

1.9.1 表单标签概述

 1.9.2 form标签属性

代码演示：

1.10 表单项标签

代码演示：

2，CSS

2.1 概述

2.2 css 导入方式

目录结构：

代码演示：

2.3 css 选择器

代码演示：

1，HTML

1.1 简单介绍

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像某东、某宝、某夕夕等网站有很多网页。

>>>这些都是网页展示出来的效果。而HTML也有专业的解释

==HTML(HyperText Markup Language)：超文本标记语言：==

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

    如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。

  • 标记语言：由标签构成的语言

    之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成 。我们在浏览器页面右键可以查看页面的源代码，如下可以看到如下内容，就是由一个一个的标签组成的：

 

这些标签不像XML那样可以自定义，==HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，==然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的 a 标签等。

HTML 预定义了很多标签，由于我们是Java工程师、是做后端开发，所以不会每个都学习，页面开发是有专门的前端工程来开发。那为什么我们还要学习呢？在公司中或多或少大家也会涉及到前端开发。

简单的给大家聊一下开发流程：

以后我们是通过Java程序从数据库中查询出来数据，然后交给页面进行展示，这样用户就能通过在浏览器通过页面看到数据。

==W3C标准：==

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

  • 结构：对应的是 HTML 语言

  • 表现：对应的是 CSS 语言

  • 行为：对应的是 JavaScript 语言

HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。

1.2 快速入门

需求：编写如下图效果的页面

要实现这个页面，我们需要从以下三步进行实现

  • 新建文本文件，后缀名改为 .html

    页面文件的后缀名是 .html，所以需要该后缀名

  • 编写 HTML 结构标签

    HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

代码如下：

<head>
    <meta charset="UTF-8">
    <title>html快速入门</title>
</head>
<body>
  我是中国人，我爱中国。
</body>
</html>

1.3 基础标签

基础标签就是一些和文字相关的标签，如下：

 代码演示：

<!-- html5 标识 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面的字符集 -->
    <meta charset="UTF-8">
    <title>基础标签</title>
</head>
<body>

<!--  <h1>  定义标题  h1最大，h6最小-->
<h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6>

<!-- <hr>  定义水平线 -->
<hr>

<!--
    html颜色：
        1.英文单词：red,pink,blue...
        2.三原色rgb(值1,值2,值3)：值的取值范围0~255  rgb(255,0,0)
        3.简化版三原色：  #值1值2值3： 值的范围00~FF  (也是 0~255，是用16进制表示方式)
-->
<!--  <font>  定义文本字体、尺寸、颜色-->
<font face="楷体" size="5" color="#dc143c"> 我是font，定义文本字体、颜色</font>

<hr>
<!--  <br>  定义折行（换行）-->
11月23日是歼15首次成功起降辽宁舰10周年。<br>
10年前，国产舰载机歼-15第一次降落在我国首艘航母辽宁舰甲板。

<hr>
<!--  <p>  定义段落-->
<p>11月23日是歼15首次成功起降辽宁舰10周年。</p>
<p>10年前，国产舰载机歼-15第一次降落在我国首艘航母辽宁舰甲板。 </p>

<hr>
<!--  <b>  定义粗体文本-->
<b>我是b标签，加粗</b>

<hr>
<!--  <i>  定义斜体文本-->
<i>我是i标签，斜体</i>

<hr>
<!--  <u>  定义文本下划线-->
<u>我是u标签，下划线</u>

<hr>
<!--  <center>  定义文本居中-->
<center>我是center，文字居中</center>

</body>
</html>

1.4 图片、音频、视频标签

  • img：定义图片

    • src：规定显示图像的 URL（统一资源定位符）

    • height：定义图像的高度

    • width：定义图像的宽度

  • audio：定义音频。支持的音频格式：MP3、WAV、OGG

    • src：规定音频的 URL

    • controls：显示播放控件

  • video：定义视频。支持的音频格式：MP4, WebM、OGG

    • src：规定视频的 URL

    • controls：显示播放控件

尺寸单位：

height属性和width属性有两种设置方式：

  • 像素：单位是px

  • 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

  • 绝对路径：完整路径

    这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。

    如：

    <img src="https://th.bing.com/th/id/R33674725d8a65sde3835ae30b20afe?rik=Pb3C9e5%2b%2v3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2fx9a6357d07c14a30fd76f9bsa3d1a314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">

    这里src属性的值就是网络中的绝对路径。

  • 相对路径：相对位置关系

    找页面和其他资源的相对路径。

    ./ 表示当前路径

    ../ 表示上一级路径

    ../../ 表示上两级路径

 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片音频视频</title>
</head>
<body>
<!--
    资源路径：
            1.绝对路径：完整路径
            2.相对路径
                xxx/html/02-图片音频视频.html
                xxx/html/a.jpg

                ./a.jpg     ./  == 当前目录
                a.jpg       如路径同级，亦可省略前部分路径
    尺寸单位：
            1.px：像素
            2.百分比（随着浏览器缩放而缩放）
-->
<img src="../img/a.jpg" width="389" height="500">

<!-- <audio>  音频标签-->
<audio src="../img/b.mp3" controls="controls"></audio>

<!-- <video>  视频标签-->
<video src="../img/c.mp4" controls="controls" width="500" height="300"></video>
</body>
</html>

1.5  超链接标签

`a` 标签属性： 

  • href：指定访问资源的URL

  • target：指定打开资源的方式

    • _self：默认值，在当前页面打开

    • _blank：在空白页面打开

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<!--
target ： 指定打开资源的方式
  target="_self" 默认值，在当前页面打开
  target="_blank" 在空白页面中打开
-->
<a href="https://www.baidu.com" target="_self">百度</a>

</body>
</html>

1.6  列表标签

HTML 中列表分为

  • 有序列表

  • 无序列表

标签说明：

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

无序列表中的 type 属性用来指定标记的形状

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表 order list-->
<ol type="A">  <!--type：设置项目符号-->
    <!--定义列表项-->
    <li>咖啡</li>
    <li>绿茶</li>
    <li>牛奶</li>
</ol>
<!--无序列表 unorder list-->
<ul type="circle"><!--circle 空心圆   disc 圆点   square 方块-->
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

</body>
</html>

1.7 表格标签

表格可以使用如下标签定义

  • table ：定义表格

    • border：规定表格边框的宽度

    • width ：规定表格的宽度

    • cellspacing：规定单元格之间的空白

  • tr ：定义行

    • align：定义表格行的内容对齐方式

  • td ：定义单元格

    • rowspan:规定单元格可横跨的行数

    • colspan:规定单元格可横跨的列数

  • th：定义表头单元格

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!-- border：边框  cellspacing：单元格之间空白为0-->
<table border="1" cellspacing="0" width="500"><!--表-->
    <tr align="center"><!--行--><!--align：调整 center：居中-->
        <th>序号</th><!--表头单元格-->
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>009</td><!--单元格-->
        <td><img src="img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>010</td><!--单元格-->
        <td><img src="img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>
    <tr align="center">
        <td>008</td><!--单元格-->
        <td><img src="img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签-合并单元格</title>
</head>
<body>
<table border="1" cellspacing="0">
    <tr align="center">
        <th colspan="2"></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>

    <tr align="center">
        <td rowspan="4">上午</td>
        <td>早自习</td>
        <td>英语</td>
        <td>语文</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
    </tr>
    <tr align="center">
        <td>第1节</td>
        <td>语文</td>
        <td rowspan="2">数学</td>
        <td>物理</td>
        <td>美术</td>
        <td>英语</td>
    </tr>
    <tr align="center">
        <td>第2节</td>
        <td>数学</td>
        <td>化学</td>
        <td>英语</td>
        <td rowspan="2">语文</td>
    </tr>
    <tr align="center">
        <td>第3节</td>
        <td>英语</td>
        <td>生物</td>
        <td>体育</td>
        <td>数学</td>
    </tr>
    <tr align="center">
        <td colspan="8">午休</td>
    </tr>
    <tr align="center">
        <td rowspan="4">下午</td>
    </tr>
    <tr align="center">
        <td>第4节</td>
        <td>数学</td>
        <td>英语</td>
        <td>物理</td>
        <td>体育</td>
        <td>英语</td>
    </tr>
    <tr align="center">
        <td>第5节</td>
        <td>英语</td>
        <td rowspan="2">数学</td>
        <td>美术</td>
        <td>语文</td>
        <td>地理</td>
    </tr>
    <tr align="center">
        <td>第6节</td>
        <td>化学</td>
        <td colspan="2">英语</td>
        <td>语文</td>
    </tr>
</table>
</body>
</html>

1.8 布局标签

这两个标签，一般都是和css结合到一块使用来实现页面的布局。

div标签 在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局标签</title>
</head>
<body>
<!--布局标签通常结合css使用，单独使用不会有效果-->
<div>我是div</div>
<div>我是div,我会自动换行</div>
<span>我是span</span>
<span>我是span，我不换行</span>

</body>
</html>

1.9 表单标签

1.9.1 表单标签概述

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

 form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。

 

 1.9.2 form标签属性

  • action：规定当提交表单时向何处发送表单数据，该属性值就是URL

    以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。

  • method ：规定用于发送表单数据的方式

    method取值有如下两种：

    • get：默认值。如果不设置method属性则默认就是该值

      • 请求参数会拼接在URL后边

      • url的长度有限制 4KB

    • post：

      • 浏览器会将数据放到http请求消息体中

      • 请求参数无限制的

代码演示：

由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--表单标签：主要负责数据采集功能
form:
    action:指定表单数据提交的URL
        * 表单项数据要想被提交，则必须指定其name属性
    method：指表单提交的方式
        1.get：默认值
            * 请求的参数会拼接在URL后面（浏览器地址）
            * url的长度有限制 4KB
        2.post：
            * 请求参数会在http请求协议的请求体中
            * 请求参数无限制
-->

<form action="#" method="post">
    <!--text 文本 ，   文本输入框-->
    <input type="text" name="username">
    <!--submit 提交-->
    <input type="submit">
</form>

</body>
</html>

1.10 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

  • <input>：表单项，通过type属性控制输入形式

    input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

  • <select>：定义下拉列表，<option> 定义列表项。

  • <textarea>：文本域，它可以输入多行文本，而 input 数据框只能输入一行文本。

==注意：==

  • 以上标签项的内容要想提交，必须得定义 name 属性。

  • 每一个标签都有id属性，id属性值是唯一的标识。

  • 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

代码演示：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>

<form action="#" method="get">

    <!-- text默认值，定义单行输入字段-->
    <label for="uname">用户名：</label><!--label：点击汉字，跟据id->for进入输入框-->
    <input type="text" name="username" id="uname"><br>
    <label for="upwd">密码：</label>
    <!-- password定义密码字段 -->
    <input type="password" name="password" id="upwd"><br>

    <!-- radio定义单选按钮： -->
    性别：
    <input type="radio" name="gender" value="1" id="man"> <label for="man">男</label>
    <input type="radio" name="gender" value="2" id="woman"> <label for="woman">女</label>
    <br>

    <!-- checkbox定义复选框： -->
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    <!-- file定义文件上传按钮： -->
    头像：
    <input type="file">

    <!-- hidden定义隐藏的输入字段：-->
    <input type="hidden" name="hiddenId" value="here_is_hidden">

    <br>

    <!-- select下拉列表：-->
    城市：
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    <!-- 文本域：      cols 列   rows 行      -->
    个人描述：<textarea cols="20" rows="5" name="desc"></textarea>

    <br>
    <br>
    <!-- submit定义提交按钮，提交按钮会把表单数据发送到服务器-->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">


</form>

</body>
</html>

2，CSS

2.1 概述

==CSS 是一门语言，用于控制网页表现。==我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成：

  • 结构：HTML

  • 表现：CSS

  • 行为：JavaScript

CSS也有一个专业的名字：==Cascading Style Sheet（层叠样式表）。==

如下面的代码， style 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为 红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css入门</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

<div>Hello CSS~</div>

</body>
</html>

2.2 css 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。CSS 导入 HTML有三种方式：

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对

    <div style="color: red">Hello CSS~</div>

    给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

  • 内部样式：定义<style>标签，在标签内部定义css样式

    <style type="text/css">
    div{
        color: red;
    }
</style>

    这种方式可以做到在该页面中复用。

  • 外部样式：定义link标签，引入外部的css文件

    编写一个css文件。名为：demo.css，内容如下:

    div{
    color: red;
}

    在html中引入 css 文件。

    <link rel="stylesheet"  href="demo.css">

    这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

目录结构：

代码演示：

p{
    color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
  <style>
    span{
      color: red;
    }
  </style>

  <link href="../css/demo.css" rel="stylesheet">

</head>
<body>
<!--内联样式：在标签内部使用style属性，属性值是css属性键值对  （不利于复用）-->
<div style="color: red">hello css</div>
<!--内部样式：定义<style>标签，在标签内部定义css样式  -->
<span>hello css span</span>
<!--外部样式：定义link标签，引入外部的css文件  -->
<p>hello css link</p>

</body>
</html>

2.3 css 选择器

css 选择器就是选取需设置样式的元素（标签），比如如下css代码：

div {
    color:red;
}

如上代码中的 div 就是 css 中的选择器。我们只讲下面三种选择器：

  • 元素选择器

    格式：

    元素名称{color: red;}

    例子：

    div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

  • id选择器

    格式：

    #id属性值{color: red;}

    例子：

    html代码如下：

    <div id="name">hello css2</div>

    css代码如下：

    #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/

  • 类选择器

    格式：

    .class属性值{color: red;}

    例子：

    html代码如下：

    <div class="cls">hello css3</div>

    css代码如下：

    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

代码演示：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

  <style>
    /*  1.元素选择器  写法： 元素名{color:颜色}   */
    div{
      color: red;
    }

    /*  2.id选择器  写法： #id属性名{color:颜色}   */
    #name{
      color: blue;
    }

    /*  3.类选择器  写法： .class属性名{color:red}   */
    .cls{
      color: green;
    }

  </style>
</head>
<body>

<div>div1</div>
<div id="name">div2</div><!--  id名必须唯一，不可复用！  -->
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>

别晃我的可乐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html css js 学习笔记.zip
12-30
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
HTML+CSS学习笔记
weixin_61050264的博客
09-05 761
【代码】HTML+CSS学习笔记。
【Web前端入门】HTML+CSS 万字总结——带你深入学习掌握
网页设计与制作 | HTML+CSS+JS
05-18 773
现在对HTML和CSS的基础知识做一个详细的总结，文章内容很硬核。共有3w+字总结，建议收藏反复学习！适用于初学者学习或者熟练相关操作的人复习使用。 文章目录 HTML篇 一.HTML简介 1.什么是HTML？ 2.HTML 标签 3.HTML 元素 4.HTML版本 5.Web 浏览器 6.HTML 网页结构 7.中文编码 8.编写第一个网页 二.HTML编辑器 三.HTML基础 1.HTML 标题 2.HTML 段落 3.HTML 链接 4.HTML 图像 四.HTML元素 1.
HTML 与 CSS学习笔记（全）
慢慢manman的博客
07-08 617
HTML基本标签 HTML注释和特殊符号 特殊符号 字符实体 示例 空格 &nbsp； 百度 |新浪 大于 > &gt； 如果时间>;晚上6点，就坐车回家 小于 < &lt； 如果时间
DIV+CSS学习笔记总结篇
2401_84153177的博客
04-19 690
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。]( )textarea高度自适应多行溢出省略Retina屏1px线Flexbugs其他IF IE ENDIF条件判断之IE10Chrome 翻译插件网页retina优化常用meta树状菜单em vs remcss vs jscss解决方案（w3cplus）Textures生成纹理CSSgramCsscss（检查重复声明等）附录四 部分工具资源。
是HTML+CSS的学习笔记捏
m0_74193800的博客
10-21 2062
前端开发第一周学习笔记
CSS学习笔记
weixin_47203428的博客
10-14 273
CSS学习笔记 1、什么是CSS 1.1、什么是CSS Cascading Style Sheet层叠样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 1.2、发展史 CSS1.0 CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1：浮动，定位 CSS3.0：圆角、阴影、动画…浏览器兼容性~ 1.3快速入门 <!DOCTYPE html> <html lang="en"> <he
狂神说HTML+CSS学习笔记
weixin_45145726的博客
10-30 9383
HTML笔记 1、初识HTML HyperTextMarkupLanguage（超文本标记语言） < body >、< /body>等成对的标签，分别叫做开放标签和闭合标签， 单独呈现的标签（空元素），如< hr/ >;意为用/来关闭空元素。 html注释：< !–注释内容–> <!--DOCTYPE：告诉浏览器使用什么规范（默认是html）--> <!DOCTYPE html> <!--语言 zh中文 en英
CSS学习笔记2
m0_47801930的博客
03-17 56
CSS学习笔记2 盒子阴影 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 10px solid
CSS学习小结 (1)
2301_80842161的博客
01-31 790
CSS是层叠样式表的简称，它同HTML一样，也是一种标记语言，用来描述网页的表现形式如网页元素的位置，背景，颜色，字体格式等，使网页更加美观更加漂亮，分区布局更加直观。样式通常保存在外部的.css文件中。CSS的使用可以使网页的结构（HTML）与样式（CSS）相分离。
html,css,javascript学习笔记
m0_54000719的博客
05-09 1634
学习内容： 记录一下自己学习中的问题与习题（结课考试需要） 学习时间： 有时间就会学习的 学习产出： 表单 解析：本题考察新增input类型的样式 图中给的是可选择年数、月份的日历控件，所以选择month属性； month只能选择年、周的日历控件； date提供年月日的选择或自行输入； time显示一个时间控件，，提供时间的选择或自行输入。 （做这道题时候我也不是很懂，其实是根本就没见过，作为一个知识点还可以，实际做项目应该是没啥用的，应付考试还可...........................
HTML、CSS学习笔记.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
HTML+CSS 学习笔记.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3202
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 965
iframe 预览邮件 + 打印邮件 + 模拟滚动条
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 628
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
HTML5与CSS基础学习笔记
"这是一份关于HTML5和CSS的学习笔记，包含了HTML的基本认知、标签、标签间的关系、DOCTYPE声明、字符集、常用排版标签、文本格式化标签、标签属性的使用、图像标签以及链接标签等内容，适合初学者参考学习。笔记中还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别晃我的可乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值