![cover](https://img-blog.csdnimg.cn/3ef9090814624291ad24e54a951f70fa.png)
HTML和CSS的基础-前端扫盲
介绍了html和css的相关知识快进来看看吧~
想要写出一个网页,就需要学习前端开发(写网页代码)和后端开发(服务器代码)。
对于前端的要求,我们不需要了解很深,仅仅需要做到扫盲的程度就可以了。
写前端,主要用到的有:HTML CSS JS
前端开发,主要使用的开发环境主要有两个:
1.JetBrains系列 如IDEA专业版,和JB提供的WebStorm。(收费)
2.VSCode (免费)
除了上面两个之外,还有很多其他的选项,如dw,sublime text,vim等等。
我们的学习过程中,就用VSCode编写代码,通过浏览器来查看效果。在这里浏览器就相当是JVM这样的角色。
目录
HTML
使用VSCode
VSCode和IDEA相比,更加简单。VSCode没有项目这个概念,都是使用目录来组织的。我们需要选择一个当前存放代码的目录,打开这个目录就相当于打开了项目目录。
通过ctrl + s保存后,在文件管理器中显示,然后通过浏览器的方式打开。
HTML的基本语法结构
1.html代码是通过标签来组织的。
形如<html></html>用尖括号组织的,成对出现的这个东西就是"标签"(tag),也可以叫做"元素"(element)。
2.一个标签通常是成对出现的。注意,还有一些标签可以只有一个开始标签(单标签)
<html>开始标签
</html>结束标签
这俩之间就是标签的内容。
3.标签是可以嵌套的。
一个标签的内容可以是其他一个或者多个标签。此时,这些标签构成了一个“树形结构”。
4.可以在开始标签中给标签赋予属性(Attribute)
属性相当于是键值对,可以有一个或者多个。
接下来我们要了解到就是HTML中都支持哪一些标签,每个标签是干什么的,每个标签都有哪些关键属性。
HTML标签
html 这是一个html文件的最顶层标签。标志着这是一个html文件。
head 存放了这个页面的一些属性,包括元数据,meta data等等。
body 存放了这个界面包含哪一内容。
emmet快捷键
刚刚写的hello world 是逐个单词敲的,我们还有更快地办法。当VSCode识别到这是一个html文件后,输入!,按下tab,此时就能生成一个基本的页面,只需要编辑body的内容即可。这个功能叫做emmet快捷键。
注释标签
首先要知道,代码的注释、HTML的注释和一般语言的注释差别是很大的。
HTML中的注释通过<!-- -->来完成。
注释的代码是不会在网页中显示的,但是如果通过右键查看网页源代码,此时是可以看到注释的。
所以说,注释不能随便乱写,因为所有注释都会可以被用户看到。
VSCode中,使用ctrl + / 快速注释代码。
标题标签 h1-h6
h1是最大最粗的,h6是最小最细的。
并且要注意,每个标题标签都是独占一行的,这个独占一行和代码的编写是无关的。
在html中标签是否换行,和代码的编写是无关的,只和标签自身有关。
段落标签 p
每一个段落之间,不仅有换行,还有一个明显的段落间距。
Lorem可以自动帮我们生成一旦随机的文本,帮我们调试显示效果。
换行标签 br
格式化标签
<strong> <b> 变粗
<em> <i> 倾斜
<del> <s> 删除线
<ins> <u> 下划线
这些标签都是不独占一行的
图片标签 img
img有一个核心属性:src 这是必填项。
src描述了图片的路径,可以是一个本地的路径,也可以是一个相同的路径,还可以是网络路径。
同时img还有一些别的属性。
alt属性:如果在图片没有加载出来的时候,就会显示alt对应的文本。目前网络环境出现这种情况都很少了,但是以前网络环境慢的时候,会经常出现图片的位置显示个文字。
title属性:鼠标选停在图片上,会给出一个提示。
width/height属性:描述图的尺寸。单位是px(像素)
超链接标签 a
href 这是“链接”link,跳转到的页面可以是在当前网站之外的。
target:一般都是写作target="_blank",这个时候就可以打开一个新的标签页而不会替换掉原有的页面。
表格标签
table 表示整个单元格
tr 表示一行
td 表示一个单元格
th 表示表头中的一个单元格
列表标签
有序列表 ol (ordered list)
无序列表 ul(unordered list)
列表项 li (list item)
form标签
使用form进行前后端交互。把页面上用户进行的操作/输入提交到服务器上。
input标签
input标签有很多种形态,能够表现成各种用户用来输入的组件。
1.单行文本框![](https://i-blog.csdnimg.cn/blog_migrate/e527583731ace0d0ea027e5e4532eb40.png)
2.输入密码用的单行文本框
3.单选框
对于单选框,需要加属性,在这里就是name属性
4.多选框
也可以使用checked来设置默认选中的选项
5.按钮
对于按钮点击之后要干的事,需要通过js来配合。
6.提交按钮
type="submit"\外表和button差不多,但是会触发form和服务器的交互
7.文件选择框
select标签
可以做到下拉菜单。
div span 无语义标签
前面的标签都是有特定含义的,这两个标签没有特定含义,可以用在各种场景。甚至在一个页面中,全用div也可以~但是一般不建议这么做,表示一个内容优先考虑语义更贴切的标签。
div默认独占一行,span默认是不独占一行的。
到这里,HTML的一些基本的标签就介绍完了,推荐一个HTML的相关文档:mdn。
mdnhttps://developer.mozilla.org/zh-CN/docs/Web/HTML
这个文档可以看做HTML的官方文档~
接下来我们来学习CSS。
CSS
CSS是层叠样式表 (Cascading Style Sheets)。
CSS能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
语法规则
选择器 + {一条/N条声明}
简单地说,就是选中一个元素,然后再决定修改什么。
括号里面的CSS属性,是可以写一个或者多个。
声明的属性是键值对。键和值之间使用:分割,键值对之间使用;分割。
每个键值对可以独占一行,也可以不独占。
引入方式
有三种方式引入CSS:
1.内部样式
使用style标签,直接把CSS写到html文件中。此时的style标签可以放到任何位置,一般建议放到head标签中。和上面的例子一样。
2.内敛样式
使用style属性,针对指定的元素设置样式。此时不需要写选择器,直接写属性键值对,这个时候样式只是针对当前元素生效。
同时要注意,这种写法优先级较高, 会覆盖其他的样式。
3.外部样式
把CSS代码单独作为一个CSS文件,再通过link属性,让html引入该CSS文件。
实际开发中,一般都是通过外部样式来写CSS,让html和css分开,相互不影响。
当前学习阶段,主要以内部样式为主。
选择器
1.标签选择器
在 { 前面写标签名字,会选中当前页面中所有指定的标签。
这样写就会让所有的p标签都变成黄色,但是此时如果再来了一个div标签就不会生效。
2.类选择器
相对于标签选择器来说,这是更好的选择。可以手动创造CSS类,手动指定哪一些元素来应用这个类。
定义类,需要使用 . 开头,引用这个类的时候,通过class属性 = "类名"即可。
同时,一个元素还可以引用多个类
因为CSS中文名叫做层叠样式表,也就是说一个元素是可以被应用多组样式的,这一些样式就好像一层一层叠加上去的。
3.ID选择器
html页面中的每个元素,都是可以设置一个唯一的ID的,作为元素的身份标识。
给元素安排ID之后,就可以通过ID来选中对应的元素。
ID选择器只能针对唯一的元素生效,因为一个页面里只能有唯一的ID。
4.后代选择器
把多个简单的基础选择器组合一下,可以是标签、类、ID选择器的任意组合。
含义就是:先找页面中所有的ul,然后在这些ul里再找所有的li。
5.子选择器
也是把多个简单的基础选择器组合,不过只是找匹配的子元素,不找孙子元素之类的~
6.并集选择器
多组选择器,应用了同样的格式。
7.伪类选择器
前面的选择器是选中某个元素,伪类选择器远中某个选中某个元素的某个特定状态。
:hover 鼠标悬停时的状态,鼠标放上去就变红了
:active 鼠标按下时候的状态,鼠标点下去就变红了
字体属性
设置字体家族、大小、粗细、文字倾斜、文字颜色
font-family:当前采用哪种字体来显示
font-size:当前字体采用的大小
font-weight:可以用单词设置,也可以用数字设置
font-style:设置当前文字的倾斜
color:设置当前字体的颜色,其中颜色的表示分为R G B三个分量,范围0-255或者是0-0xFF
如果每个分量的两个十六进制数字都相同,那么就可以把6位十六进制缩写成3位十六进制。
#ff0000可以缩写为#f00
文本属性
文本对齐
通过text-align属性来设置对齐方式,比如靠左、靠右、居中~
文本装饰
text-decroation:
underline下划线
none 什么都没有,可以给a标签去掉下划线
overline 上划线(不常用)
line-through 删除线(不常用)
文本缩进
每个段落首行缩进,用text-indent来表示,可以运用的单位是em。em是以文字尺寸为基础来设置的。假设文字大小就是40px,那么2em就是80pm。
并且文本缩进的值可以是负数,也就是向左缩进。
行高
行高=文字高度 + 行间距,指的是上下文本行之间的基线距离
内容区:顶线和底线包括的区域,即深灰色区域
注意:
1.行高=上边距+下边距+字体大小
上下边距是相等的,例如此处的行高是100px,字体大小是30px,那么上下边距就分别是35px。
2.行高也可以取 normal 等值。 这个取决于浏览器的实现.,例如chrome 上 normal 为 21 px。
3.行高等于元素高度, 就可以实现文字居中对齐
背景属性
背景颜色
background-color:[指定颜色];
背景图片
background-image: url(...);
和img类似,但是可以实现很多img实现不了的功能。
背景平铺
当引入了背景图片之后,默认情况下,图片是平铺的,如果不想使用平铺,可以使用background-repeat:none;来禁止平铺。
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
背景位置
禁止平铺之后,图片出现在左上角,如果我们想让图片居中,可以用
background-position:center center;
也可以用x、y来代表距离左边和距离上面的距离:
background-position: x y;
背景尺寸
background-size: length/percentage/cover(拓展)/contain(缩放);
也可以填具体的数值,如40px,也可以填百分比。
CSS盒子模型
在盒子模型中,分为了内容、内边距、边框和外边距。
边框 border
border属性,直接设置设置了四个方向:border-top\border-bottom\border-right\border-left
设置边框的三个方面:
1.边框的粗细
2.边框的颜色
3.边框的风格(包括实线、虚线和其他的线)
同时,边框默认会撑大盒子。设置的200×100像素,但是最终的结果却是209×109像素
很多时候不希望撑大盒子,很可能会影响其他的元素,所以就有一个专门的属性防止盒子被撑大:
box-sizing:border-box
内边距 padding
padding:10px 表示四个方向都是10px边距
padding:10px 20px 表示上下边距是10px,左右边距是20px
padding:10px 20px 30px 40px 上边距、右边距、下边距、左边距的顺序设置
外边距 margin
margin的写法和padding差不多,也是可以分成四个方向来设置。
特殊用法:把margin-left和margin-right设置程auto,让浏览器自动调节,此时该元素就能够在父元素内部居中放置。
圆角矩形
通过 border-radius 使边框带圆角效果。
基本效果
border-radius: length;
其中,length是内切圆的半径,length越大,弧线越强烈。
生成圆形
border-radius 的值为正方形宽度的一半即可。
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可。
元素的显示模式
display:block; 块级元素
display:inline; 行内元素
任何一个html标签的显示模式都是可以设置的。
关于块级元素和行内元素的区别:
1.块级元素会独占一行,行内元素不会
2.块级元素高度、宽度、内外边距都是可以设置的,行内元素的高度宽度行内高无效,内边距有效,外边距有时有效有时无效。
3.块级元素默认宽度是和父元素一样宽,行内元素默认宽度和内容一样宽。
块级元素比较正常,行内元素不确定性比较多,所以一般需要的话都是把行内元素转成块级元素。
布局
实现html的页面布局比较复杂,有四种方式来解决:
1.基于表格的布局方式
2.基于浮动的布局方式,主要是解决“水平方向排列”的问题
3.弹性布局,也是解决“水平方向排列”的问题
4.网格布局,二维布局,相当于更高级版本的“表格布局”
行内元素虽然是在水平方向上排列的,但是不适合进行水平布局。因为尺寸边框都不太可控。所以使用弹性布局是更合适的。
1.开启弹性布局
display flex;
要给水平排列的元素的父元素设置flex,此时弹性容器里面的元素,则不再是“块级”“行内元素”,而是成为了弹性元素,遵守弹性元素布局。也就是说把一个行内元素转化成了遵守弹性布局的元素。
2.设置这些元素的水平方向的排列方式
justify-content:space-between;
3.设置元素垂直方向的排列方式
align-items
到目前为止,结合前面的html和css的样式属性,就可以实现出很多的页面效果了~
更多推荐
所有评论(0)