HTML&CSS

最新推荐文章于 2024-12-10 16:54:57 发布

原创最新推荐文章于 2024-12-10 16:54:57 发布 · 161 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

部署运行你感兴趣的模型镜像

HTML入门

网页的构成HTML：通常用来定义网页内容的含义和基本结构。
CSS：通常用来描述网页的表现与展示效果。
JavaScript：通常用来执行网页的功能与行为

HTML的组成

HTML页面由一系列的元素（elements）组成，而元素是使用标签创建的。

标签
一对标签（ tags）可以设置一段文字样式，添加一张图片或者添加超链接等等。

例如：<h1> 今天是个好日子</h1>

属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中，加入属性。通常以名称=值成对的形式出现，比如：name=‘value’。

例如：<h1 align="center">今天是个好日子!!!</h1>

总结

HTML是一种标记语言，用来组织页面，使用元素和属性
元素的主要部分
1.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
2.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
3.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
4.内容（Content）：元素的内容，本例中就是所输入的文本本身。
5.属性（Attribute）：标签的附加信息。

基本语法

注释

   <!-- <p>我在注释内！</p> -->

块级元素
独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如
< p > < hr > < li > * < div > **等。
行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如
< b >，< a >，< i >，< span > 等。
2.div 和 span
< div >是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素
< span >是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素

注意：div和span在页面布局中有重要作用。

属性

标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。

属性名：同一个标签中，属性名不得重复。
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
引号：双引号是最常用的，不过使用单引号也没有问题。
常用属性：

特殊字符

在这里插入图片描述
中文空格 & emsp;

举例

在这里插入图片描述
1.div的class值

<style>   
 div { border: 1px solid blue;}
 </style>
 
 <div >left</div>
 <div >center</div>
 <div>right</div>

2.浮动

float：none；不浮动
float：left；左浮动
float：right；右浮动
<!-- 清除浮动 -->
clear：both；清除两侧浮动，
此元素不再收浮动元素布局影响。

设置背景

背景色:background-color: black;
背景图:background-image: url("../img/bg.png");

<!--//  文档声明-->
<!DOCTYPE html>
<!--//  根标签-->
<!--这里可以换成 "zh" 代表中文格式-->
<html lang="en">
<!--在这个标签里可以设置-->
<head>
    <meta charset="UTF-8">
    <title>csdn</title>
    <!-- 在head里头写css文件的路径-->
    <link rel="stylesheet" href="denglucss.css">
    <!--或者在head里全套style标签 然后在style里写 -->
    <style>

/*       1. 标签名{*/
/*            属性名:属性值;*/
/*        }*/
/*       */

/*       2. 标签名{*/
/*            属性名1:属性值1;*/
/*            属性名2:属性值2;*/
/*            属性名3:属性值3;*/
/*        */
            div {
                width: 60%;
                /*外间距*/
                margin: auto;

            }
/*       3.   标签名{*/
/*            属性名:属性值1 属性值2 属性值3;*/
/*        } */
/*        */
            div {
                border: 1px solid blue;
            }
        /* 这里与下面body标签中的  <div class="left">left</div>  class属性相对应 */
        .left {
            /*在这里设置body中特有div标签的属性*/
            background: red;
            line-height: 30px;
        }

    </style>
</head>
<body>
        <p>  文本标签 </p>
        <h1> 标题标签 </h1> <!-- 分6级,h1~h6 -->
        <ul> 无序列表</ul>
        <ol> 有序列表</ol>
        <li> 列表里的条目 </li>
        <i>斜体标签</i>  &  <em>斜体标签</em>
        <strong>加粗文本</strong>  &  <b>加粗文本</b>
        <!--文字标签 size color-->
        <font color="red" size="50px"></font>
        <!--标签嵌套-->
        <div><hr><em><font color="gray" size="2">哈哈哈</font></em></div>

        <div class="left">left</div>
        <!--src后代表着 图片的路径   alt 代表如果访问不到图片显示的内容-->
        <img src="img1/logo.png" alt="你所选图片已不存在">
        <!--超链接  href 后代表链接地址-->
        <a href="#">啊哈哈</a>
</body>
</html>

CSS

概述

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS）

简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

**选择器：**指定将要添加样式的 HTML元素的方式。可以使用标签名，class值，id值等多种方式。

声明：形式为属性(property):值(value)，用于设置特定元素的属性信息。

属性：指示文体特征，例如 font-size，width，background-color。

值：每个指定的属性都有一个值，该值指示您如何更改这些样式。

定义

定义 : 层叠（级联）样式表 cascading style sheet

组成：选择器（selector），样式 style

引入方式

内联样式 : <标签 style=“样式:值;”> 优先级最高
内部样式 :<style> 选择器 { 样式:值; } </style>
外部样式 :
<link rel="stylesheet" href="css文件的路径">

选择器 (*)

#id值 - 某一个元素时（优先级最高）
.class值 - 某一类元素时
标签名 - 某一种标签，都会应用相同的样式（优先级最低）

在这里插入图片描述

1.元素选择器

页面元素
<div>
 <ul> 
   <li>List item 1</li> 
   <li>List item 2</li> 
   <li>List item 3</li> 
 </ul> 
 
 <ol>   
 <li>List item 1</li> 
 <li>List item 2</li> 
 <li>List item 3</li>
 </ol>
 
 </div>

选择器：
选择所有li标签,背景变成蓝色
li{   
background-color: aqua;
}

2.类选择器

在这里插入图片描述

3.ID选择器

在这里插入图片描述
选择器

#two{  
     background-color: aqua;
}

组合选择器

页面元素：
<div> 
  <ul class="l1">   
       <li>List item 1</li>    
       <li>List item 2</li>    
       <li>List item 3</li>    
  <ul class="l2">     
      <li id="four">List item 1</li>
      <li id="five">List item 2</li>
      <li id="six">List item 3</li>   
     </ul>  
     </ul>
    </div>
    1）后代选择器选择器：
    .l1 li{  
     background-color: aqua;
     }
    2）子级选择器选择器：
    .l1 > li{   
    background-color: aqua;
    }
   3）同级选择器选择器：
   .l1 ~ li{   
   background-color: aqua;
   }
  4）相邻选择器选择器：
   .l1 + li{  
    background-color: aqua;
    }

小总结:

凡是class属性就要 " . 属性 + 标签 "
使用ID 就得用" # + id "
标签就直接写

语义化标签

在这里插入图片描述

常见样式属性

在这里插入图片描述

Table标签

在这里插入图片描述
ps : tr > td

tr*3>th*5   + table键
快捷方式创建3行5列的表格

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

HTML&CSS

HTML入门

基本语法

注释

标签

空元素

嵌套元素

块级和行内

属性

特殊字符

举例

设置背景

CSS

概述

定义

引入方式

选择器 (*)

1.元素选择器

2.类选择器

3.ID选择器

组合选择器

语义化标签

常见样式属性

Table标签