devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一文掌握HTML和CSS（详解）_掌握html和css语言。

作者：喵喵爱编程 | 2024-07-26 16:06:38

赞

踩

掌握html和css语言。

 

还是老套路：理论+实践

一、介绍什么是html

html（超文本标记语言）：是编写网页内容的一种语言。

超文本有两层含义：
（1）就是超越文本限制的内容，如图片，声音，视频等。
（2）就是超链接文本，从一个网页跳转到另一个网页。

二、html的基本结构

 

  1. <!DOCTYPE html>              # 文档声明，用来声明当前页面的html版本。目前这个是html 5
  2. <html lang="en">             # 网页的开始标签
  3. <head>                       #头部分，用于设置网页标题、编码格式和导入css和js文件
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>                       
  9. <body>                       # 网页中显示的内容在这个标签中编写
  10.     
  11. </body>
  12. </html>
  13.  
  14.  
  15.
  1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
  2. <html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。
  3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
  4. <body>...</body>标签是编写网页上显示的内容。

注：在新建一个html文件后，html文件中默认是什么也没有的，按！+ enter 可以自动打印出HTML网页的基本结构。

三、常用的html标签

  1.     <body>
  2.         <!-- 1.单个出现的标签 -->
  3.  
  4.         <br> 换行
  5.         <img src="images/pic.png" alt="图片">
  6.         <hr> 打印一条横线
  7.  
  8.         <!-- 2.成对出现的标签 -->
  9.  
  10.         <h1>这是一个h1标题的标签</h1>
  11.         <div>这是一个div标签，代表一个区块</div>
  12.         <p>这是一个段落标签，代表新的段落</p>
  13.  
  14.         <!-- 3.标签的嵌套 -->
  15.  
  16.         <div>
  17.             <img src="images/pic1.png" alt="">
  18.             <a href="http://www.csdn.com">CSDN网站</a>
  19.  
  20.         </div>
  21.  
  22.     </body>

说明：

1.标签一般不区分大小写，但是推荐使用小写。

2.根据标签的形式可以分为：单标签（空标签）和双标签（闭合标签)。

3.咱们学习html语言其实就是学习各种标签的用法，常用的标签有20多个。

4.单标签没有标签内容，双标签可以嵌套和承载其他文本内容。

5.关于导入文件时候的绝对路径和相对路径，建议使用相对路径。

 

五、列表标签、表格标签、表单标签

 

1. 列表标签

（1）.列表标签分为两种：

  • 无序列表标签（ul标签）
  • 有序列表标签（ol标签）

（2）无序列表标签

  1. ​
  2. <!-- ul标签定义无序列表 -->
  3. <ul>
  4.     <!-- li标签定义列表项目 -->
  5.     <li>列表标题一</li>
  6.     <li>列表标题二</li>
  7.     <li>列表标题三</li>
  8. </ul>
  9.  
  10. ​

（3）有序列表标签

  1. <!-- ol标签定义有序列表 -->
  2. <ol>
  3.     <!-- li标签定义列表项目 -->
  4.     <li><a href="#">列表标题一</a></li>
  5.     <li><a href="#">列表标题二</a></li>
  6.     <li><a href="#">列表标题三</a></li>
  7. </ol>

 

2. 表格标签

（1）表格标签

  1. <table>                  # 表示一个表格
  2.     <tr>                 # 表示表格中的一行
  3.         <th>姓名</th>    # 表示表格中的表头1
  4.         <th>年龄</th>    
  5.     </tr>                # 一行结束
  6.     <tr>                 # 下一行   
  7.         <td>张三</td>    # 表示表格中的一列，也就是内容
  8.         <td>18</td> 
  9.     </tr>
  10. </table>                 # 表格结束

 

3. 表单标签

（1）表单：可以把用户输入的数据一起提交给Web服务器，平时我们在网页中写的注册和登录界面都是表单

（2）表单标签的介绍：

  1. <form>标签 表示表单标签，定义整体的表单区域

  2. <label>标签 表示表单元素的文字标注标签，定义文字标注

  3. <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

    • type属性
      • type="text" 定义单行文本输入框
      • type="password" 定义密码输入框
      • type="radio" 定义单选框
      • type="checkbox" 定义复选框
      • type="file" 定义上传文件
      • type="submit" 定义提交按钮
      • type="reset" 定义重置按钮
      • type="button" 定义一个普通按钮

  4. <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

  5. <select>标签 表示表单元素的下拉列表标签 定义下拉列表

            <option>标签 与<select>标签配合，定义下拉列表中的选项

（3）表单的使用：

  1. <body>
  2.     <form action=""></form>
  3.         
  4.         <label for="">用户名:</label>
  5.         <input type="text" name="username" id="">
  6.         <br>
  7.  
  8.         <label for="">密码:</label>
  9.         <input type="password" name="pwd">
  10.         <br>
  11.  
  12.         <label for="">性别:</label>
  13.         <input name="gender" type="radio" value="man">男
  14.         <input name="gender" type="radio" value="woman">女
  15.         <input name="gender" type="radio" value="mimi">保密
  16.         <br>
  17.  
  18.         <label for="">家庭住址:</label>
  19.         <input type="checkbox" name="address" value="fux">阜新
  20.         <input type="checkbox" name="address" value="beij">北京
  21.         <input type="checkbox" name="address" value="qigd">青岛
  22.         <br>
  23.  
  24.         <label for="">一寸照片</label>
  25.         <input type="file" name="image">
  26.         <br>
  27.  
  28.         <label for="">个人介绍:</label>
  29.         <textarea name="js" id="" cols="30" rows="10"></textarea>
  30.         <br>
  31.  
  32.         <label for="">爱好</label>
  33.         <select name="like" id="">
  34.             <option value="yundong">跑步</option>
  35.             <option value="read">读书</option>
  36.             <option value="playball">打球</option>
  37.  
  38.         </select>
  39.         <br>
  40.  
  41.         <input type="submit" name="tijiao">
  42.         <input type="reset" name="chongzhi">
  43.         <button>一个普通按钮</button>
  44.         
  45.  
  46.  
  47.     </form>

 

六、表单的提交

1. 表单属性的设置

     <form>表单标签

  • action属性：用于设置表单数据的提交地址（服务器地址）
  • method属性：用于设置表单提交数据的方式，一般有GET方式和POST两种方式

2. 表单元素属性设置

  • name属性：用于设置表单元素的名称，该名称是提交数据时的参数名
  • value属性：用于设置表单元素的值，该值是提交数据时参数名所对应的值

3. 表单提交的使用：（只是在 form标签中增加了action属性和method方法。

  1.  <form action="http://192.168.1.52:9999/" method="GET">
  2.         
  3.         <label for="">用户名:</label>
  4.         <input type="text" name="username" id="">
  5.         <br>
  6.  
  7.         <label for="">密码:</label>
  8.         <input type="password" name="pwd">
  9.         <br>
  10.  
  11.         <label for="">性别:</label>
  12.         <input name="gender" type="radio" value="man">男
  13.         <input name="gender" type="radio" value="woman">女
  14.         <input name="gender" type="radio" value="mimi">保密
  15.         <br>
  16.  
  17.         <label for="">家庭住址:</label>
  18.         <input type="checkbox" name="address" value="fux">阜新
  19.         <input type="checkbox" name="address" value="beij">北京
  20.         <input type="checkbox" name="address" value="qigd">青岛
  21.         <br>
  22.  
  23.         <label for="">一寸照片</label>
  24.         <input type="file" name="image">
  25.         <br>
  26.  
  27.         <label for="">个人介绍:</label>
  28.         <textarea name="js" id="" cols="30" rows="10"></textarea>
  29.         <br>
  30.  
  31.         <label for="">爱好</label>
  32.         <select name="like" id="">
  33.             <option value="yundong">跑步</option>
  34.             <option value="read">读书</option>
  35.             <option value="playball">打球</option>
  36.  
  37.         </select>
  38.         <br>
  39.  
  40.         <input type="submit" name="tijiao">
  41.         <input type="reset" name="chongzhi">
  42.         <button>一个普通按钮</button>

 

七、CSS

 

1 . 定义

CSS（层叠样式表）：用来美化网页和控制页面布局的一种语言。

2. CSS的基本用法

选择器{

样式规则

}

选择器：就是用来查找标签的，查找到标签然后对标签加设置好的样式。

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

css示例代码：

 

  1. div{
  2.     width:10px;            # 设置宽度
  3.     height:20px;           # 设置高度
  4.     font-size:18px;        # 设置文字大小
  5.     color:blue;            # 设置文字颜色
  6.     background:gold;       # 设置背景颜色
  7. }

3. CSS的引入方式

  • 行内式
  • 内嵌式
  • 外链式

（1）行内式：就是直接在某个标签中的style属性中添加css样式

示例代码：

<div style="width:66px; height:66px; background:red ">hello world</div>

说明：其实这种方式很少使用，它的有点是方便直观，但是不能重复使用

（2）内嵌式：就是在<head>标签中加入<style>标签，在其中编写代码，这种方式的应用范围更广一些

示例代码：

  1.    <!-- 内嵌式 -->
  2.     <style>
  3.         div{
  4.             width: 500px;
  5.             height:100px;
  6.             background:fuchsia;
  7.             
  8.         }    
  9.     
  10.     </style>

说明：这种方式在同一个html页面中方便复用和后期更改，但是在多个页面之间的重用性并不高。

（3）外链式：就是将css的代码单独放在一个.css文件中，使用的时候在<head>标签中使用<link>命令导入过来

示例代码:

首先创建一个.css文件，在其中使用选择器{样式规则}创建好一个css样式，然后通过以下方式在<head>标签中导入

  1.  
  2.     <!-- 外链式 -->
  3.     <link rel="stylesheet" href="./my.css">

说明：这种外链式使css和html分离，便于规划和管理，可重复利用效率高。这种方式经常使用

 

4. CSS选择器

（1）CSS选择器的定义

           CSS选择器是用来查找选择标签的，然后对查找出来的标签进行加提前设置好的样式

（2）CSS选择器的种类

  • 标签选择器
  • 类选择器
  • 伪类选择器
  • 层级选择器
  • id选择器
  • 组选择器

接下来我们来分别讲解一下各个选择器：

（3）标签选择器的使用

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码：

  1. <style type="text/css">
  2.     p{
  3.         font-size:10px;
  4.         color: red;
  5.     }
  6. </style>
  7.  
  8. <div>hello world</div>
  9. <p>hello 123 world </p>

说明：因为选择器名字为标签p，所以只会对<p>标签中的hello 123 world内容加样式，而<div>中的内容不会变

（4）类选择器的使用

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码：

  1. <style type="text/css">
  2.     .blue{color:blue}
  3.     .big{font-size:20px}
  4.     .box{width:100px;height:100px;background:gold} 
  5. </style>
  6.  
  7. <div class="blue">这是一个div区块</div>
  8. <h3 class="blue big box">这是一个h3标题</h3>
  9. <p class="blue box">这是一个段落</p>

说明：首先定义了三个类选择器，然后在各个标签中加上了属性class，所以在<div>标签中只会加上.blue类的样式，在<h3>标签中会有.blue .big .box 三个类的样式，在<p>标签中会有.blue .box类中的样式。

 

（5）伪类选择器的使用

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码：

  1. <style type="text/css">
  2.     .box1{width:100px;height:100px;background:gold;}
  3.     .box1:hover{width:300px;}
  4. </style>
  5.  
  6. <div class="box1">这是第一个div</div>

说明：这种方式多用于与用户交互的时候使用，首先类选择器将<div>标签中的内容加了样式，而设置伪类选择器之后会将<div>标签中的内容进行交互，即当用户将鼠标放在“这是第一个”文字上的时候，会显示出伪类选择器设定的样式。鼠标不放上面的时候只会显示类选择器的样式。

 

（6）层级选择器（后代选择器）的使用

根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码：

  1. <style type="text/css">
  2.     div p{
  3.         color: red;
  4.     }
  5.     
  6. </style>
  7.  
  8. <div>
  9.     <p>hello</p>
  10.     <span> 这是其他的hello </span>
  11. </div>
  12.  
  13.     
  14. <p>这是另一个hello</p>

说明：结果会将hello变为字体为红色，而嵌套在<div>标签中的其他标签不会发生改变。结果是：hello变为红色。其他不变。

注意：这个层级关系不一定是父子，也有可能是祖孙关系。就是说只要是有层级关系就适用于这个层级选择器。

 

（7）id选择器的使用

根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

示例代码：

  1. <style type="text/css">
  2.     #box{color:red} 
  3. </style>
  4.  
  5. <p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
  6. <p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
  7. <p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

说明：会将<p>标签中设置id="box"的这个标签内容改为红色，其他标签均不变。

注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。

（8）组选择器的使用

根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。

示例代码：

  1. <style type="text/css">
  2.     .box1,.box2,.box3{width:100px;height:100px}
  3.     .box1{background:red}
  4.     .box2{background:pink}
  5.     .box2{background:gold}
  6. </style>
  7.  
  8. <div class="box1">这是第一个div</div>
  9. <div class="box2">这是第二个div</div>
  10. <div class="box3">这是第三个div</div>

说明：最开始是分别将box1，box2，box3类分别设置了各自的样式，然后通过组选择器，将box1，box2，box3共同设置了相同的样式。

八、CSS属性介绍

之前使用了那么多css的属性，肯定有很多小伙伴还是有一点蒙的状态，不过不要紧，接下来我把CSS的属性归类介绍给大家。（其实不要看着很多，理解了英文单词的含义和略有变动的格式，还是很好记的）

1. 布局常用样式属性

  • width 设置元素(标签)的宽度，如：width:100px;
  • height 设置元素(标签)的高度，如：height:200px;
  • background 设置元素背景色或者背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。
  • border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
  • 以上也可以拆分成四个边的写法，分别设置四个边的：
  • border-top 设置顶边边框，如：border-top:10px solid red;
  • border-left 设置左边边框，如：border-left:10px solid blue;
  • border-right 设置右边边框，如：border-right:10px solid green;
  • border-bottom 设置底边边框，如：border-bottom:10px solid pink;
  • padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
  • margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。

 2. 文本常用样式属性

  • color 设置文字的颜色，如： color:red;
  • font-size 设置文字的大小，如：font-size:12px;
  • font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

说明：

  • 设置不同的样式属性会呈现不同网页的显示效果
  • 样式属性的表现形式是: 属性名:属性值;

 

九、盒子模型

1. 什么是盒子模型呢？

所谓的盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，矩形盒子由内容（content）、内边距（padding)、边框（border）、外边距（margin）四个部分组成。

2. 盒子模型的示意图如下：

3. 盒子模型的相关样式属性

  • 盒子中内容的宽度(width)，不是盒子的宽度奥！！
  • 盒子中内容的高度(height)，不是盒子的高度奥！！
  • 盒子的边框（border）就是挨着内容的边框的厚度
  • 盒子内的内容和边框之间的间距（padding）
  • 盒子与盒子之间的间距（margin）

4. 属性的使用：

（1）设置盒子的宽高，指的是盒子内容的宽高。   

  1.    width:500px;
  2.  
  3.    height:500px;

（2）设置边框（上边框）

   

  border-top:5px solid red;

说明:

其中10px表示线框的粗细；solid表示线性；red表示边框的颜色

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句： border:5px solid red;

（3）设置內间距       

  1. padding-top:15px;   /* 设置顶部內间距为15px */
  2.  
  3.        padding-left:10px;   /* 设置左边內间距为10px */
  4.        padding-right:20px;  /* 设置右边內间距为20px */
  5.  
  6.        padding-bottom:30px; /* 设置底部內间距为15px */

上面的设置可以简写如下：

  1. padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
  2. 四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

  1. padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
  2. padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
  3. padding：20px; /* 设置四边内边距为20px */

 

（5）设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

 

盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

 

 

 

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号