HTML和CSS

最新推荐文章于 2024-05-18 12:54:30 发布

逍遥呢

最新推荐文章于 2024-05-18 12:54:30 发布

阅读量198

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_61657501/article/details/130045233

版权

本文介绍了HTML5的基本结构、常用标签如标题、段落、图像和超链接，以及表单元素。此外，还讲解了CSS3的样式表优势、基本语法、选择器和一些高级特性如伪类选择器、文本样式。内容涵盖了网页布局、样式控制和媒体处理。

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

一. HTML5

1.HTML5概念及发展历史

HTML（Hyper Text Markerup Language）超文本<strong>标记</strong>语言，特点是通过“<>”的形式，将标签包围起来，可以设置对应属性，形成在页面中的结构部分。

HTML从最早1993-6发布第一个版本，在1999-12-24年发布了HTML4.01版本，随着互联网及移动应用的快速发展，在2013-5-6发布了HTML5的版本，新增了部分面向移动终端的特性。

2. HTML基本结构

<!DOCTYPE >
<html>
    <head>
        <title>页面标题</title>
        <meta charset="UTF-8" />
        <meta name="keywords" content="关键词" />
        <meta name="description" content="" />
    </head>
    <body>
        该部分主要完成页面显示功能,包括块级标签以及行级标签
    </body>
</html>

3.常用块级及行级标签

3.1 h1标题标签

标题标签从h1~h6，如果超出范围，浏览器会按默认形式显示内容。该标签的特征，可以进行标签字体的缩放以及标签的加粗显示效果，一般可以作为命名布局来使用。

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

3.2 段落标签

表示一个页面中的段落标记，会在上下产生间距。

<p>…</p>

3.3 换行标签

<br/>

br标签显示的效果与段落不同，该标记一般放在一个段落中作为内容间换行使用，因此不会产生上下的间距。

3.4 水平线标签

从浏览器的左侧贯穿到右侧的一条灰色水平线

<hr/>

3.5 字体样式

strong: 代表加粗显示 em:代表斜体显示

加粗：<strong>…</strong>
斜体：<em>…</em>

在html4中，包括i代表斜体，b代表加粗，在HTML5中已经不建议使用这两种标签。

3.6 图像与超链接

img:是image的简写，其中包含src(source)图片路径，alt代表当图片无法显示的提示内容，title鼠标悬停时显示的提示内容，width图片的宽度，height图片的高度，默认的单位都是px像素
```
<img src="path" alt="text" title="text"  width="x"  height="y" />
```
src的选项包括：
- 绝对路径（不建议）
  
  通过计算机的本地资源加载文件，例如c:\xxxx\xxx.jpg，如果图片或者是盘符发生了变化，就会导致图片无法加载。
  
  通过网络的形式加载图片，又可能发生的情况是网络地址变化，或者是网站维护删除了图片，都会导致图片加载失败。
- 相对路径
  
  从当前的文件作为相对参照物找到对应路径的位置，一般都没有盘符，直接通过文件夹的方式进行映射，如果是上层目录，可以使用"…/"返回到上一级目录。
a:超链接标签主要依靠与href(hyper refrence)属性实现超链接功能，如果没有添加href属性，最终显示的效果就是一个普通文本，target属性代表要打开的页面形式。
- target：
  
  _self:代表从当前的标签页打开
  
  _blank:代表从一个新的标签中打开
  
  name: 使用iframe的名字打开对应的页面
```
<a href="path" target="目标窗口位置">链接文本或图像</a>
```
- 普通超链接
- 锚链接
  
  快速定位到当前页面中或者是其他页面中的某个定位点，该定位点即为锚点。
```
<a href="页面名称#锚点名称">锚点跳转</a>

<a name="锚点名称">
	内容
</a>
```
- 功能性链接
  
  融合了系统调用的功能，比如下面的代码能够实现邮件的发送
```
<a href="mailto:xxxx@163.com">联系站长</a>
```

4. 列表

无序列表(unorder list) ul

适用于整体页面顺序排版、菜单的功能设计。

li:代表一个list item项
```
<ul>
    <li>...</li>
</ul>
```
- type:
  - disc:飞盘
  - squire:方块
  - circle:圆形
  - none:没有标记
type属性已经被废弃了，所以在开发中不要使用。
有序列表(order list) ol

特别适合于顺序导航、考试试卷、选择项等。
```
<ol>
    <li>...</li>
</ol>
```
- type:
  - A
  - a
  - I
  - i
  - 1(默认)
定义列表(defined list) dl

适合于一些解释性的场景。

对定义的内容进行解释，所以呈现的效果更加适合一些商品详情、论文设计、电子文稿等方面布局。
```
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>
```

5. 表单

表单是作为客户端与服务器端交互的重要一种组件，其中包含了大量的表单元素

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NGNMZwX-1681034312016)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230324144116194.png)]$

5.1 文本框

<input type="text" name="username" id="username" required placeholder="请输入用户名" autocomplete="off" />

5.2 密码框

<input type="password" name="password" id="password" required placeholder="请输入密码" />

5.3 复选框

弹琴<input type="checkbox" name="instr" value="playpiano" />
吹牛<input type="checkbox" name="instr" value="chuiniu" checked />
篮球<input type="checkbox" name="instr" value="basketball" />

复选框：可以同时选中多个选项，但是选项要按组进行设置。同一组的name必须保持一致，表现值一般都是文本，真实值需要按照实际的需求进行设置。

5.4 单选框

男孩 <input type="radio" name="gender" value="boy" />
女孩 <input type="radio" name="gender" value="girl" />

单选框：同时只能多选其一，name也必须保持一致，如果出现不一致情况，那么所有的单选框都可以被选中。

5.5 按钮

5.5.1 重置按钮

重置按钮要求放在表单中，可以将表单的元素内容恢复到初始化状态。

<input type="reset" value="重置" />

5.5.2 提交按钮

提交按钮也要放到表单中，可以将表单中的元素数据提交给服务器

<input type="submit" value="提交">

5.5.3 图片按钮

替代提交按钮，使用图片的方式显示。

<input type="image" src="img/button.jpeg" />

5.5.4 普通按钮

该按钮默认情况下没有任何的交互机制，需要结合JS实现动态交互功能

<input type="button" value="这是一个按钮" onclick="show()" />

5.6 文件域

文件上传的组件。

<input type="file" name="pic" />

当使用文件域时，由于文件可能会由音频、视频、动画等方式组成，所以在设置文件域时，需要设置提交的方式为post，还需要设置提交的内容为form-data.

<form action="index.jsp" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" />
</form>

5.7 文本域

一个多行的文本框，能够通过cols设置宽度，通过rows设置高度。

<textarea cols="200" rows="20">
				购买协议：如果从本店购买的商品出现任何的质量问题，一概不换、不退，就这样，咋滴吧！！！
</textarea>

5.8 表单高级操作

5.8.1 隐藏域

当我们需要将数据传输给服务器，但是又不想让用户看到，此时可以使用隐藏域

<input type="hidden" name="" value="必须有值" />

5.8.2 只读

如果在文本框上设置只读，就只能够看到对应的内容，而无法更新修改。

<input type="text" readonly />

5.8.3 禁用

如果在某个元素上添加禁用属性，会导致该元素无法使用。

<input type="text" disabled />

5.8.4 标注

能够快速的通过标签定位到所对应的表单元素上，形成焦点。

<label for="username">用户名</label>
<input type="text" id="username" />

for属性和id的属性必须对正！

6. 媒体

6.1 音频

<audio src="音频路径" autoplay  controls />

src对应音频的相对路径

autoplay:自动播放

controls:控制组件

6.2 视频

<video src="" autoplay controls />

7. 内联框架

<iframe src="默认的页面地址" frameborder="0" scorlling="0" width="宽度" height=“高度" name="名字" />
                                                                          
 <div class="left" style="width: 20%;float:left;margin-left: 20px;">
	<ul>
		<li><a href="audio.html" target="showframe">百度</a></li>
		<li><a href="table.html" target="showframe">搜狐</a></li>
		<li><a href="表格.html" target="showframe">163</a></li>
	</ul>
 </div>
<div class="right" style="width: 70%;float:left">
<iframe name="showframe" src="audio.html" frameborder="0" scrolling="yes" width="100%" height="500px"></iframe>
</div>

内联框架适合于后台的管理系统布局。

8. HTML5新增布局

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JUgyMeIq-1681034312016)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230324171041623.png)]$

二. CSS3

1. CSS

级联样式表(Cascading Style Sheet),表现HTML或XHTML文件样式的计算机语言。包括对文本、字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

1.1 CSS样式的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

2. CSS基本语法

选择器 {
    声明
    属性名: 属性值 ;
}

CSS的最后一条的声明是可以被省略的，但是按W3C的标准约定，建议最后一条也要加上;

2.1 HTML中CSS的引用方式

行内样式

在html的标签中，添加“style”关键词，直接在标签中定义CSS样式。
```
<h1 style="color:red">
    
</h1>
```
优点：在小范围内可以单独设置一些样式。

缺点：难以维护。
内部样式

在当前页面中，定义<style type=“text/css”>,在内部编写CSS代码。
```
<head>
    <style type="text/css">
    	css代码
    </style>
</head>
```
优点: 方便在同页面中修改样式

缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
外部样式

单独的建立一个样式文件(.css)，放置在css文件夹当中。
- 链接式(重点)
  
  使用HTML标签导入css文件。
```
<link href="style.css" rel="stylesheet" type="text/css" />
```
- 导入式(了解)
  
  通过@importcss的指令导入。
```
<head>
……
<style type="text/css">

</style>
</head>
```
- 链接式与导入式的区别
  - 标签属于XHTML，@import是属于CSS2.1
  - 使用链接的CSS文件先加载到网页当中，再进行编译显示
  - 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
  - @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
- CSS样式应用优先级
  - 行内样式>内部样式表>外部样式表
  - 就近原则

3. 基本选择器

3.1 id选择器

在选择器的前面添加一个**“#”,在使用时，通过标签中"id"**属性进行引用。在同一个页面中，id只能出现一次，作为标识使用，所以应用的面不广，一般都是作为块级布局元素使用。

#div1 { font-size:16px;}

<div id="div1"></div>

3.2 类选择器

在选择器的前面添加一个**“.”,在使用时，通过标签中"class"**属性进行引用。最大的优势可以复用，所以在日常操作中应用的最多。

.div1 { font-size:16px;}

<div class="div1"></div>

3.3 标签选择器

利用HTML中的标签作为选择器的名称，特点是一旦选择，所有页面中的相同标签都会被应用相同的效果。

div{

}

<div>
    
</div>

3.4全局选择器

能够将全部的元素统一设置为一种格式

*{

}

4.高级选择器

4.1层次选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2a0jBFz-1681034312017)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329175718011.png)]$

/*后代选择器*/
div p{
}
/*子选择器*/
div>p{
}
/*相邻选择器*/
div+div{
}
/*通用兄弟选择器*/
div~p{
}

4.2结构伪类选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3HqFSgeY-1681034312018)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329180004243.png)]$

nth-of-child: 在父级里从一个元素开始查找，不分类型

nth-of-type:在父级元素先看类型，再看位置

/*寻找第一个子元素是li的选中，如果第一个元素非li，就不会选中该元素，下面即使出现了li也不会再选
中。*/
ul li:first-child{
}
/*寻找最后一个子元素是li的选中，如果最后一个元素非li，就不会选中该元素，上面即使出现了li也不会
再选中。*/
ul li:last-child{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-child(2) {
}
/*找到第一个匹配的元素,先看元素的类型，再确定位置*/
ul li:first-of-type{
}
ul li:last-of-type{
}
/*找到某个对应的索引li,可以使用odd【奇数】以及even【偶数】进行设置，实现隔行的设置需求*/
ul li:nth-of-type(n) {
}
nth-of-child: 在父级里从一个元素开始查找，不分类型
nth-of-type:在父级元素先看类型，再看位置

4.3属性选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qv76ZfJe-1681034312018)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329180101676.png)]$

/*在标签中必须包含某个属性*/
input[type]{
}
/*在标签中必须包含某个属性，且某个属性值必须是与条件相等的*/
input[type='button']{
}
/*在标签中必须包含某个属性，且以某个条件作为起始*/
input[type^='b'] {
}
/*在标签中必须包含某个属性，且以某个条件作为结束*/
a[href$='cn']{
}
/*在标签中必须包含某个属性对应的部分内容匹配*/
a[href*='baidu']{
}

5.字体与文本样式

5.1字体样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CI9eZNnO-1681034312019)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329180341635.png)]$

5.2文本样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnSJcAMH-1681034312019)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329180407162.png)]$

text-align: left right center justify(两端对齐)

line-height: 行高，当一个元素高度与行高一致时，就会实现垂直居中

text-decoration: overline(上划线) line-through(中划线删除线)

5.3文本阴影

可以让文本出现阴影的特殊效果

text-shadow: 颜色 x轴 y轴 模糊
p{
/*颜色 x轴 y轴 模糊半径*/
text-shadow: rgba(0,0,0,0.3) 3px 3px 3px;
}

6.超链接伪类

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5iGsv7ub-1681034312020)(C:\Users\xizo\Desktop\MarkDown学习\image-20230329180844940.png)]$

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*没有访问时的样式*/
a:link{
color: gray;
text-decoration: none;
}
/*已经访问过的颜色*/
a:visited{
color: gray;
}
/*鼠标悬停时效果*/
a:hover{
color: red ;
}
/*鼠标激活时效果*/
a:active{
color: blue ;
font-size: 10em;
}
</style>
</head>
<body>
<a href="hello.html">helloworld</a>
</body>
</html>

7.列表样式

7.1 list-style-type

设置列表的样式类型，代表更改列表前面的原始样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdTZumRQ-1681034312020)(C:\Users\xizo\AppData\Roaming\Typora\typora-user-images\image-20230406212454794.png)]$

7.2 list-stype-image

设置列表的标识值，将标识值更改为图片样式

7.3 list-style-position

设置列表的标识值显示位置，有俩个可选值

inside： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fnziamRK-1681034312020)(C:\Users\xizo\AppData\Roaming\Typora\typora-user-images\image-20230406213052655.png)]$
outside：

7.4list-style

简写方式，能够同时设置以上的选项内容，通常情况下都是采用none

li{
    list-style:none;
}

8.背景样式

背景样式是在背景颜色之上，能够修饰页面的某个模块的内容，还可以编写文本

8.1 background-color

背景颜色

background-color:yellow;

8.2 background-image

背景图片

{
    background-image:url("相对位置")，url()
    background-image:linear-gradient(方向to xxx ,颜色1，颜色1，...颜色n)    
}

8.3 background-repeat

背景重复形式

repeat：沿水平和垂直俩个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
```
{
    background-repeat:no-repeat;
}
```

8.4 background-position

背景定位

在这里插入图片描述

应用像素的方式实现位移效果比较常用

x轴：正数向右移动
y轴：正数向下移动

{
    background:url("") 50px 30px;
}

8.5 background-size

设置背景大小样式

{
    background-size:auto;
}

9.盒子模型

在网页当中，所有的标记（markup）都可以看作是一个个的盒子，通过盒子可以很方便实现定位

在这里插入图片描述

9.1宽度

通过width可以设置盒子的宽度

{
    width: 1200px | 100%
}

9.2高度

通过height可以设置盒子的高度

高度无法设置百分比显示形式

{
    height:1200px;
}

9.3外边距（margin）

俩个盒子的距离就是外边距

{
    margin-top:0px;  /*上边距*/
    margin-bottom:0px;  /*下边距*/
    margin-left:0px;  /*左边距*/
    margin-right:0px;  /*右边距*/
    margin: 0px; /*全部的位置设置统一效果*/
    margin: 0px 0px ; /*左右和上下单独设置*/
    margin :3px 5px 7px; /*上和左右以及下分别设置*/
}
/* 在页面中，对拥有固定宽度的块级元素设置"margin:0px auto",可以实现元素的居中显示 */

9.4内边距（padding）

盒子和内容之间的距离就是内边距

内边距可能会修改盒子自身的大小

{
padding-top: 0px; /*上边距*/
padding-right: 0px; /*右边距*/
padding-bottom: 0px;/*下边距*/
padding-left: 0px;/*左边距*/
padding: 0px /*全部的位置设置统一效果*/
padding: 0px 0px ; /*左右和上下单独设置*/
padding :3px 5px 7px; /*上和左右以及下分别设置*/
}

9.5 content

盒子中的内容（块级，行级，块级行级元素）

9.6 border(盒子的边框)

border-color
border-width
border-style:
- none：没有边框
- dashed：虚线
- solid：实线
- dotted：点线
- double：双实线

9.7 box-sizing

在css中，有俩盒子的显示形式，一种标准文档模式盒子，还有一种IE盒子（怪异盒模型）

怪异盒模型(border-box)：将border、padding、margin再融合content形成一体的大小，可以保持外层盒子总大小不变。
标准盒模型(content-box)：使用content内容部分+内边距 + 外边距 + border宽度是最终的盒子的大小。有可能导致盒子模型的宽度和高度发生变化。