基础的HTML5+CSS3 知识
Posted 前端留学生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基础的HTML5+CSS3 知识相关的知识，希望对你有一定的参考价值。
1. html5
meta标签
<meta name="keywords" content="HTML5,前端,CSS3"><meta name="description" content="这是一个非常不错的网站">
语义化标签
<!--标题标签:<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>--><!--块元素（block element）- 在网页中一般通过块元素来对页面进行布局行内元素（inline element）- 行内元素主要用来包裹文字 <p></p>--><!--布局标签（结构化语义标签）：header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span 行内元素，没有任何的语义，一般用于在网页中选中文字-->
三种html列表
1、有序列表2、无序列表3、定义列表
<ul><li>结构</li><li>表现</li><li>行为</li></ul><ol><li>结构</li><li>表现</li><li>行为</li></ol><dl><dt>结构</dt><dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd></dl>
超链接、图片、内联框架、音视频
<a href="https://www.baidu.com">超链接</a><img src="./img/1.gif" alt="松鼠"><iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe><!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 --><audio controls><!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！--><source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"></audio>
实体（转义字符）
 ；空格> ；>< ；<© ； 版权符号
2. CSS3
使用CSS来修改元素的样式（3种方法）：
1.内联样式（ 注意：开发时绝对不要使用内联样式）
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>2.内部样式表
<style>p{color: blue;font-size: 20px;}</style><body><p> 会当临绝顶，一览众山小</p></body>
3.外部样式表（最佳实践）
<link rel="stylesheet" href="./style.css">选择器
复合选择器
交集选择器：选择器1选择器2选择器3选择器n{} #b1.p1h1.red{}并集选择器：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{}
关系选择器
子元素选择器 ：父元素 > 子元素{}后代元素选择器：祖先 后代{}选择下一个兄弟：前一个 + 下一个{}选择下边所有的兄弟：兄 ~ 弟{}
伪类选择器 a伪类
:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素:nth-child(even){} 选中偶数子元素:nth-child(odd){}选中奇数子元素:not() 否定伪类a:link{}a:visited{}a:hover{}a:active{} 点击
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用::before 元素的开始::after 元素的最后- before 和 after 必须结合content属性来使用
div::before{content: 'abc';color: red;}
选择器的权重
内联样式 1,0,0,0id选择器 0,1,0,0 |类和伪类选择器 0,0,1,0 |.class{}元素选择器 0,0,0,1 | p{} h1{}通配选择器 0,0,0,0 |*{}继承的样式 没有优先级可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！class 是一个标签的属性，它和id类似，不同的是class可以重复使用
长度单位
像素- 屏幕（显示器）实际上是由一个一个的小点点构成的- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰- 所以同样的200px在不同的设备下显示效果不一样百分比- 也可以将属性值设置为相对于其父元素属性的百分比- 设置百分比可以使子元素跟随父元素的改变而改变em- em是相对于元素的字体大小来计算的- 1em = 1font-size- em会根据字体大小的改变而改变rem- rem是相对于根元素的字体大小来计算
https://juejin.cn/post/6971718506295328776
扫描下方二维码
获取web前端、学习资料视频
以上是关于基础的HTML5+CSS3 知识的主要内容，如果未能解决你的问题，请参考以下文章
本仓库是自己总结的前端开发一些基础知识，包括html5、css3、canvas、jQuery、less、ES6、webpack、Vue等，也包含了一些算法和数据结构方面的练习，同时也记录了自己工作中的