HTML、 CSS复习笔记

最新推荐文章于 2022-08-16 22:09:38 发布
最新推荐文章于 2022-08-16 22:09:38 发布
阅读量358 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34230513/article/details/79582875
版权

虽然想从事后端开发，但项目中也涉及到前端知识，有些知识点很少用需经常查询，遂将其做个总结。

html文件基本结构

<html>
    <head>...</head>
    <body>...</body>
</html>

1. <html></html>称为根标签，所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>


<!--注释文字 -->

<em>需要强调的文本</em>  

<strong>需要强调的文本</strong>

<em>的内容在浏览中显示为斜体，<strong>显示为加粗

使用<span>标签为文字设置单独样式

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

<ul type="类型样式"> <li></li>  <li></li></ul>

<ul type="序号类型"> <li></li> <li></li></ul>


创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

 

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

caption标签，为表格添加标题和摘要


<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

在新建浏览器窗口中打开链接

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

<a href="目标网址" target="_blank">click here!</a

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。


<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中


<select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>

    </select>

1、value：

2、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

下拉列表也可以进行多选操作，在<select>标签中设置 multiple="multiple" 属性，就可以实现多选功能


form表单中的label标签

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。

<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>


css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

CSS注释代码

就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)。

<style type="text/css">
p{
   font-size:12px;/*设置文字字号为12px*/
   color:red;/*设置文字颜色为红色*/
}

</style>

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签中

<p style="color:red;font-size:12px">这里文字是红色。</p>


嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。

<style type="text/css">
span{
color:red;
}
</style>


外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet" type="text/css" />

这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器

p{font-size:12px;line-height:1.6em;}

类选择器

.类选器名称{css样式代码;}

ID选择器

#setGreen{
   color:green;
}

类和ID选择器的区别

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>


还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。


包含(后代)选择器

.first  span{color:red;}

个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器

* {color:red;}


伪类选择符

给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}


分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}


继承

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。


p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决


css样式为网页中的文字设置字体、字号、颜色等样式属性

字体

body{font-family:"宋体";}

字号、颜色

body{font-size:12px;color:#666}

粗体、斜体、下划线、删除线

p span{font-weight:bold;}

p a{font-style:italic;}
p a{text-decoration:underline;}
.oldPrice{text-decoration:line-through;}


段落排版--缩进

p{text-indent:2em;}

段落排版--行间距（行高）

p{line-height:2em;}

段落排版--中文字间距、字母间距

h1{
    letter-spacing:50px;
}


为块状元素中的文本、图片设置居中样式

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>


块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。


内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。


内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

提示：下一小节是用视频动画来讲解css中的盒模型。


盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式，可以分开写：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。


2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。


3、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用象素（px）。

盒模型--边框（二）

为 p 标签单独设置下边框，而其它三边都不设置边框样式

p{border-bottom:1px solid red;}

盒模型--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

盒模型--填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。

div{padding:20px 10px 15px 30px;}
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

盒模型--边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}


CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)

3、层模型（Layer）

流动模型（一）

流动布局模型具有2个比较典型的特征：

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

流动模型（二）

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行

浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

当然你也可以同时设置两个元素右浮动也可以实现一行显示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}


如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

层模型--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果如下：


层模型--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

效果如下：


层模型--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>


Relative与Absolute组合使用

小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。


字体缩写

网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

这么多行的代码其实可以缩写为一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

只是有字号、行间距、中文字体、英文字体设置。

水平居中设置-行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>


水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}</style>

水平居中总结-不定宽块状元素方法（一）

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

这一小节我们来讲一下第一种方法：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代码：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

水平居中总结-不定宽块状元素方法（二）

除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

水平居中总结-不定宽块状元素方法（三）

除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想 ul层的 父层（即下面例子中的 div层）中间有条平分线将 ul层的 父层（ div层）平均分为两份， ul层的css代码是将 ul层的最左端与 ul层的 父层（ div层）的平分线对齐；而 li层的css代码则是将 li层的平分线与 ul层的最左端（也是 div层的平分线）对齐，从而实现 li层的居中。

 

代码如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。



沉梦昂志1024
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css知识点复习
beeliang
04-12 318
html和css基础
HTML+CSS基础复习
pigofzhou的博客
03-16 425
重新温故了一遍慕课网的HTML+CSS基础课程，总结了以下知识点：web前端开发基础技术：HTML、CSS、JavaScript语言HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，包含文字、图片、视频等。CSS样式是表现。比如标题字体、颜色变化、为标题加入背景图片、边框等等。JavaScript是用来实现网页上的特效效果。如鼠标滑过弹出下拉菜单，滑过表格的背景颜色变化，...
html，css复习
m0_58847961的博客
05-08 285
一.HTML新增 语义化标签，例如header，footer，section，article等 新增媒体元素，audio、video 用于绘画的canvas属性 新增本地存储方式：sessionStorage、localStorage 新的技术：webworker、websocket 新增的表单控件：calendar、date、time、email、url、search 二、进制 三、编码 四、盒模型（行内元素） 五、盒模型（块元素） 1、标准盒模型 设置的宽高为内
html+css简单复习
weixin_45131334的博客
09-14 232
文章目录前言一、HTML二、CSS 前言 学习地址：https://www.bilibili.com/video/BV1ZE411c7yM?p=30 一、HTML HTML：标签语言。 常用的标签：标题标签h1-h6/段落标签p/div/ul>li/ol>li/a/表单标签(form input) ， 自定义标签 二、CSS Css：决定样式，重叠样式表 标签的大小 (外边距 margin/ 内边距 padding/ 边框 border /内容的宽 width 高 height) 盒子模
复习HTML+CSS（5）
weixin_30381317的博客
04-12 65
n <meta>标记 <meta>的主要作用，是提供网页的源信息。比如：指定网页的搜索关键字 <meta>标记有两个属性：http-equiv和name。 1、 http-equiv属性 功能：模拟http协议文件头信息，当信息从服务器端传到客户端时，告诉浏览器如何正确的显示网页内容。 http-equiv属性一般要与...
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
HTML&CSS的思维导图笔记
04-12
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发...对于前端开发者来说，熟练掌握HTML和CSS是必不可少的技能，而思维导图是一种高效的学习和复习方法，可以帮助整理知识结构，加深记忆。
html、CSS、JavaScript
09-13
通过复习这些笔记，你可以加深理解，检查自己在某个知识点上的掌握程度，同时也可以发现可能的盲点，进行查漏补缺。 在实际工作中，前端开发者需要不断跟进最新的技术趋势，例如响应式设计、Web组件、Service ...
HTML+CSS详细笔记
06-14
自己在学习HTML的时候随笔记的笔记，用于以后复习用，现在可以跟大家共享了！
个人学习+复习笔记之Html5篇
最新发布
07-08
前端知识巩固篇，前段时间做了一个短学期项目，发现前端知识都忘光了，于是就奋笔疾书开始复习前端知识，今天从html5开始，我也将自己的html5复习笔记与大家分享，希望对大家有帮助。之后我也已经放出普通的文章版与...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1147
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
Html，CSS知识复习汇总
敦煌壁画的博客
03-07 197
Html，CSS知识复习汇总 1.html是网页内容的展示，比如文字，图片，视频，音频等等 2.css是网页内容的装饰，比如让文字的大小和字体更漂亮，设置图片和视频的位置等等 3.html是超文本标记语言，css是层叠样式表 4.网页文件的后缀名为 .html 5.在vscode中按！+tab可以添加网页模板 6.作用是声明文档类型，版本声明 7.是网页中最大的标签，即双标签，根标签 8.通常放一些附加信息，说明性信息 9.当前网页所有的html结构都放在这里面 10.单标签，通常meta里会写一些页面附
HTML及CSS常用知识点复习
申小兮和林小兮的博客宝
08-16 577
HTML和CSS：常用标签及对应的属性，常用易忘易错的样式属性，常用的样式设置，原神官网部分界面效果代码例子
HTML与CSS|前端快速复习（一）
m0_43391490的博客
03-08 470
HTML/CSS模块复习 html语义化理解 语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 举例：段落用 p，边栏用 aside，主要内容用 main 标签。 好处： 便于开发者阅读和维护 有利于SEO：让浏览器的爬虫和辅助技术更好的解析 注意了解一下SEO：搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。 ...
html+css复习笔记
yunCrime的博客
06-02 2300
注：非h5和c3笔记，此复习笔记参考W3Cschool，用来整理知识点简介html：超文本标记语言html标签：多为成对出现，成对出现都为一个开始标签一个结束标签;结束标签比开始标签多一个“/”用以区分&lt;html&gt;&lt;/html&gt;html文档：即通常说的网页，浏览器的作用就是将html文档转化为可视化的页面工具：Visual Studio Code + FireFox语法 1...
前端基础HTML+CSS+JS（期末复习用）
老马非马的博客
06-03 6879
前端技术：1、HTML/H5 认识并熟悉一些常用的标签  1)网页结构  2)图img、文p pre h1-h6 font(h5过时)、视频 &lt;video&gt; 、音频 &lt;audio&gt;   3）表格  4）表单/表单属性（特别常用）     input  ----text、password、radio、checkbox、button、reset、submit、file、hidd...
HTML、CSS、JavaScript复习总结
trytrylmt的博客
02-25 762
一、相关概念 HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种 使用display属性能够将三者任意转换 块状元素自动换行 转换方法(1)display:inline;转换为行内元素(2)display:block;转换为块状元素(3)display:inline-block;转换为行内块状元素 二、行内元素 (一).相关概念 行内元素最常使用的就是span，其他的只在特...
HTML、CSS复习
qq_61872431的博客
07-31 375
inputtype="text/password/submit/reset/radio/checkbox"value="确定/重置"name="名称"/>em1em----一个字符2em-----两个字符（自动适应用户所使用的字体大小）background-repeatrepeat/repeat-x/repeat-y/no-repeat(一张大图)border（-top\-left\-bottom\-right）(有方向)...
Html5+CSS3复习笔记
qq_44279495的博客
08-07 620
Html5+CSS3 第一天 语义化标签、音视频标签属性、CSS3新增表单和表单属性以及结构伪类选择器、属性选择器、伪元素选择器 <html lang="en"> <head> <meta charset="UTF-8"> <title>H5新增语义化标签</title> <!-- 注：1.语义化标签主要针对 搜索引擎 -移动端用的最多 2.页面中可以使用多次->也可以
学习CSS与HTML的笔记，构建网页的基础知识
本篇文章是关于CSS与HTML的笔记，勤做笔记不仅可以让自己学得扎实，更重要的是可以让自己少走弯路。有人说："再次翻开笔记是什么感觉"，我的回答是："初恋般的感觉"。或许笔记不一定十全十美，但肯定会让你有种初恋...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值