前端基础知识点大全 ==＞ HTML基础知识,CSS基础知识

最新推荐文章于 2022-01-25 16:59:17 发布

置顶轩程序员

最新推荐文章于 2022-01-25 16:59:17 发布

阅读量361

点赞数

分类专栏：前端基础知识文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43281459/article/details/109708606

版权

前端基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML基础知识

头文件 : <html></html>

注释:

网站的基本结构(关键字,网站的描述):

传送门: https://blog.csdn.net/qq_43281459/article/details/109708711

基础知识:

块元素: 在页面中独占一行的元素称为块元素(block element)

在网页中一般通过块元素来对页面进行布局

行内元素:(inline element)

行内元素主要用来包裹文字

块元素与行元素:

- 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素

布局标签(结构化语义标签)

header 表示网页的头部
           main 表示网页的主体部分(一个页面中只会有一个main)
           footer 表示网页的底部
           nav 表示网页中的导航
           aside 和主体相关的其他内容(侧边栏)
           article 表示一个独立的文章
           section 表示一个独立的区块,上边的标签都不能表示时可以使用section

           div 用来表示一个区块,目前来讲div还是我们主要的布局元素
           span 是一个行内元素,没有任何语义,一般用于在网页中选用文字

头部: <head></head>

网页标题:

<title></title> ==> title标签的内容会作为搜索结果的超链接上的文字显示

html身体:

文章主题标题:

标题标签:
                   h1 ~ h6
                   从h1~h6重要性递减,h1最重要
                   h1网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1

段落:

<p></p> p标签在页面表示一个段落 ,p标签也是一个块元素

段落中倾斜字体:

例:

<p>今天天气<em>真</em>不错</p>

段落中加粗字体:

<p>今天天气<strong>真</strong>不错</p>

列表:

<html>
	<head>
		<title>
			学html大法好
		</title>
	</head>
	<body>
<h1>学<font color = "red">HTML</font></h1> 
		
		<!-- 
			列表(list)
			
			在html中也可以创建列表,html列表一共由三种
				1.有序列表
				2.无序列表
				3.定义列表
			
			无序列表,使用ul标签来创建无序列表
				使用li表示列表项
				
			有序列表,使用ol标签来创建有序列表
				使用li表示列表项
				
			定义列表,使用dl标签来常见一个定义列表
				使用dt来表示定义的内容
				使用dd来对内容进行解释说明
				
			列表之间可以互相嵌套
		-->
		<p> 1321</p>
		<ul>
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ul>
		
		<ol>
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>
		
		<dl>
			<dt>结构</dt>
			<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
		</dl>		
	</body>
</html>

超链接:

超链接的基础使用

<a></a>标签

target属性

开发中超链接的占位符

回到底部

回到顶部

https://blog.csdn.net/qq_43281459/article/details/109708971

超链接的伪类

:link 用来表示没有访问过的连接(正常的连接)

:visited 用来表示访问过的连接
由于隐私的原因,所以visited这个伪类只能修改连接的颜色

:hover 用来表示鼠标移入的状态

:active 用来表示鼠标点击

示例代码:

<html>
	<head>
		<title>
			第二天学html
		</title>
		<style>

			a:link{
				color:red;
			}

			a:visited{
				color:orange;
			}

			a:hover{
				color:aqua;
				font-siza=50px;
			}
			
			a:active{
				color:yellogreen;
			}
		</style>
	</head>
	<body>
		<a href ="http://www.baidu.com">访问过的连接</a>
		<br></br>
		<a href ="http://www.baidu.com">没访问过的连接</a>
		
	</body>
</html>

图片标签:

图片标签用于向当前页面中引入一个外部标签
               使用img标签来引入外部图片,img标签是一个自结束标签
               img这种元素属于替换元素(基于快和行内元素之间)
               属性:
                   src 属性指定的是外部图片的路径

                   alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示
                       搜索引擎会根据 alt中的内容来识别图片,如果不写 alt属性则图片不会被搜索引擎找到

                   width 图片的宽度 (单位是像素)
                   height 图片的高度 (单位是像素)
                       - 宽度和高度如果只修改了一个,则另一个会等比例缩小或放大

                   注意:
                       一般情况下载pc段,不建议修改图片的大小,需要多大的图片就裁多大
                       但是在移动端,经常需要对图片进行缩放 (主要是大图缩小)
                           - 大图缩小,浪费内存
                           - 小图放大,失真

               图片的格式:
                   jpeg :
                       - 支持的颜色比较丰富,不支持透明效果,不支持动图
                       - 一般用来显示照片
                   gif :
                       - 支持的颜色较少,支持简单透明,支持东突
                       - 颜色单一的图片,动图
                   png   :
                       - 支持的颜色丰富,支持复杂透明,不支持动图
                       - 颜色丰富,复杂透明图片 (专为网页而生)
                   webp :
                       - 谷歌新退出的专门用来表示网页中的图片的一种格式
                       - 他具备其他图片格式的所有优点,而且文件还特别的小
                       - 缺点 : 兼容性不好

                   base64
                       - 将图片使用base64进行编码,将图片转换成字符,通过字符的形式来引入图片
                       - 一般都是一些需要和网页一起加载的图片才会使用base64

                   - 效果一样用小的
                   - 效果不一样用好的

<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3013648535,1654255905&fm=26&gp=0.jpg">

内联框架:

内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框 0表示没框 1表示有框

<iframe src ="Https://www.baidu.com" width = "800" frameborder = "0"></frame>
<!-- scr=网址 width=宽度 frameborder=0(无框) -->

引入音频:

audio 标签用来向页面中引入一个外部的音频文件的
               音视频文件引入时,默认情况下不允许用户自己控制播放停止

           属性:
               controls 是否允许用户控制播放
               autoplay 音频文件是否自动播放
                   - 如果设置了 autoplay则音乐在打开页面时会自动播放
                       但是目前来讲大部分浏览器都不会自动对音乐进行播放
               loop 音乐是否循环播放

		<!--   <audio src = "文件路径" controls autoplay></audio>   -->
		
		<!-- 出了通过src来指定外部文件的路径以外,还可以通过source来指定文件 -->
		<!-- 
			<audio contrs>
			对不起,您的浏览器不支持播放音频!请升级浏览器
			<source src="音频文件路径">
		</audio>
		-->

CSS知识点

使用CSS来修改元素样式的三种方式

第一种方式(内联样式,行内样式) ==> 不推荐使用

第二种方式 : 将样式编写到head中的style标签里

第三种方式: 外部样式表 ==> 最佳使用方式

具体知识点信息请进传送门 : https://blog.csdn.net/qq_43281459/article/details/109709247

CSS注释和java差不多都是 : /* 注释内容 */

CSS语法: 选择器和声明块

               CSS的语法:
                   选择器声明块

                   选择器: 通过选择器可以选中页面中的指定元素
                       比如 p的作用就是选中页面中所有的 p元素

                   声明块: 童年各国声明块来指定要为元素设置的样式
                       声明块由一个一个的声明组成
                       声明是一个名值对结构 ==> 样式名:样式值;
                           一个样式名对应一个样式值,名和值之间以 : 连接,以 ; 结尾

			p{
				color:red;
				font-size:20px;
			}

CSS选择器: 通配选择器,类选择器,id选择器,元素选择器,交集选择器,选择器分组,关系选择器,伪类选择器,伪元素选择器

请进传送门 : https://blog.csdn.net/qq_43281459/article/details/109709516

轩程序员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识点大全 ==＞ HTML基础知识,CSS基础知识

头文件 : <html></html>注释: 网站的基本结构(关键字,网站的描述): <meta></meta> ==>https://blog.csdn.net/qq_43281459/article/details/109708711基础知识:块元素: 在页面中独占一行的元素称为块元素(block element)在网页中一般通过块元素来对页面进行布局行内元素:(inlin...
复制链接

扫一扫