0
0

前端HTML与CSS基础

第一章**/第二章：初识HTML5**

认识了基本标签，以及标签的基本作用（以下附基本用法）

第一部分：

<hr/>

<!-- 10.18 -->

<!-- 标题标签 -->

<!-- align:属性 -->

<h1align="center">标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!-- mark:高亮 -->

<p>我是<mark>帅哥</mark></p>

<!-- 自定义标签 -->

<sb>是个</sb>

<!-- hr/:水平线标签 width:宽度 color：颜色 -->

<hr/>

<!-- 段落标签 -->

<p>这是段落标签</p>

<b>加粗</b>

<strong>加粗2</strong>

<i>倾斜</i>

<em>倾斜2</em>

<!-- 删除线 -->

<s>我没有后悔</s>

<del>你后悔了嘛</del>

<!-- 下划线 -->

<u>下划线</u>

<ins>下划线</ins>

<sup>1</sup>

<sub>2</sub>

<!-- 缩写 -->

<abbrtitle="缩写一下下">缩写</abbr><br>

<!-- 设置字体 -->

<fontcolor="blue"size="30"face="楷体">so cool</font><br>

<!-- src:路径 alt：注释 widtd：宽 height：高 -->

<imgsrc="./img/friend.jpg"alt="朋友"width="200"height="200"><br>

<!-- a:href 跳转页面  target:属性，可以设置我在新窗口打开某个网址-->

<ahref="http://www.baidu.com"target="_blank">跳转页面</a><br>

<ahref="html2.html"target="_blank">内部页面</a><br>

<!-- 音频 -->

<audiosrc="./CMJ - 所念皆星河.mp3"controls>所念皆星河</audio><br>

<videosrc="./春夏.mp4"controls></video>

第二部分：

具体内容包括：

1.标签的基本分类：

双标签也称体标签，是指由开始和结束两个标签符组成的标签。

<标签名>内容</标签名>

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

< 标签名 />

2. HTML5文档头部相关标签
<title>标签用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标签之内。 <meta />标签用于定义页面的元信息，可重复出现在<head>头部标签中。
3.标题标记

HTML提供了6个等级的标题，即

、

、

、

、

和
，从

到

标题的重要性依次递减。

4.段落标签

在网页中使用

标签来定义段落。

标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

段落文本

5.水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过

标签来定义。

6.换行标签

在word中，按【Enter】键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签
。

7.文本样式标记

8.文本格式化标签

9.mark标签

mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。

10.cite标签

cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。

11.特殊字符标签

12.图像标签

alt：图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。

Width height:用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。

Border:为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。

Vspace/hspace:HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。

Align:图像的对齐属性align。用于调整图像的位置

13.相对路径和绝对路径

绝对路径：绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

相对路径：相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

第三章初识css

**** 一.css核心基础****
1.Css样式规则

2.引入css样式表

（1）行内式：

也称内联样式，通过标签style属性设置元素样式。以下为基本语法：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

（2）内嵌式：

将css代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，基本语法如下：

<head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>

（3）链入式：

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，基本语法如下：

<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
3.Css基础选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，具体如下：

（1）标签选择器：

是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;

（2）类选择器：

使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

（3）Id选择器：使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

//标签选择器
div{
    width:300px;
    height:300px;
}

//类选择器
.p{
    width:300px;
    height:200px;
}

//id选择器
#p1{
    width:200px;
    height:200px;
}
二、文本控制标签
1、Css字体样式属性

（1）font-size设置字号

（2）font-family设置字体

（3）font-weight定义字体粗细

（4）font-style定义字体风格

（5）font综合属性用于综合设置字体样式

（6）@font-face用于定义服务器字体

（7）word-wrap用于实现长单词和url地址的自动换行

2、Css文本外观属性

（1）color

用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

div{
    color:#0000ffff;
}

（2）letter-spacing

用于定义字间距，所谓字间距就是字符与字符之间的空白. 其属性值可为不同单位的数值，允许使用负值，默认为normal。

div{
    letter-spacing:300px;
}

（3）word-spacing

用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

div{
    word-spacing:300px;
}

（4）line-height

用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

div{
    line-height:20px;
}

（5）text-align

用于设置文本内容水平对齐，相当于html中的align对齐属性其.可用属性值如下：

left：左对齐（默认值）

right：右对齐。

center：居中对齐。

div{
    text-align:center;
}

（6）text-decoration

用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

div{
    text-decoration:none;
}

（7）text-transform

用于控制英文字符的大小写。其可用属性值如下：

none：不转换（默认值）。

capitalize：首字母大写。

uppercase：全部字符转换为大写。

lowercase：全部字符转换为小写。

div{
    text-transform:none;
}

（8）text-indent

用于设置首行文本的缩进. 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

div{
    text-indent:30px;
}

（9）white-space

可设置空白符的处理方式。其属性值如下：

normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。

pre：预格式化，按文档的书写格式保留空格、空行原样显示。

nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

div{
    white-space:normal;
}

（10）text-shadow

可以为页面中的文本添加阴影效果。h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。 text-shadow: red 2px 5px 1px;

div{
    text-shadow:none;
}

（11）text-overflow

用于处理溢出的文本。

div{
    text--overflow:clip;
}

(12)word-wrap

用于实现长单词和URL地址的自动换行。属性如下：

normal：只在允许的断字点换行（浏览器保持默认处理）。

break-word：在长单词或 URL 地址内部进行换。

div{
    word-wrap:normal;
}
三、高级特性
1、Css复合选择器

（1）标签指定式选择器

又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3

//标签指定选择器
p.p1{
    font-family:楷体;
}
p#zs{
    color:#ffff0000;
}

（2）后代选择器

选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

//后代选择器
body font{
    font-famiily:楷体;
    color:#ffff0000;
}

（3）并集选择器

是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。

//并集选择器
.p1,.p2{
    color:red;
}
2、Css层叠性和继承性

（1）、层叠性：多种CSS样式的叠加。

（2）、继承性：书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

3、Css优先级

Eg.

文本的颜色

对应权重值：

p strong{ color:black} /权重为:1+1/

strong.blue{ color:green;} /权重为:1+10/

.father strong{ color:yellow} /权重为:10+1/

p.father strong{ color:orange;} /权重为:1+10+1/

p.father .blue{ color:gold;} /权重为:1+10+10/

#header strong{ color:pink;} /权重为:100+1/

#header strong.blue{ color:red;} /权重为:100+1+10/

注：在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

（1）继承样式的权重为0。

（2）行内样式优先。

（3）权重相同时，CSS遵循就近原则。

（4）CSS定义了一个!important命令，该命令被赋予最大的优先级。

//优先级 id选择器权重最高，所以只显示red颜色
p{
    color:blue;
}
.p1{
    color:green;
}
#zs{
    color:red;
}
4、属性选择器·

（1）E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。^插入符

（2）E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。

（3）E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。

// 属性选择器  ^:开头含什么的修改
p[name^=w]{
    color:red;
}

// $:结尾含什么的修改
p[name$=x]{
    color:red;
}

// *:里面含什么的全部修改
p[id*=ax]{
    color:red;
}
5、关系选择器

关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接

（1）子元素选择器：

主要用来选择某个元素的第一级子元素。

（2）相邻兄弟选择器

用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

①邻近兄弟选择器：

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

②普通兄弟选择器：

使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

// 父与子，只能拿到父元素下的第一个子元素
p>span{
    font-family:楷体;
    color:blue;
}

// 兄弟，只能拿第一个元素
p+h1{
    font-family:楷体;
    color:blue;
}

// 普通兄弟
p~span{
    font-family:楷体;
    color:blue;
}

第四章** CSS4**选择器

1.属性选择器
E[att^=value] 选择前面为att的标签的选择器

E[att$=value] 选择后面为att的标签的选择器

E[att*=value] 选择含有att的标签的选择器
2.关系选择器

子元素选择器：>

兄弟选择器：+

普通兄弟选择器：~

3.结构伪类化选择器

root选择器：对页面所以元素都生效

not选择器：排除某个元素下面的子元素结构

only-child选择器：选择某个父元素只有一个子元素的选择器

first-child选择器：选择父元素的第一个元素

last-child选择器：选择父元素的最后一个元素

not-child（n)选择器：选择某父元素下第几个子元素

not-child（n)选择器：选择某父元素下倒数第几个子元素

nth-of-type（n）选择器：选择父元素特定类型的第几个元素

nth-last-of-type（n）选择器：选择父元素特定类型的倒数第几个元素

：empty选择器：选择没有子元素或文本的元素

4.伪元素选择器

：bedore选择器：在被选元素前插入内容，必须配合content使用

：affte选择器：在被选元素后插入内容，必须配合content使用

第五章****盒子模型

1.边框

边框样式 border-style: none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线

边框宽度 border-width:

边框颜色 border-color:

圆角边框 border-radius:

图片边框 border-images：

边框综合属性 border:宽度,样式,颜色;

2.内边距

内边距 padding 四边内边距 不允许使用负值

padding-top:上边距;

padding-right:右边距;

padding-bottom:下边距;

padding-left:左边距;

3.外边距

外边距 margin 四边外边距 允许使用负值

margin-top:上外边距;

margin-right:右外边距;

margin-bottom:下外边距;

margin-left:左外边距;

4.水平居中

margin:0 auto /* 利用margin实现块元素水平居中*/

margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/

*{
    margin:0;   //清除页面内边距
    padding:0;  //清楚页面外边距
}
5.背景

背景颜色属性 background-color:

背景图片属性 background-image :

6.平铺

图像平铺属性 background-repeat

repeat 沿水平和竖直方向平铺

no-repaet 不平铺

repeat-x 只沿水平方向平铺

repeat-y 只沿竖直方向平铺

7.图像属性

图像位置属性 background-position

图像固定属性 background-attachment

Srcoll 图像随页面元素一起滚动（默认值）

Fixed 图像固定在屏幕上，不随页面元素滚动。

对背景与图片设置不透明度 rgba(r,g,b,alpha);

opacity：opacityValue;

0 完全透明

0.5 半透明

1 完全不透明

8.阴影

添加阴影效果 box-shadow属性

线性渐变效果 “background-image:linear-gradient（参数值）;”

在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。

在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。

在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。

9.块元素和行内元素

块元素

  • 在页面中以区域块的形式出现。
  • 每个块元素通常都会独自占据一整行或多整行。
  • 可以对其设置宽度、高度、对齐等属性。

行内元素

  • 不占有独立的区域。
  • 仅仅靠自身的字体大小和图像尺寸来支撑结构。
  • 一般不可以设置宽度、高度、对齐等属性。

disply-inile 块元素转换为行内元素

disply-block 行内元素转换为块元素

第六章****列表与超链接

一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用
1.无序链表tybe属性值

disc（默认值）实心圆 circle 空心圆 square 实心方块

2.有序链表相关属性

属性type

属性值 1 （项目符号显示为123…） a或A （项目符号显示为英文字母a b c d…或A B C…

） i或I (项目符号显示为罗马数字i ii iii…或I II III…)

属性 start

属性值 数字 （规定项目符号的起始值）

属性value

属性值 数字 （规定项目符号的数字）

3.自定义列表的基本语法格式

****

****标签用于指定定义列表

****

****标签用于指定术语名词

****

****标签用于对名词进行解释和描述

4.列表嵌套示例
<ul>
// 子列表项中嵌套有序列表
    <li>咖啡
        <ol>
            <li>拿铁咖啡</li>
            <li>摩卡咖啡</li>
        </ol>
    </li>
// 子列表项中嵌套无序列表
    <li>茶
        <ul>
            <li>龙井</li>
            <li>铁观音</li>
        </ul>
    </li>
</ul>
二．CSS控制列表样式
1.list-style-type属性

list-style-type属性用于控制无序和有序列表的项目符号。

2.list-style-image属性

list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。 基本格式 ul{list-style-image:url(图片路径);}

3.list-style-position属性

list-style-position属性用于控制列表项目符号的位置。

三．超链接标签
1.超链接标签

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。

2.标签实例

文本或图像

四．链接伪类控制超链接

超链接标签****的伪类含义****a:link{ CSS样式规则; }未访问时超链接的状态a:visited{ CSS样式规则; }访问后超链接的状态a:hover{ CSS样式规则; }鼠标经过、悬停时超链接的状态a:active{ CSS样式规则; }鼠标点击不动时超链接的状态

第七章****表格与表单

1.表格
<table> //定义表格
        <tr> //定义行
            <td></td> //定义单元格
        </tr>
</table>
2.表格table属性

属性

描述

常用属性值

border

设置表格的边框（默认border="0"为无边框）

像素值

cellspacing

设置单元格与单元格边框之间的空白间距

像素值（默认为2像素）

cellpadding

设置单元格内容与单元格边框之间的空白间距

像素值（默认为1像素）

width

设置表格的宽度

像素值

height

设置表格的高度

像素值

align

设置表格在网页中的水平对齐方式

left、center、right

bgcolor

设置表格的背景颜色

预定义的颜色值、十六进制#RGB、rgb(r,g,b)

background

设置表格的背景图像

url地址

3.tr标签属性


PS:

1标签无宽度属性width，其宽度取决于表格标签

。

.2. 对

标签应用valign属性，用于设置一行内容的垂直对齐方式。

  1. 虽然可以对
标签应用background属性，但是在标签中此属性兼容问题严重。
4.td标签属性

PS:

  1. 在

无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

（2）绘制单元格边框

PS:

  1. 行标签

无内边距属性padding和外边距属性margin。

  • 外边距属性margin对单元格无效，要想设置相邻单元格边框之间的距离，只能对

    • 标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。

  • 当对某一个

    		• 标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

  • 当对某一个

    		• 标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

    表格结构

    5.CSS控制表格样式

    （1）绘制表格边框

    table{
    width:280px;
    height:280px;
    border:1px solid #F00; //设置table的边框
}
td.th{
    border:1px solid #F00;  //为单元格单独设置边框
}

    PS：

    1. border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。

    2. 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。

    3. 行标签

    标签应用HTML标签属性cellspacing。

    6.表单

    表单控件

    7.input控件
    <form action="url地址" method="提交方式" name="表单名称">
<!-- autofocus获取焦点 -->    
    <input type="text">文本框
    <input type="password">密码框
    <input type="radio" name="sex">单选框
    <input type="radio" name="sex">
    <input type="checkbox">复选框
    <input type="checkbox">
    <input type="checkbox">
    <input type="button" value="普通按钮">普通按钮
    <input type="submit"><br>提交按钮
    <input type="reset"><br>重置按钮
    <input type="file"><br>选取文件
    <input type="email">邮箱
    <input type="url">网址
    <!-- placeholder提示内容 -->
    请输入电话：<input type="tel" name="telephone" placeholder="请输入11位数字">
    请输入搜索：<input type="search">
    请输入颜色：<input type="color">
    请输入数值：<input type="number" name="number1" value="0" min="1" max="20" step="4">
    请输入年份：<input type="date">

    请输入一个浏览器：<input type="text" list="wangzhi">
    <datalist id="wangzhi">
        <option value="Chrome"></option>
        <option value="Edge"></option>
        <option value="Opera"></option>
    </datalist>
    <!-- required提示未输入 -->
     姓名：<input type="text" required>
          <input type="submit">
</form>
    8.textarea控件

    <textarea name="" id="" cols="30" rows="10"></textarea>可以自行调整的框
    9.select控件

    <form action="">
    <select name="" id="">下拉菜单
        <option value="">下拉1</option>
        <option value="">下拉2</option>
         <option value="">下拉3</option>
    </select>
</form>

    第八章：****浮动

    1.什么是浮动：

    浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

    浮动的基本语法格式是：选择器{float:属性值;}

    属性有：left：元素向左浮动

    Right：元素向右浮动

    None：元素不浮动（默认值）

    2.如何清除浮动：

    基本语法格式是：选择器{clear:属性值;}

    属性有：left：不允许左侧有浮动元素（清除左侧浮动的影响）

    Right：不允许右侧有浮动元素（清除右侧浮动的影响）

    Both：同时清除左右两侧浮动的影响

    标签： html5 css
    本文转载自: https://blog.csdn.net/No_bald_head/article/details/136410961
    版权归原作者 码农将你的军 所有， 如有侵权，请联系我们删除。
    登录后发布评论

    “前端HTML与CSS基础”的评论:

    还没有评论
    关于作者
    ...
    overfit同步小助手
    文章同步
    相关阅读

    机器人技术在安全领域的重要作用

    安全学习记录——网络篇（一）

    图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

    单元测试数据库回滚问题

    这才是单元测试，之前我们都错了

    【C语言基础】：字符函数和字符串函数

    ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

    文章导航