HTML和CSS知识汇总

最新推荐文章于 2022-06-06 22:24:34 发布

Gan——God

最新推荐文章于 2022-06-06 22:24:34 发布

阅读量481

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44327380/article/details/108612857

版权

HTML和CSS知识汇总

一、HTML 简介

Hyper TextMarkupLanguage （超文本标记语言）简写：HTML HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容

1、HTML 标签介绍

1.标签的格式: <标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
  i. 分为基本属性：bgcolor="red" 可以修改简单的样式效果 
  ii. 事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
  i. 单标签格式： <标签名 />                                      
  ii. 双标签格式: <标签名> ...封装的数据...</标签名>
          
            br 表示换行           hr表示 水平线

1.2 常用标签

1.2.1 字符表，转换成字符显示在页面上

在这里插入图片描述

1.2.2 标题标签

在这里插入图片描述

1.2.3 超链接`

标签是超链接 href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面 ( 默认值 )
_blank 表示打开新页面来进行跳转


<a href="http://localhost:8080">百度</a><br/> 
<a href="http://localhost:8080" target="_self">百度_self</a><br/> 
<a href="http://localhost:8080" target="_blank">百度_blank</a><br/> </body>

1.2.4 列表标签

<ul type="none">
    <li>赵四</li> 
    <li>刘能</li>
     <li>小沈阳</li> 
     <li>宋小宝</li>
     </ul>

1.2.5 img 标签

img
标签是图片标签 , 用来显示图片 src 属性可以设置图片的路径
width 设置宽度
height 设置高度
border 设置图片边框大小
alt 属性设置当指定路径找不到图片时 , 用来代替显示的文本内容

<img src="1.jpg" width="200" height="260" border="1" alt="美女找不到"/> 
<img src="../2.jpg" width="200" height="260" />
<img src="../imgs/3.jpg" width="200" height="260" />
<img src="../imgs/4.jpg" width="200" height="260" />

1.2.6 表格标签

table 标签是表格标签
border 设置表格标签
width 设置表格宽度 height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签 th 是表头标签 td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签

跨行跨列表格
colspan 属性设置跨列 rowspan 属性设置跨行

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

<table align="center" border="1" width="300" height="300" cellspacing="0"> 
<tr> 
<th>1.1</th> 
<th>1.2</th> 
<th>1.3</th> </tr> 
<tr> 
<td>2.1</td>
<td>2.2</td>
<td>2.3</td> </tr>
<tr> 
<td>3.1</td>
<td>3.2</td> 
<td>3.3</td> </tr> 
</table>

1.2.6 表单标签

表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.
 form 标签就是表单 input type=text 是文件输入框
    value 设置默认显示内容 
    input type=password 是 密码输入框 
    value 设置默认显示内容
    input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
    input type=checkbox 是复选框 checked="checked"表示默认选中
    input type=reset 是重置按钮 value 属性修改按钮上的文本 
    input type=submit 是提交按钮 value 属性修改按钮上的文本 
    input type=button 是按钮 value 属性修改按钮上的文本 
    input type=file 是文件上传域
    input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，
    就可以使用隐藏域（提交的 时候同时发送给服务器）
select 标签是下拉列表框 option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度

form 标签是表单标签 action 属性设置提交的服务器地址 method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候，数据没有发送给服务器的三种情况： 1、表单项没有 name 属性值 2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器 3、表单项不在提交的 form 标签中
GET 请求的特点是： 1、浏览器地址栏中的地址是：action 属性[+?+请求参数] 请求参数的格式是：name=value&name=value 2、不安全 3、它有数据长度的限制
POST 请求的特点是： 1、浏览器地址栏中只有 action 属性值 2、相对于 GET 请求要安全 3、理论上没有数据长度的限

1.3.6 其他标签

div 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

div 标签 1

div 标签 2

span 标签 1 span 标签 2

p 段落标签 1

p 段落标签 2

<div>div 标签 1</div>
 <div>div 标签 2</div> 
 <span>span 标签 1</span> <span>span 标签 2</span> 
 <p>p 段落标签 1</p> <p>p 段落标签 2</p>

二、CSS 技术介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
在这里插入图片描述

1、CSS 和 HTML 的结合方式

1.1 第一种

在标签的 style 属性上设置”key:valuevalue;”，修改标签样式。

<div style="border: 1px solid red;">div 标签 1</div>
<div style="border: 1px solid red;">div 标签 2</div> 
<span style="border: 1px solid red;">span 标签 1</span> 
<span style="border: 1px solid red;">span 标签 2</span>

1.2 第二种

在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

<head>
 <style type="text/css"> /* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/ 
 div{ border: 1px solid red; } 
 span{ border: 1px solid red; } </style> 
 </head>
<body> <div>div 标签 1</div> 
<div>div 标签 2</div>
<span>span 标签 1</span> 
<span>span 标签 2</span>

1.3 第三种

把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
使用 html 的标签导入 css 样式文件。

1、css 文件内容：
div{ border: 1px solid yellow; } 
span{ border: 1px solid red; }

html 文件代码

<!DOCTYPE html> <html lang="en"> 
<head> <meta charset="UTF-8"> 
<title>Title</title> <!--link 标签专门用来引入 css 样式代码--> 
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body> 
<div>div 标签 1</div> 
<div>div 标签 2</div>
<span>span 标签 1</span> 
<span>span 标签 2</span> 
</body> 
</html>

2、CSS 选择器

2.1 标签名选择器

标签名选择器的格式是： 
标签名{ 
                 属性：值;
        }
标签名选择器，可以决定哪些标签被动的使用这个样式。

div{ border: 1px solid yellow; 
     color: blue; 
     font-size: 30px; } 
span{ border: 5px dashed blue;
      color: yellow; 
      font-size: 20px; }

2.2 id 选择器

id 选择器的格式是： 
#id 属性值{ 
                   属性：值;
          }
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

#id002{ color: red; font-size: 20px; border: 5px blue dotted ; 


<div id="id002">div 标签 1</div>

2.3 class 选择器（类选择器）

class 类型选择器的格式是： 
.class 属性值{ 
            	属性：值; 
                     }
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

.class02{ color: blue; font-size: 30px; border: 1px solid yellow; }
<div class="class02">div 标签 class01</div> 
<div class="class02">div 标签</div> 
<span class="class02">span 标签 class01</span>

2.4 组合选择器

组合选择器的格式是： 选择器 1，选择器 2，选择器 n{ 属性：值; }
组合选择器可以让多个选择器共用同一个 css 样式代码

<style type="text/css"> 
div,.class01 , #id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style>
<div id="id01">div 标签 class01</div> <br /> 
<span >span 标签</span> <br /> 
<div>div 标签</div> <br /> 
<div>div 标签 id01</div> <br />

总结

html和css是前端知识的基础知识，通过上面的总结可以帮助我们更好的制作网页。

Gan——God

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS知识汇总

前端知识总结提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前端知识总结一、HTML 简介1 HTML 标签介绍1.2 常用标签1.2.1 字符表，转换成字符显示在页面上1.2.2 标题标签二、使用步骤1.引入库2.读入数据总结一、HTML 简介Hyper TextMarkupLanguage （超文本标记语言）简写：HTML HTML
复制链接

扫一扫