前端入门之HTML与CSS
目录
一、前言
二、HTML
HTML基本语法结构
HTML常见标签
html
head
body
title
标题标签: h1-h6
段落标签: p
换行标签: br
格式化标签
图片标签: img
11. 超链接标签: a
12. 表格标签
13. 列表标签
14. form标签
15. input标签
16. select下拉菜单
17. div 与 span
三、CSS
CSS基本语法规则
CSS选择器
2. CSS常用属性
字体属性
2. 文本属性
3. 背景属性
4. 圆角矩形
3. 元素显示模式
4. CSS盒子模型
5. 弹性布局
一、前言
前端开发主要使用三个编程语言：HTML、CSS、JavaScript。
注意：HTML和CSS并不是我们通常意义上的编程语言。通常的编程语言是能表述逻辑的，而这两个表达不了逻辑，它们只是表达一些“属性”，用于描述一个东西是什么样子的，而不能描述这个东西干了什么事情。
注意区分三个语言的联系：
HTML描述了网页的骨架（页面中有什么东西）；
CSS描述了网页的样式（类似形容词，给网页修饰）；
JS描述了网页的行为（如何和用户交互）。
二、HTML
- 在记事本中写一个hello world，注意保存时修改拓展名为.html
直接拖放到浏览器 或者 双击打开 就可以运行了。
- 接下来写一个更合法的HTML的代码，执行效果和上面一样，代码是更合法的写法。
注：浏览器对于HTML的语法格式的检查并没有很严格，并不像严格的Java语言，即使代码有一些不合规范之处，浏览器也会尽可能的去执行。
- 实际上在开发过程中一般使用VSCode这样的编辑器来编写前端代码。
HTML基本语法结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>hello world
</body>
</html>- HTML代码是通过标签来组织的。 形如<html></html>用尖括号组织的, 成对出现的这个东西就是"标签(tag)", 也可以叫做"元素(element)"
- 一个标签通常是成对出现的
<html>是开始标签; </html>是结束标签. 这两个标签之间是标签的内容.
少数标签是可以只有一个开始标签的, 比如说 单标签.
- 标签是可以嵌套的.一个标签的内容可以是其他一个或者多个标签. 此时, 这些标签构成了一个"树形结构"
- 可以在开始标签中, 给标签赋予 属性(Attribute). 属性相当于是键值对, 可以有一个或者多个.
HTML常见标签
html
这是一个html文件的最顶层标签.
head
存放了这个页面的一些属性(元数据, meta data)
body
存放了这个页面包含哪些内容
title
网页的标题
<!-- 这是注释 -->
注释的内容不会再页面中显示, 但是如果在网页中右键查看网页源代码, 此时是可以看到注释的.(vscode中使用Ctrl + /快速注释代码)
标题标签: h1-h6
h1最大最粗, h6最小最细
注: 通常情况下html每个标题标签都是独占一行的, 这个独占一行和代码编写无关.
在html里面的标签是否换行, 和代码的编写无关, 而是和标签自身有关.(有点标签独占一行, 有点标签不独占)
在html源代码中写的换行会被忽略.写的空格,多个空格会被视为一个(有的时候忽略, 有点时候视为一个.....)
段落标签: p
注: 每个段落之间, 不光是要换行, 同时还有一个明显的段落间距.
换行标签: br
格式化标签
变粗: strong / b
倾斜: em / i
删除线: del / s
下划线: u / ins
图片标签: img
img核心属性: src(必填项). src描述了该图片的路径, 这个路径可以是一个本地的绝对路径, 也可以是一个相对路径, 还可以是一个网络路径.
alt属性: 在图片加载不出来的时候, 就会显示alt对应的文本.
title属性: 鼠标悬停在图片上, 会给出一个提示.
width / height: 描述图片的尺寸.
11. 超链接标签: a
"链接" link, 也就是快捷方式.
a核心属性: href. href描述了目标页面的地址.
注: 超链接跳转到的页面, 可以是在当前网站之外的.
target属性: 一般写作 target="_blank", 就可以打开一个新的标签页(而不会替换原有页面)
12. 表格标签
table表示整个表格.
tr表示一行; td表示一个单元格; th表示表头中的一个单元格.
13. 列表标签
有序列表: ol (ordered list)
无序列表: ul (unordered list)
列表项: li (list item)
14. form标签
使用form标签进行前后端交互. 在页面上, 用户进行的操作/输入提交到服务器上.
15. input标签
input有很多形态, 能够表现成各种用户用来输入的组件.
<input type="text">单行文本框
<input type="password">也是单行文本框, 用于专门输入密码.
请选择性别:
<input type="radio"> 男
<input type="radio"> 女
对于单选框, 需要加个name属性. name属性相同的 单选框, 值之间是互斥的.
大学生每天都在干什么:
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 学习
注: 也可以使用checked属性来设置默认选中的.
<input type="button" value="我是个按钮>
对于按钮点击之后要干啥, 需要通过JS来配合.
提交按钮(搭配form使用)
<input type="submit">外表和button差不多, 会触发form和服务器的交互
<input type="file">文件选择框
textarea多行编辑框
16. select下拉菜单
<select><option>北京</option><option>上海</option><option>深圳</option><option>广州</option><option>杭州</option></select>
17. div 与 span
div与span都是无语意标签, 前面的标签都是有特定含义的. 那么这里没有含义的两个标签, 就可以用在各种场景.
div默认是独占一行, 是块级元素;
span默认是不独占一行, 是行内元素.
三、CSS
CSS基本语法规则
选择器 + 若干属性声明
总的来说, 就是通过选择器选中一个元素, 然后对包含这个元素的内容的属性加以操作.
<style>p {color: red;font-size: 30px;}</style>那么{ }里面的CSS属性可以是一个或者多个, 每一个属性都是一个键值对. 键和值之间使用 : 分割. 键值对使用 ; 分割. 每个键值对可以独占一行, 也可以不独占.
有三种写CSS的样式.
- 内部样式: 使用style标签, 直接把CSS写到html文件中. 此时的style标签可以放到任何位置. 一般建议放到head标签里.
- 内联样式: 使用style属性, 针对指定的元素设置样式.(此时不需要写选择器, 直接写属性键值对) 这个时候样式只是针对当前元素生效.
- 外部样式: 把CSS代码单独作为一个.css文件, 再通过link属性, 让html引入该css文件.
注: 实际开发中, 一般都是使用外部样式来写CSS. 让html和css分离开, 相互不影响.
CSS选择器
- 标签选择器
在 { 前面写标签名字. 此时意味着会选中当前页面中所有的指定标签.
- 类选择器
可以创建CSS类, 手动制定哪些元素应用这个类.
定义类, 需要用 . 开头.引用这个类的时候, 通过class 属性 = "类名"
注:
一个类, 可以被一个元素引用, 也可以被多个元素引用. 一个元素可以引用一个类, 也可以引用多个类.
CSS是一个层叠样式表. 一个元素是可以被应用多组样式的, 这些样式就好像一层一层的叠加上去的.
- ID选择器
html页面中的每个元素, 都是可以设置一个唯一的ID的, 作为元素的身份标识.
给元素设置ID之后, 就可以通过ID来选中对应的元素了.
注: 类选择器, 是可以让多个元素应用同一个类的. 而ID选择器, 则只能针对唯一的元素生效, 因为在一个页面里, 只能有唯一的ID.
小结:上面三个选择器都属于简单的基础选择器. 除此之外, CSS还支持一些更复杂的"复合选择器", 实际上复合选择器就是把前面的基础选择器组合一下
- 后代选择器
把多个简单的基础选择器组合一下(可以是标签, 类, ID选择器的任意组合)
ul li {color: red;}以上代码的含义就是先找页面中所有的ul, 然后在这些ul里再找所有的li.
- 子选择器
把多个简单的基础选择器组合一下(可以是标签, 类, ID选择器的任意组合)
只是找匹配的子元素, 不找孙子元素之类的~
选择器1>选择器2 {属性......
}- 并集选择器
选择器1, 选择器2 {属性......
}多组选择器, 应用了同样的样式
- 伪类选择器(复合选择器的特殊用法)
前面的选择器是选中某个元素, 伪类选择器是选中某个元素的某个特定状态.
比如:
:hover 鼠标悬停时候的状态
:active 鼠标按下时候的状态
2. CSS常用属性
CSS的属性是用于具体的样式设置. 样式涵盖很多方面的内容.
包括但不限于, 大小, 位置, 颜色, 形状, 边距, 边框, 特殊滤镜, 过渡效果, 动画.......
以下是一些常用的CSS属性
字体属性
设置字体 font-family
指定当前使用哪种字体来显示.
这个属性指定的字体, 要求必须是系统已经安装了的. 如果要制定一些特殊的字体, 系统上没有, 则不能正常显示. 这种情况一般是需要通过浏览器请求对应的服务器, 获取到指定字体文件才能设置.
设置字体大小 font-size
设置字体粗细 font-weight
实际设置使用值的时候, 有两种典型的设置风格. 1. 使用单词; 2. 使用数字
值:
normal: 正常粗细. 与400等值.
bold: 加粗. 与700等值.
lighter: 比从父元素继承来的值更细 (处在字体可行的粗细值范围内)。
border: 比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
number: 一个介于 1 和 1000 (包含) 之间的number类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。
文字倾斜 font-style
2. 文本属性
文本颜色color
计算机使用RGB的方式表示颜色, RGB各分配一个字节, 每个字节的范围: 0-255 / 00-FF, 通过对三个分量的不同比例的搭配, 就可以调和出不同的颜色.
文本对齐 text-align
靠左 / 靠右 / 居中
文本装饰 text-decoration
- underline 下划线. [常用]
- none 啥都没有. 可以给 a 标签去掉下划线.
- overline 上划线. [不常用]
- line-through 删除线 [不常用]
文本缩进 text-indent
每个段落, 首行可缩进两个文字(2em)
px相当于是"绝对的量";
em是一个相对的量, 以文字尺寸为基础来进行设置.
注: 假设文字大小是40px.
1em=>40; 2em=>80; 0.5em=> 20
文本缩进的值可以是负数(往左缩进)
行高
行高 = 文字高度 + 行间距
3. 背景属性
背景颜色 background-color
背景图片background-image: url(图片路径);
当引入背景图片之后, 默认情况下, 图片是平铺的. 如果不想平铺图片, 使用background-repeat: none;
禁止平铺之后, 图片出现在左上角. 如果想让图片居中, 需要使用background-position: center center;
注: background-size: 设置背景图的尺寸
4. 圆角矩形
html元素默认都是一个个的矩形, 有时候需要表示"带有圆角"的矩形
border-radius: length;
length是内切圆的半径. 数值越大, 弧线越强烈.3. 元素显示模式
display: block; 块级元素
display: inline; 行内元素
任何一块html标签的显示模式(块级/行内)都是可以设置的.
关于块级元素和行内元素的区别:
- 块级元素会独占一行. 行内元素不独占一行.
- 块级元素 高度, 宽度, 内外边距 都是可以设置的. 行内元素, 高度宽度行高都无效, 内边距有效, 外边距有时候有效有时候无效....
- 块级元素默认宽度是和父元素一样宽. 行内元素默认宽度是和里面内容一样宽.
4. CSS盒子模型
5. 弹性布局
弹性布局用于实现页面布局, 控制某个元素到指定位置上.
- 开启弹性布局 display: flex;
- 设置这些元素的水平方向的排列方式 justify-content: space-between;
- 设置这些元素的垂直方向的排列方式 align-items: