HTML和CSS的基础-前端扫盲-CSDN博客
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
想要写出一个网页就需要学习前端开发写网页代码和后端开发服务器代码。
对于前端的要求我们不需要了解很深仅仅需要做到扫盲的程度就可以了。
写前端主要用到的有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
无序列表 ulunordered list
列表项 li list item
form标签
使用form进行前后端交互。把页面上用户进行的操作/输入提交到服务器上。
input标签
input标签有很多种形态能够表现成各种用户用来输入的组件。
1.单行文本框
2.输入密码用的单行文本框
3.单选框
对于单选框需要加属性在这里就是name属性
4.多选框
也可以使用checked来设置默认选中的选项
5.按钮
对于按钮点击之后要干的事需要通过js来配合。
6.提交按钮
type="submit"\外表和button差不多但是会触发form和服务器的交互
7.文件选择框
select标签
可以做到下拉菜单。
div span 无语义标签
前面的标签都是有特定含义的这两个标签没有特定含义可以用在各种场景。甚至在一个页面中全用div也可以~但是一般不建议这么做表示一个内容优先考虑语义更贴切的标签。
div默认独占一行span默认是不独占一行的。
到这里HTML的一些基本的标签就介绍完了推荐一个HTML的相关文档mdn。
mdn
https://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的样式属性就可以实现出很多的页面效果了~