HTML&CSS学习笔记

于 2023-05-31 11:19:06 发布
阅读量331 收藏 3
点赞数
文章标签： css html 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63310011/article/details/130829306
版权

HTML

一、基础标签

标签含义
h1~h6定义标题
font定义文本字体，尺寸，颜色
b粗体
i斜体
u下划线
center文本居中
p段落
br换行
hr分割线

html 颜色表示：

  1. 英文单词：red,pink,blue…
  2. rgb(值1，值2，值3)：值的取值范围：0~255 rgb(255,0)
  3. #值1值2值3：值的范围：00~FF

二、图片音频视频

1.资源路径

（1）绝对路径：完整路径
（2）相对路径：相对位置关系
				xxx/web/02-图片音频视频.html
                xxx/web/桌面1.jpg

                ./桌面1.jpg     或者     桌面1.jpg
                -----------------------------------

                xxx/web/02-图片音频视频.html
                xxx/web/imag/桌面1.jpg

                ./img/桌面1.jpg
                ------------------------------------

                xxx/web/02-图片音频视频.html
                xxx/imag/桌面1.jpg

                ../img/桌面1.jpg

2.尺寸单位

  • px：像素
  • 百分比：

三、超链接标签

通过a标签定义

<a href="url">Link text</a>

注：

  • href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL
  • target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）

四、列表标签

有序标签

<ol>
   <li>咖啡</li>
   <li>牛奶</li>
   <li>面包</li>
</ol>

无序列表

<ul>
       <li>咖啡</li>
       <li>牛奶</li>
       <li>面包</li>
 </ul>

五、表格标签

表格描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格的表头。
<tr>定义表格的行。
<td>定义表格单元。
<thead>定义表格的页眉。
<tbody>定义表格的主体。
<tfoot>定义表格的页脚。
<col>定义用于表格列的属性。
<colgroup>定义表格列的组。
  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

六、表单标签

form:

（1）action:指定表单数据提交的URL

表单项数据要想被提交，则指定其name属性

（2）method:指定表单提交的方式

1.get:默认值
  • 请求参数会拼接在URL后面
  • URL的长度有限制 4KB
2.post
  • 请求参数会在http请求协议的请求体中
  • 请求参数无限制

CSS

一、CSS 选择器

1.元素选择器

根据元素名称来选择 HTML 元素

p {
  text-align: center;
  color: red;
}

2.id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

#para1 {
  text-align: center;
  color: red;
}

注：id 名称不能以数字开头。

3.类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

.center {
  text-align: center;
  color: red;
}

注：类名不能以数字开头！

<p class="center large">这个段落引用两个类。</p>

4.通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  text-align: center;
  color: blue;
}

5.分组选择器
选取所有具有相同样式定义的 HTML 元素。

二、CSS 使用

1.外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用

外部样式在 HTML 页面 head 部分内的 link 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

“mystyle.css”

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

2.内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的

内部样式在 HTML 页面的 部分内的 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3.行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

行内样式在相关元素的 “style” 属性中定义：

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

4.多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

5.层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

三、CSS 背景

1.CSS 背景属性

背景属性含义
background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

2.背景图像

body {
  background-image: url("paper.gif");
}
（1）背景重复
在水平方向重复
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
在垂直方向重复
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}
不重复
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}
（2）背景图位置
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
（3）背景图附着

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

3.背景简写

（1）样例
body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写为：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}
（2）属性值顺序
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

四、CSS 边框

1.边框属性

属性作用
border属性允许您指定元素边框的样式、宽度和颜色
border属性允许您指定元素边框的样式、宽度和颜色。
border-style属性指定要显示的边框类型。
border-width属性指定四个边框的宽度。
border-color属性用于设置四个边框的颜色。
border-radius属性用于向元素添加圆角边框：

2.边框样式

border-style 属性指定要显示的边框类型。

属性值作用
dotted定义点线边框
dashed定义虚线边框
solid定义实线边框
double定义双边框
groove定义 3D 坡口边框。效果取决于 border-color 值
ridge定义 3D 脊线边框。效果取决于 border-color 值
inset定义 3D inset 边框。效果取决于 border-color 值
outset定义 3D outset 边框。效果取决于 border-color 值
none定义无边框
hidden定义隐藏边框
（1）边框宽度

border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}
（2）特定边的宽度

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}
（3）边框颜色

border-color 属性用于设置四个边框的颜色。

设置颜色的方法
  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • transparent
（4）边框各边

指定每个边框（顶部、右侧、底部和左侧）

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

不同的边框样式

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

3.圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

4.简写边框属性

border 属性是以下各个边框属性的简写属性：

  • border-width
  • border-style（必需）
  • border-color
p {
  border: 5px solid red;
}

为某一个边指定边框属性
左：

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

下：

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

五、外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

1.单独的边

（1）属性名
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
（2）属性值
  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

注：允许负值。

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

2.简写属性

margin 属性是以下各外边距属性的简写属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
margin: 25px 50px 75px 100px;
  • 上外边距是 25px
  • 右外边距是 50px
  • 下外边距是 75px
  • 左外边距是 100px
auto 值

将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
inherit 值

使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

3.外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

六、padding内边距

定义元素边框与元素内容之间的空间，即上下左右的内边距。

1.单边内边距

指定不同的侧面不同的内边距：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

2.简写属性

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

  padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

  padding:25px 50px;

上下填充为25px
左右填充为50px

 padding:25px;

所有的填充都是25px

七、分组和嵌套

1.分组选择器

在样式表中有很多具有相同样式的元素。

h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}

对以上代码使用分组选择器：

h1,h2,p
{
    color:green;
}

2.嵌套选择器

用于选择器内部的选择器的样式

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

八、尺寸

控制元素的高度和宽度，增加行间距

属性描述
height设置元素的高度。
line-height设置行高。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

九、Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1.隐藏元素

display:none或visibility:hidden
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间

h1.hidden {display:none;}

2.块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

  • <h1>
  • <p>
  • <div>
    内联元素只需要必要的宽度，不强制换行。
  • <span>
  • <a>

3.改变一个元素显示

把列表项显示为内联元素：

li {display:inline;}

把span元素作为块元素：

span {display:block;}

十、Position(定位)

position 属性指定了元素的定位类型。

1.static 定位

默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

2.fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

3.relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

移动相对定位元素，但它原本所占的空间不会改变。

h2.pos_top
{
    position:relative;
    top:-50px;
}

4.absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

4.sticky 定位

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

十一、Overflow

控制内容溢出元素框时在对应的元素区间内添加滚动条。

属性值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

注：

  • overflow 属性只工作于指定高度的块元素上。
  • 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

十二、Float

使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

1、彼此相邻的浮动元素

几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

2、清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

3、浮动属性

属性描述属性值
clear指定不允许元素周围有浮动元素left ,right ,both ,none ,inherit
float指定一个盒子（元素）是否可以浮动left ,right ,none ,inherit

十三、水平 & 垂直对齐

1、元素居中对齐

要水平居中对齐一个元素(如

), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

注意:
如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

2、文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

3、图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

4、左右对齐 - 使用定位方式

使用 position: absolute; 属性来对齐元素:

注释：
绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示:
当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是

）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

5、左右对齐 - 使用 float 方式

对 <body> 元素的外边距和内边距进行预定义可以避免在不同的浏览器中出现可见的差异

注意：
如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

6、垂直居中对齐 - 使用 padding

头部顶部使用 padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

7、垂直居中 - 使用 line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

8、垂直居中 - 使用 position 和 transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

十四、组合选择符

组合选择符说明了两个选择器之间的关系。

1、选择符四种组合方式:

  • 后代选择器(以空格 分隔)
  • 子元素选择器(以大于 > 号分隔）
  • 相邻兄弟选择器（以加号 + 分隔）
  • 普通兄弟选择器（以波浪号 ～ 分隔）

2、后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
  background-color:yellow;
}

3、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了

元素中所有直接子元素 <p> ： 

div>p
{
  background-color:yellow;
}

4、相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}

5、后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
  background-color:yellow;
}

6、伪类选择器

元素:状态{}

a:link{
    color: brown;
}
状态描述
link初始状态
visited被访问过
actice正在访问
hover鼠标悬浮

十五、文本

1、换行规则

word-break 属性指定换行规则。

p.test1 {
  word-break: keep-all;	/* 此行将连字符打断 */
}

p.test2 {
  word-break: break-all;	/* 这些行将在任何字符处中断 */
}

2、书写模式

writing-mode 属性规定文本行是水平放置还是垂直放置。

p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}
属性描述
text-align-last指定如何对齐文本的最后一行。
text-justify指定对齐的文本应如何对齐和间隔。
text-overflow指定应如何向用户呈现未显示的溢出内容。
word-break指定非 CJK 脚本的换行规则。
word-wrap允许长单词被打断并换到下一行。
writing-mode指定文本行是水平放置还是垂直放置。

3、过渡

CSS 允许平滑地改变属性

如需创建过渡效果，必须明确两件事：

  • 要添加效果的 CSS 属性
  • 效果的持续时间

注：
如果未规定持续时间部分，则过渡不会有效果，因为默认值为 0。

下面的例子展示了 100px * 100px 的红色 < div> 元素。 < div> 元素还为 width 属性指定了过渡效果，持续时间为 2 秒：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

当指定的 CSS 属性（width）值发生变化时，将开始过渡效果。

现在，为 width 属性指定一个鼠标悬停在 < div> 元素上时的新值：

div:hover {
  width: 300px;
}

4、指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

属性值描述
ease规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear规定从开始到结束具有相同速度的过渡效果
ease-in规定缓慢开始的过渡效果
ease-out规定缓慢结束的过渡效果
ease-in-out规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n)允许您在三次贝塞尔函数中定义自己的值
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

5、延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

在启动之前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

过渡 + 转换

div {
  transition: width 2s, height 2s, transform 2s;
}
属性描述
transition简写属性，用于将四个过渡属性设置为单一属性
transition-delay规定过渡效果的延迟（以秒计）
transition-duration规定过渡效果要持续多少秒或毫秒
transition-property规定过渡效果所针对的 CSS 属性的名称
transition-timing-function规定过渡效果的速度曲线
葳蕤之森
关注
HTML+CSS 笔记
Angletank的博客
08-28 491
HTML+CSS 笔记 HTML（超文本标记语言） 可以显示除文字以外的内容元素，图片、链接、音乐、视频等。 1 基础语法 1.1标签 1.1.1单标签 <br/><hr/> 1.1.2单标签属性 <hr width="800" /> 1.1.3双标签 … 1.1.4双标签属性 <body bgcolor="red">…</body> <font size="7"></font> 2 整体结构 通常⼀个HTML⽹
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 7709
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
HTML/CSS 学习笔记（整理）
deideidei13的博客
03-03 2042
&lt;html&gt; &lt;head&gt; &lt;title&gt;网页标题&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;元数据标签（编码格式，关键字和内容描述） &lt;/head&gt; &lt...
HTML+CSS学习笔记
mingshengda的博客
02-24 349
一、什么是HTML Hyper Text Markup Language 超文本标记语言 运行在浏览器上。 超文本：超级文本，如流媒体，声音，视频，图片等。标记语言：这种语言是由大量的标签组成。 任何一个标签都有开始标签和结束标签，例如： <标签>：开始标签 </标签>：结束标签 HTML严格意义上说只能是一种规范，一种浏览器上的规范，标签语言不能被称为编程语言，因为HTML没有变量，数据类型，控制语句等。 web:网站开发。 第一个程序： <!--这是注释--> &
HTML+CSS 学习笔记
Norman Mises 的学习笔记
07-25 8938
HTML+CSS学习笔记
HeadFirst HTML&CSS学习笔记.zip
最新发布
12-29
CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记Head...
Head First HTML&CSS 学习笔记.zip
12-29
CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS ...
HTML&CSS自学笔记大全
04-09
HTML和CSS是构建网页的基础，它们分别负责网页的结构和表现。HTML（HyperText Markup Language）是超文本标记语言，它的主要任务是描述网页的结构，就像人体的骨架一样，为网页提供基本框架。HTML使用一系列标签来...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
html和css学习笔记
03-16
作为html 和css 学习笔记 和 复习大纲
HTML和CSS笔记
小凯的博客
09-14 1059
前端复习查找笔记
HTML+CSS 笔记整理
m0_57185539的博客
03-03 910
目录 前言 一、HTML基础 1 HTML概念 2 HTML语法 3 HTML标签 4 HTML表格 5 HTML表单 二、CSS基础 1.CSS汉译: 2.CSS语法： 3.CSS样式表 4.css选择器 5.CSS文本属性 6 列表相关属性 7 边框的相关属性 8.引入背景图片:background-image:url(); 9.浮动详解 10 元素类型 11 元素定位+锚点 12 图片整合 13 宽高自适应 14 块级格式化上下文 (Block F...
HTML与CSS笔记
qq_31240423的博客
01-29 866
HTML与CSS笔记 一、HTML： vscode快捷键： tab：补全标签 ctrl+/：快速注释 常用标签： <h1、h2……h6：六级标题 <p：段落 <strong：粗体 <em：斜体 &nbsp：空格 <br：换行（自闭合） <hr：水平线（自闭合） <a：超链接 target：打开方式（_blank：以一个新窗口打开） herf 邮件：在herf中写mailto：XXXXXXXXXqq.com（功能性链接） title属性：鼠标悬停时
CSS基础（CSS知识点总结）
发光吖的博客
04-07 1582
CSS核心为网页添加样式术语解释选择器声明块CSS代码书写的位置为什么推荐使用外部样式表？常见的样式属性选择器简单选择器选择器的组合选择器的并列层叠1.比较重要性2.比较特殊性3.比较源次序应用继承属性值的计算过程 为网页添加样式 术语解释 h1{ color:red; background-color: lightblue; text-align: center; } ...
HTML+CSS学习笔记一
Jym94
12-29 315
在html中，用作短文本的引用，作为长文本的引用。在添加在引用的文本两段后，文本显示时会自动加上双引号。则会起到缩进的效果。 标签的作用是分行。标签是一个空标签，空标签只需要写一个开始标签，不需要结束标签。ps:在html代码中输入回车、空格都是没有作用的。
HTML+CSS学习笔记 (四)
T_hikHome的博客
08-24 407
认识CSSCSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 例如：<style type="text/css"> p{ font-size:20px;/*设置文字字号*/ color:orange;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*
HTML&CSS笔记（1）
qiaomm的个人博客
06-24 212
前端基础（只是简单了解一下，有个印象即可）： 1、软件架构： 一，C/S（客户/服务器） ①一般我们使用的软件都是C/S架构，比如系统中的软件QQ，360，office等 ②C代表客户端，用户通过客户端使用软件 ③S代表服务器，服务器负责处理软件的业务逻辑 特点:不能跨平台（系统）使用 二，（B/S浏览器/服务器）（学习这个） ①B/S本质上也是C/S，只不过B/S架构的软件，使用浏览器作为软件的...
CodeAcademy HTML&CSS学习笔记：基础与样式指南
在CodeAcademy的学习笔记中，主要关注了HTML和CSS的基础概念与语法。HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言，它通过一系列预定义的标签来组织网页内容和结构。以下是一些关键知识点： ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值