前端知识复习（一）

最新推荐文章于 2024-07-02 22:45:00 发布

一个平平无奇的小高

最新推荐文章于 2024-07-02 22:45:00 发布

阅读量290

点赞数 4

分类专栏： html/css 文章标签： javascript html5 css3 html css

本文链接：https://blog.csdn.net/qq_44646343/article/details/108967182

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、 HTML–页面展示什么内容

1.1 HTML概述
1.1.1 HTML:Hyper Text Markup Language超文本标记语言
超文本：相比普通文本可以设置字体颜色位置等样式
标记语言：通过一组标签描述内容
（HTML不是一种编程语言而是一种标记语言）
1.1.2 html标签：由尖括号包裹关键词通常成对出现
闭合标签：成对出现，由开始标签和结束标签包裹内容，如<html></html>、<body></body>、<div></div>
空标签：没有包括内容的单独标签，如<img/>、<br/>、<hr/>
1.1.3 html文档
由文档声明、标签和纯文本构成
1.1.4 html语法规范

<!DOCTYPE HTML>
<html>
	<head></head>
	<body></body>
</html>

文档声明：告知浏览器文档类型，如：html5描述：<!DOCTYPE HTML>
根标签：限定了文档的开始点和结束点用来包裹头部标签和主体标签
头标签：所有头部元素的容器，描述文档的各种属性和信息，所有内容在浏览器内容展示区不显示，以下两个标签会显示在浏览器标题栏，分别是标题和图标

<title>浏览器标题栏显示的文字</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>

体标签：包裹呈现在浏览器内容展示区的所有内容

1.2 常用标签
1.2.1 头标签元素
base标签：

href=""
规定页面中所有相对链接的基准URL

<base href="https://www.baidu.com/"/>

target=""
在何处打开页面中所有的链接

 <base target="_blank"/>
 <!-- [_blank|_self|_parent|_top|framename] -->

link标签：

设置标题栏小图标

<link rel="icon" href="pic.ico" type="image/x-icon"/>

引入外部样式表

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

mate标签：

文档类型字符集设置

<mate http-equiv="content-type" content="text/html;charset=UTF-8"/>

网页内容描述设置

 <meta name="description" content="这里是这个网页内容的描述"/>

网页关键词描述设置

 <meta name="keywords" content="这里是这个网页的陈列关键字"/>

视口设置（手机等其他设备浏览器的虚拟窗口）

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

script标签：

插入一段js脚本

 <script>
        alert("hello gladiola");
 </script>

引入外部js文件

 <script type="text/javascript" src="common.js"></script>

style标签：

插入一段css样式

<style type="text/css">
  body {background-color:red;}
</style>

title标签：

设置标题栏文字

<title>这是标题栏内容</title>

1.2.2 体标签元素
1.2.2.1 行、块元素

块级元素 display:block
默认的样式会独占一行，对宽度、高度等样式属性生效，默认宽度是100%，默认高度是由内容或者子容器的高度决定的，如div、form、ul、ol、li、dl、dt、dd、p、h1~h6
行级元素 display:inline
默认样式元素与元素之间会像文档一样从左到右依次排列，显示不下会折行显示，对宽度、高度等样式属性不生效，宽度高度是内容的宽高，如span、a、i、b、u（下划线）、em、strong、label
行内块元素 display: inline-block
默认元素与元素之间显示在一行，并且宽高样式生效，如img、input、textarea

1.2.2.2 表格元素

table
tr
td(colspan, rowspan)

1.2.2.3 表单元素

form(action, method)
input(name, value, type[text|password|hidden|radio|checkbox|file|submit|reset|date|time])
select option
textarea(cols rows)

二、 CSS如何展示页面内容

2.1 CSS概述
2.1.1 CSS: Cascading Style Sheets层叠样式表

----------css----------------
<style type="text/css">
  div{color:red;background-color:green;}
  .red-box{background-color:red;}
</style>
----------html----------------
<div class="red-box"></div>

层：层级
相同属性按优先级覆盖
叠：叠加
不同属性叠加一起
优先级：

通常 id选择器 > class选择器 > 标签选择器
内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省
选择越精确，优先级越高

2.2 三种引入方式
2.2.1 内联样式(标签style属性的样式)

<div style="border:1px solid #fff; width:100px; "></div>

2.2.2 内部样式(标签

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      .red-box{
        background-color:red;
        width:100px;
        heigth:100px;
       }
    </style>
  </head>
  <body>
    <div class="red-box"></div>
  </body>
</html>

2.2.3 外部样式(引入的样式)

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

2.3 选择器
2.3.1 基础选择器

#
id选择器：用#表示id选择器，通常id的值唯一不重复，选择范围最精确，优先级相对较高
.
class选择器：用.表示class选择器，通常把具有相同样式的元素定义为一类，优先级次于id选择器
元素选择器
用元素的标签名作为选择器，选择范围大优先级别低

2.3.2 属性选择器

E[attr] 对具有attr属性的E标签起作用，如

-------------css--------------
div[id]{
  color:red
}
-------------html--------------
<div class="">1</div><!--选不中-->
<div id="id-1">2</div><!--选中-->
<div id="id-2">3</div><!--选中-->

E[attr1][attr2] 对同时具有attr1和attr2属性的E标签被选中，如

-------------css--------------
div[id][class]{
  color:red
}
-------------html--------------
<div id>1</div><!--选不中-->
<div class="c-1">2</div><!--选不中-->
<div id="id-1" class="c2">3</div><!--选中-->

E[attr=value] 对所有attr属性等于value的E标签起作用，如

-------------css--------------
input[type='password']{
  color:red
}
-------------html--------------
<input type="password"/><!--选中-->
<input type="text"/><!--选不中-->

E[attr*=value] 对所有attr属性包含value的E标签起作用
E[attr^=value] 对所有attr属性以value开头的E标签起作用
E[attr$=value] 对所有attr属性以value结尾的E标签起作用

2.3.3 派生选择器

空格
后代选择器（目标选择器必须在某个元素内，可以不用限制直接子元素）

-------------css--------------
ul a{
  color:red
}
-------------html--------------
<ul>
	<li>
		<a>1</a>    <!--选中-->
	</li>
</ul>   
<a>2</a>   <!--选不中-->

>
子元素选择器（目标选择器必须是某个元素的直接子元素）

-------------css--------------
li>a{
  color:red
}
-------------html--------------
<ul>
	<li>
		<a>1</a>	<!--选中-->
		<a>2</a>    <!--选中-->
    </li>
</ul>
<a>2</a><!--选不中-->

~
兄弟选择器（具有相同父亲的所有后续元素被选中（选中弟弟不选哥哥））

-------------css--------------
#id-2~li{
  color:red
}
-------------html--------------
<ul>
  <li>1</li>	<!--选不中-->
  <li id="id-2">2</li>	<!--选不中-->
  <li>3</li>	<!--选中-->
  <li>4</li>	<!--选中-->
  <li>5</li>	<!--选中-->
</ul>

+
相邻兄弟选择器（具有相同父亲的紧挨着的下一个元素被选中（选中紧挨着的弟弟不选哥哥））

-------------css--------------
#id-2+li{
  color:red
}
-------------html--------------
<ul>
  <li>1</li>	<!--选不中-->
  <li id="id-2">2</li>	<!--选不中-->
  <li>3</li>	<!--选中-->
  <li>4</li>	<!--选不中-->
  <li>5</li>	<!--选不中-->
</ul>

2.3.4 其它选择器

，
分组选择器（用,将具有相同样式的写在一起）

-------------css--------------
div,ul,li{
  margin:0;
  padding:0;
}

:
伪类和伪元素选择器

-----------------------伪类------------------------
a:link {color: blue}		/* 未访问的链接 */
a:visited {color: red}	    /* 已访问的链接 */
a:hover {color: green}	    /* 鼠标移动到链接上 */
a:active {color: yellow}	/* 选定的链接 */
/*
  a:hover 必须被置于 a:link 和 a:visited 之后
  a:active 必须被置于 a:hover 之后，才是有效的
*/
input:focus{background-color:yellow;}       /* 获得焦点 */
li:first-child {color:red;}                 /* 第一个元素 */
li:last-child {color:red;}                  /* 最后一个元素 */
li:nth-child(3) {color:red;}                /* 第3个元素 */
li:nth-child(odd) {color:red;}              /* 奇数位元素 */
li:nth-child(event) {color:red;}            /* 偶数位元素 */
li:nth-child(2n+1) {color:red;}             /* 函数表达式 */
-----------------------伪元素------------------------
h1:before{content:url(logo.gif);}          /* 之前插入内容 */
h2:after{content:'后面插入的文字';}          /* 之后插入内容 */
p:first-letter{color:red;}                 /* 第一个字母 */
p:first-line{color:red;}                   /* 第一行文字 */
/*
first-letter和first-line通常可以设置如下和文本相关的属性
  font 
  color
  background
  text-decoration
  vertical-align
  text-transform
  line-height
*/

2.4 常用样式
2.4.1 盒模型相关

width/height 注意box-sizing的影响
min-width/max-width
min-height/max-height
padding 
border 
margin 注意外边距合并
backgroud 注意背景颜色和背景图片填充的区域范围
box-shadow(水平偏移，竖直偏移，模糊度，阴影范围，颜色)

如图：
在这里插入图片描述
注意

浏览器默认 width和height属性是指内容区的大小(不包括内边距边框外边距)，而元素在浏览器中占据的实际宽度是左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
通过box-sizing属性修改width和height控制区域

2.4.2 布局定位相关

display:block;          /*块级元素*/
display:inline;         /*行级元素*/
display：inline-block;  /*行内块元素*/

相对定位 position:relative
(设置相对于自身原本位置的偏移量，元素原先的位置会保留灵魂出窍 )
在这里插入图片描述
绝对定位 position:absolute
(设置相对于已定位最近祖先元素的偏移量，该元素原先的位置不会保留)

固定定位 position:fixed
设置相对于屏幕的偏移量，该元素原先的位置不会保留

浮动布局float
(浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样)
在这里插入图片描述

浮动清理clean

2.4.3 文本相关

color
font-size
font-weight
font-family
text-overflow
text-decoration[underline|overline|none]
text-align[center|left|right]
text-shadow(颜色，水平偏移，垂直偏移，模糊半径)
vertical-align[top|middle|bottom]
line-height

2.4.4 其它样式

opacity透明度
list-style列表样式
border-collapse表格合并
cursor[pointer|text|wait|help]光标样式

🐖. 如有错误，欢迎补充、指正

一个平平无奇的小高

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端知识复习（一）

一、 HTML–页面展示什么内容1.1 HTML概述1.1.1 HTML:Hyper Text Markup Language超文本标记语言超文本：相比普通文本可以设置字体颜色位置等样式标记语言：通过一组标签描述内容（HTML不是一种编程语言而是一种标记语言）1.1.2 html标签：由尖括号包裹关键词通常成对出现闭合标签：成对出现，由开始标签和结束标签包裹内容，如<html></html>、<body></body>、<div>&l
复制链接

扫一扫

专栏目录