HTML+CSS_html鉃昪ss-CSDN博客

本文链接：https://blog.csdn.net/qq_48642210/article/details/123605667

本文详细介绍了HTML的基本概念、用途和常用标签，如结构化标签、排版标签、字体标签、加粗与斜体、标题标签、图像标签、超链接、列表、表格以及表单。此外，还探讨了CSS的作用、基础语法、引入方式，以及选择器、样式和框架的使用。HTML和CSS是构建网站前端的关键技术，用于布局、美化和交互。

摘要由CSDN通过智能技术生成

HTML

一、什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。------百度百科

归纳：

1. HTML是超文本标记语言

2. 文本:txt文本  只能用于存放文字或者是字符
3. 超文本:不仅可以用于来描述文字  还可以用于来描述图像  音频 视频 超链接
4. 标记:类似java中的关键字(给HTML中的标签一些预定义的含义)
5. 人与计算机进行交互的桥梁

二、HTML能做什么？

HTML是用于来做前端页面一个网站的主体的部分所有的网站都需要使用HTML标签来进行修饰
前端三大剑客
HTML: 是一个网站的主体部分静态的网站
CSS: 主要用于来美化网站静态的网站
JS: 动效(动画与效果) 用于前后端来进行交互

三、HTML中常用的标签

3.1 结构化标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
 
  <!-- 移动端用 -->
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

  <title>Document</title>
</head>
<body>
</body>
</html>

3.2 排版标签

1.注释 <!--注释的代码--> 快捷键 ctrl+shift+/
2.换行标签:单个标签 <br/>
3.段落标签:<p></p>
4.水平线:单个标签 <hr/>
   属性:
      width 宽度
      color 颜色
      size 粗细
      align 对齐方式 left 左 center 居中   right 右
5.注意点:
   A.color 1.颜色值可以使用颜色的单词来进行设置 red   white 2.使用颜色的十六进制来表示
   B.width 1.设置宽度可以使用百分比(不用适配)  2.设置宽度的使用像素点 px

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		黄牛<br />学生党
		<p>java</p>
		<p>PHP</p>
		<p>C++</p>
		<p>Python</p>
		<hr width="80%"  color="red" size="10" align="right"/>
	</body>
</html>

3.3 字体标签

1.标签名字 <font></font>
2.属性:
   size  字体的大小
   color 字体的颜色
   face  字体的类型
3.大字体标签 <big><big>
4.小字体标签 <small></small>
5.上标标签 <sup></sup>
6.下标标签 <sub></sub>
7.删除标签:<del></del>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font size="6" color="green" face="仿宋">今天又是帅气的一天</font>
		<big>大牛</big>
		<small>小牛</small>
		<sup>上标签</sup>
		<sub>下标签</sub>
		<del>删除</del>
	</body>
</html>

3.4 加粗与斜体

1.加粗:<b></b> <strong></strong> 
2.斜体:<em></em><i></i>

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<strong>杜兰特</strong>狂砍<em>53分</em>  <b>篮网</b><i>暴走</i>
	</body>
</html>

3.5 标题标签

1.标题标签:<h1>...</h1> <h6>...</h6>
2.特点:字体逐渐变小

3.6 图像标签

1.标签的名称 <img/> 单个标签
2.属性:
   src 表示的图片的路径
   width 图片的宽度
   height 图片的高度
   title 鼠标移入图片的提示信息
   alt 表示图片加载错误的文件提示信息

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/duola21.jpg" width="300px" 
			height="300px" title="点击我!有惊喜" 
			alt="图片加载错误的提示信息" />
	</body>
</html>

3.7 超链接

1.标签的名称:<a></a>
2.属性:
   href 表示跳转的路径 可以跳转到本地的项目  页可以跳转到第三方的其它项目
   trget 页面的打开的方式
      _blank 新建一个窗口打开页面
      _self  在当前窗口打开页面

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
		<a href="图像标签.html" target="_self">跳转到本项目</a>
	</body>
</html>

3.8 列表

3.8.1 无序列表

1.<ul><li></li><ul>
2.解释:
  <ul> 表示的是无序列表
  <li> 表示的是无序列表的每一个条目
3.属性
   type 设置列表的前缀
      circle 空心圆圈
      disc 实心圆圈
      square 实心方块

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="square">
			<li>java</li>
			<li>Python</li>
			<li>C++</li>
			<li>go</li>
		</ul>
	</body>
</html>

3.8.2 有序列表

1.<ol><li></li><ol>
2.解释:
   <ol> 表示就是有序列表
   <li> 表示的是有序列表的条目
3.属性: type  设置列表的前缀

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol type="I">
			<li>詹姆斯</li>
			<li>蔡旭坤</li>
			<li>库里</li>
		</ol>
	</body>
</html>

3.8.3 定义列表

1.标签的名称:<dl> <dt> <dd>
2.解释
   <dl> 表示的就是定义列表
   <dt> 表示的是定义列表的分类
   <dd> 表示的是定义列表分类的条目

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<dl>
			<dt>大补</dt>
			<dd>枸杞</dd>
			<dd>六味地黄丸</dd>
			<dd>海参</dd>
            
			<dt>蔬菜</dt>
			<dd>青菜</dd>
			<dd>秋葵</dd>
			<dd>西红柿</dd>
		</dl>
	</body>
</html>

3.9 表格(重点)

1.表格  行 列  表头
2.标签的名称 <table> 表格  <tr> 行 <td> 单元格  <th>表头
3.属性:

属性的名称	属性的描述
border	边框
width	宽度
align	对齐方式
bgcolor	背景的颜色
cellspacing	边框与边框之间的间距
cellpadding	边框与内容之间的j间距
colspan	跨列
rowspan	跨行

代码-01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table 
			border="1px" 
			width="80%"  
			align="center" bgcolor="#33FF33" 
			cellspacing="0px" cellpadding="0px">
			<!--第一行-->
			<tr>
				<th>编号</th>
				<th>名称</th>
				<th>爱好</th>
			</tr>
			<!--第二行-->
			<tr>
				<td align="center">1001</td>
				<td align="center">阿豪</td>
				<td align="center">御姐</td>
			</tr>
			<!--第三行-->
			<tr>
				<td align="center">1002</td>
				<td align="center">张三</td>
				<td align="center">ball</td>
			</tr>
			
		</table>
	</body>
</html>

代码-02 -跨行和跨列案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1">
			<!--第一行-->
			<tr>
				<td colspan="3">学生的成绩</td>
			</tr>
			<!--第二行-->
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>80</td>
			</tr>
			<!--第三行-->
			<tr>
				<td>数学</td>
				<td>100</td>
			</tr>
			<!--第四行-->
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>80</td>
			</tr>
			<!--第五行-->
			<tr>
				<td>数学</td>
				<td>75</td>
			</tr>
		</table>
	</body>
</html>

效果图：
在这里插入图片描述

四、form 表单(重点)

4.1 使用场景

大部分网站的注册界面以及登录
需要向服务器提供数据

4.2 作用

主要用用于来收集用户的数据将数据保存服务器中(得用户者得天下)

4.3 组成部分

1.form容器
    action 表单提交的地址
    method 提交的方式
      get 明文进行提交 数据是不安全的  提交数据是有长度限制 不能超过4kb  用于做下载
      post 密文进行提交 数据安全的    提供数据是没有长度限制  用于提交数据
   enctype 表示提交的数据的类型
      application/x-www-form-urlencoded 以普通的文本进行提交
      multipart/form-data 支持文件进行提交
2.输入框
3.提交按钮

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="index.html" method="get" enctype="multipart/form-data">
			<input type="text" name="uname" />
			<input type="submit" value="提交" />
			
		</form>
	</body>
</html>

4.4 输入框

1.不同的输入框 只需要设置不同的type属性值 
2.常见的type属性值

type属性值	type属性值的描述
text	普通的文本
password	密码框
radio	单选按钮(单选按钮name属性值都必须是一样)
checkbox	多选按钮(单选按钮name属性值都必须是一样)
number	数值框(min最小值,max最大值,step波长,value默认值)
range	滑块(min最小值,max最大值,step波长,value默认值)
file	文件
search	搜索框
color	颜色
email	邮箱
date	年月日
datetime-local	年月日时分
week	周
month	年月
submit	提交
reset	重置
button	普通的按钮与js进行搭配使用

参考连接：https://www.w3school.com.cn/

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="get">
			<p>普通文本<input type="text" /></p>
			<p>密码:<input type="password" /></p>
			<p>
				单选按钮
				<input type="radio"  name="sex"/> 男
				<input type="radio" name="sex" /> 女
				<input type="radio" name="sex" /> 泰国
			</p>
			<p>
				复选按钮
				<input type="checkbox" name="hobbey" /> 抽烟
				<input type="checkbox" name="hobbey" /> 喝酒
				<input type="checkbox" name="hobbey" /> 烫头
			</p>
			<p>
				数值框
				<input type="number" min="10" max="100" step="10" value="20" />
			</p>
			<p>
				滑块
				<input type="range" min="10" max="100" step="10" value="20"/>
			</p>
			<p>
				 文件
				<input type="file" />
			</p>
			<p>
				 搜索框:
				   <input type="search" />
			</p>
			<p>
				颜色:
				  <input type="color" />
			</p>
			<p>
				  邮箱
				<input type="email" />
			</p>
			<p>
				<input type="date" />
				<input type="datetime-local" />
				<input type="week" />
				<input type="month" />
			</p>
			<p>
				<input type="submit" value="提交" />
				<input type="reset" value="重置" />
				<input  type="button" onclick="alert('雷公子')" value="与js进行搭配使用"  />
			</p>
			
		</form>
	</body>
</html>

效果图：
在这里插入图片描述

4.5 input的属性

属性名	属性值
id	用于前端来获取这个标签
name	用于后台获取输入框中的值
placeholder	输入框中的提示信息
size	表示输入框的大小
checked	设置单选按钮与多选按钮默认选中
disabled	表示按钮禁用
value	表示输入框中的默认值

五、下拉框

1.标签:<select> <option> </option> </select>
2.解释:
   <select> 表示的是下拉框
   <option> 表示是下拉框的条目
3.属性:selected  表示默认选中的条目

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉框</title>
	</head>
	<body>
		<select>
			<option>茅台</option>
			<option>五粮液</option>
			<option>二锅头</option>
			<option selected>百年糊涂</option>
		</select>
	</body>
</html>

六、文本域

标签的名称:textarea
属性:cols 跨列 rows 跨行

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<textarea cols="100px" rows="10px">
			
		</textarea>
	</body>
</html>

七、frameset(重点)

frameset 是前端的一个框架主要是将多个界面组合成一个界面
使用frname 的src来填充界面
frameset 上下进行平分(跨行) rows 左右进行平分 clos(跨列)
注意点:
A.frameset不能与body同时存在
B.frameset是可以进行嵌套的使用

CSS

一、CSS概念和应用

1.1 css是什么

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 -------百度百科

css 是层叠样式表
主要用于来美化网站(化妆后的女朋友)
css 不仅可以修饰静态的网页还可以配合脚本来动态修饰网页中的元素

1.2 css 能做什么

css 主要用于来美化网站
使用css样式的时候 html标签与css样式进行分离有利于提高代码结构的清晰度

1.3 css基础的语法

1.css的组成部分: A.选择器 B.样式的声明
  A.选择器:就是需要修饰的标签的名称
  B.样式的声明:就是编写css样式 可以编写多个样式 也可以只写一个样式
2.例子:
   h1 { color:"red","font-size":"18px"}
3.注意点:
    A.在大括号中编写样式
    B.多组样式需要以英文的逗号进行分割
    C.属性与属性值是不区别大小写 建议使用小写 选择器是区分大小写

1.4 css引入的方式(重点)

1.4.1 行内引入

概念:行内引入直接在标签中添加样式
优点:简单方便
缺点：html代码与css样式混合代码清晰结构度比较差扩展性比较差

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<h3 style="font-size: 20px;color: red;">今天写笔记了吗</h3>
	</body>
</html>

1.4.2 内部引入

概念:在html中的头部编写样式
优点：
html代码与css样式进行了分离代码清晰度比较高
缺点：
扩展性比较差只能当前页面使用样式

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h3{
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h3>今天写笔记了</h3>
	</body>
</html>

1.4.3 外部引用

概念:外部引入:在头部head 中引入css文件下的样式文件
优点:扩展性比较强页面都可以使用其样式
缺点:样式的冲突

step01 在css文件夹下新建一个样式文件demo.css

step02 下文件中编写样式

h3{
	/*给字体加上阴影*/
	text-shadow: 5px 5px 5px #FF0000;
}

step03 创建html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部引入样式
			rel="stylesheet" 告诉浏览器以css样式进行解释  必须写上
			href  引入外部样式的地址
		-->
		<link rel="stylesheet" href="css/demo.css" />
	</head>
	<body>
		<h3>老坛酸菜牛肉面好吃吗?</h3>
	</body>
</html>

step04 外部导入

<style>
			@import url("css/demo.css");
		</style>

step05 外部引入与外部导入的区别

A. 外部引入基本上所有的浏览器都可以使用这种方式加载样式外部导入低版本的iE浏览器是不兼容的
B. 外部引入: 边加载标签边进行渲染外部导入: 先加载标签再加载样式(用户体验度差一点)

1.4.4 三种引入方式的优先级

行内样式>内部样式|外部样式  就近原则

二、 css 选择器

2.1 基本选择器(重点)

2.1.1 标签选择器

1.概念:以标签来进行命名的选择器 就是标签选择器 例如 p{} div{}  h3
2.语法：
   标签的名称 {css样式}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 div {
			 	width: 200px;
			 	height: 200px;
			 	border: solid 1px red;
			 }
		</style>
	</head>
	<body>
		<div>315发生了重大事件</div>
	</body>
</html>

2.1.2 类选择器

1.概念：以类进行命名的选择器 就是类选择器 类选择器是.开头 后面接着是选择器的名称
2.语法: .getByClass{样式} .getByDiv{样式}
3.注意点:类选择器必须在标签中进行引入才能生效

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*声明类选择器*/
			.getByClass {
				width: 200px;
				height: 200px;
				background-image: url(img/duola2.jpg);
			}
		</style>
	</head>
	<body>
		<div class="getByClass"></div>
	</body>
</html>

2.1.3 id选择器

1.概念：以id进行命名的选择器 就是id选择器 id选择器是#开头 后面接着是选择器的名称
2.语法: #getById{样式} #getByDiv{样式}
3.注意点:
   A.类选择器必须在标签中进行引入才能生效 
   B.id选择器一般是唯一

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#getById {
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="getById"></div>
	</body>
</html>

2.1.4 三种选择器优先级

id选择器 >类选择器 > 标签选择器

2.2 属性选择器

1.概念：以标签中的属性进行命名的选择器就是属性选择器
2.语法: 标签[属性名='属性值']{}  标签[属性名]{}

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type='text'] {
				color: red;
			}
			input[type='password']{
				color:yellow ;
			}
			a[href]{
				color: red;
			    text-decoration: none;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get">
			<font>用户名:</font>
			<!--只能读不能修改readonly-->
			<input type="text"  readonly value="阿豪66"/>
			<font>密码:</font>
			<input type="password" value="哈哈" />
			<a href="#">点击我 </a>
			<a href="#">点击我 </a>
			<a >点击我 </a>
		</form>
	</body>
</html>

2.3 层级选择器

1.概念：层级选择器  有上下级关系的选择器  一般是根据父级来获取子级
2.语法:  
     #id(上)  .class(下)   .class #id   标签 标签

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#tv_div .tv_class{
				color: red;
			}
			ul li {
				list-style-type: none;
				/*list-style-image: url(img/duola2.jpg);*/
			}
			.tv_class #tv_id{
				color: gold;
			}
			
		</style>
	</head>
	<body>
		<div id="tv_div">
			<div class="tv_class">Java</div>
			<div class="tv_class">C++</div>
			<div class="tv_class01">Python</div>
		</div>
		<ul>
			<li>篮球</li>
			<li>足球</li>
			<li>羽毛球</li>
		</ul>
		<div class="tv_class">
			<div id="tv_id">张三
			<span>
				<div id="tv_id">李四</div>
			</span>
			</div>
			<div id="tv_id01">王五</div>
			<div id="tv_id01">赵六</div>
		</div>
	</body>
</html>

2.4 伪劣选择器

1.a:link {} 未访问的链接状态(重点)
2.a:visited {} 已访问的链接状态
3.a:hover {} 鼠标悬停链接 状态(重点)
4.a:active{} 已选择的链接 状态

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			a:link{
				color: red;
			}
			a:visited{
				color: yellow;
			}
			a:hover{
				color: blue;
			}
			a:active{
				color:green ;
			}
			
		</style>
	</head>
	<body>
		<a href="#">你瞅啥</a>
	</body>
</html>

三、 css常用的样式(查看w3c)

3.1字体的样式

属性名	属性值
font-size	字体的大小
font-style	字体的样式
font-family	字体的类型
font-weight	字体的粗细

3.2 文本的样式

属性名	属性值
text-shadow: 2px 2px 5px red	设置文本的阴影(水平阴影,垂直阴影,模糊效果,颜色)
text-align	对齐方式
line-height	设置行高
text-decoration	设置文本的下划线
text-indent	设置文字的缩进

3.3 背景的样式

属性名	属性值
background-color	背景颜色
background-image	背景图片
background-repeat	是否平铺
background-size	设置图片的大小
background-position	设置图片的偏移