前端基础知识点大全
头文件 : <html></html>
注释: <!-- 注释内容 -->
网站的基本结构(关键字,网站的描述): <meta></meta> ==> 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身体: <body></body>
文章主题标题: <h1></h1> ==> <h1>到<h6>
标题标签:
h1 ~ h6
从h1~h6重要性递减,h1最重要
h1网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
段落: <p></p>
<p></p> p标签在页面表示一个段落 ,p标签也是一个块元素
段落中倾斜字体: <em></em>
例:
<p>今天天气<em>真</em>不错</p>段落中加粗字体: <strong></strong>
<p>今天天气<strong>真</strong>不错</p>列表: <ul></ul> <ol></ol> <dl></dl>
<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>
超链接的基础使用
<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">内联框架: <iframe></iframe>
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框 0表示没框 1表示有框
<iframe src ="Https://www.baidu.com" width = "800" frameborder = "0"></frame>
<!-- scr=网址 width=宽度 frameborder=0(无框) -->引入音频: <audio></audio>
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
上一篇： 文件的读写
下一篇： JS--变速动画函数封装增加任意多个属性