HTML和CSS的基础-前端扫盲

想要写出一个网页,就需要学习前端开发(写网页代码)和后端开发(服务器代码)。

对于前端的要求,我们不需要了解很深,仅仅需要做到扫盲的程度就可以了。

写前端,主要用到的有:HTML  CSS  JS

前端开发,主要使用的开发环境主要有两个:

1.JetBrains系列 如IDEA专业版,和JB提供的WebStorm。(收费)

2.VSCode (免费)

除了上面两个之外,还有很多其他的选项,如dw,sublime text,vim等等。

我们的学习过程中,就用VSCode编写代码,通过浏览器来查看效果。在这里浏览器就相当是JVM这样的角色。

目录

HTML

使用VSCode

HTML的基本语法结构

HTML标签

标题标签 h1-h6

段落标签 p

换行标签 br

格式化标签

图片标签 img

超链接标签 a

表格标签

列表标签

form标签

input标签

1.单行文本框​编辑

2.输入密码用的单行文本框

3.单选框

4.多选框

5.按钮

6.提交按钮

select标签

div span 无语义标签

CSS

语法规则

引入方式

选择器

1.标签选择器

2.类选择器

3.ID选择器

4.后代选择器

5.子选择器

6.并集选择器

7.伪类选择器

字体属性

设置字体家族、大小、粗细、文字倾斜、文字颜色

文本属性

文本对齐

文本装饰

文本缩进

行高

背景属性

背景颜色

背景图片

背景平铺

背景位置

背景尺寸

CSS盒子模型

边框 border

内边距 padding

外边距 margin

圆角矩形

基本效果

生成圆形

生成圆角矩形

元素的显示模式

布局


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.单行文本框

2.输入密码用的单行文本框

3.单选框

对于单选框,需要加属性,在这里就是name属性

4.多选框

也可以使用checked来设置默认选中的选项

5.按钮

对于按钮点击之后要干的事,需要通过js来配合。

6.提交按钮

type="submit"\外表和button差不多,但是会触发form和服务器的交互

7.文件选择框

select标签

可以做到下拉菜单。

div span 无语义标签

前面的标签都是有特定含义的,这两个标签没有特定含义,可以用在各种场景。甚至在一个页面中,全用div也可以~但是一般不建议这么做,表示一个内容优先考虑语义更贴切的标签。

div默认独占一行,span默认是不独占一行的。

到这里,HTML的一些基本的标签就介绍完了,推荐一个HTML的相关文档:mdn。

mdnicon-default.png?t=N7T8https://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的样式属性,就可以实现出很多的页面效果了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/130164.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝鹏测控测宽仪系列又添一员大将——双目测宽仪

轧钢过程中钢板的宽度是一个重要的参数&#xff0c;它直接决定了成材率。同时&#xff0c;随着高新科技越来越广泛的应用到工程实际中&#xff0c;许多控制系统需要钢板实时宽度值作为模型参数。 当前&#xff0c;相当一部分宽厚板厂还在采用人工检测的方法&#xff0c;检测环境…

【漏洞复现】Drupal XSS漏洞复现

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 复现环境&#xff1a;Vulhub 环境启动后&#xff0c;访问 http://192.168.80.141:8080/ 将会看到drupal的安装页面&#xff0c;一路默认配置下一步安装。因为没有mysql环境&#xff0c;…

Mac下使用nvm,执行微信小程序自定义处理命令失败

环境 系统&#xff1a;Mac OS 终端&#xff1a;zsh CPU&#xff1a;M1/ARM架构 node环境&#xff1a;nvm&#xff0c;node20 node目录&#xff1a;/Users/laoxu/.nvm/versions/node/v20.1.0/bin/ 问题 在使用微信小程序的自定义处理命令时&#xff0c;启动失败 提示找不…

【音视频 | Ogg】libogg库详细介绍以及使用——附带libogg库解析.opus文件的C源码

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

算法随想录算法训练营第四十九天| 503.下一个更大元素II 42. 接雨水

503.下一个更大元素II 题目&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之后的第一个…

算法题:16. 最接近的三数之和(Python Java 详解)

解题思路 Step1&#xff1a;先对数组排序&#xff0c;然后设置3个指针&#xff0c;指针1遍历范围为&#xff08;0~数组长度减2&#xff09;。 Step2&#xff1a;指针1位置确定时&#xff0c;指针1后面的数组元素首位各放置一个指针&#xff08;指针2、指针3&#xff09;。 S…

Python笔记——linux/ubuntu下安装mamba,安装bob.learn库

Python笔记——linux/ubuntu下安装mamba&#xff0c;安装bob.learn库 一、安装/卸载anaconda二、安装mamba1. 命令行安装&#xff08;大坑&#xff0c;不推荐&#xff09;2. 命令行下载guihub上的安装包并安装&#xff08;推荐&#xff09;3. 网站下载安装包并安装&#xff08;…

电路正负反馈,电压电流反馈,串并联反馈详细判别方法

正/负反馈&#xff1a;假设输出升高&#xff0c;转一圈回来仍使其升高就是正反馈&#xff0c;反之就是负反馈。作图法&#xff1a;在RL的信号端画一个向上的小箭头&#xff0c;沿着反馈环路&#xff0c;每经过一个元器件就画一个相应的箭头&#xff0c;一直画到放大器的输出端&…

代理模式(静态代理、JDK代理、CGLIB代理)

简介 代理模式有三种不同的形式&#xff1a;静态代理、动态代理&#xff08;JDK代理、接口代理&#xff09;、CGLIB代理 目标&#xff1a;在不修改目标对象的前提下&#xff0c;对目标对象进行扩展。 静态代理 需要定义接口或父类对象&#xff0c;被代理对象和代理对象通过实…

asp.net docker-compose添加dapr配置

docker-compose.yml添加配置 webapplication1-dapr:image: "daprio/daprd:1.9.6"network_mode: "service:webapplication1"depends_on:- webapplication1 docker-compose.override.yml中添加 dapr-placement:command: ["./placement", "-po…

【数据结构】顺序表的学习

前言:在之前我们学习了C语言的各种各样的语法&#xff0c;因此我们今天开始学习数据结构这一个模块&#xff0c;因此我们就从第一个部分来开始学习"顺序表"。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f…

windows和docker环境下springboot整合gdal3.x

链接: gdal官网地址 gdal gdal的一个用c语言编写的库&#xff0c;用于处理地理信息相关的数据包括转换&#xff0c;识别数据&#xff0c;格式化数据以及解析 同时提供第三方语言的SDK包括python&#xff0c;java上述需要编译后使用 java是需要使用jni接口调用实现方法在wind…

mysql---存储引擎

目录 mysql---存储引擎 功能&#xff1a; mysql的存储引擎分类 MYISAM和INNODB做个对比 MYISAM 在磁盘上有三个文件&#xff1a; MYISAM的特点&#xff1a; 支持的存储格式: INNODB innodb的特点 使用场景&#xff1a; 三个文件&#xff1a; 行锁 表锁 排他锁 …

uniapp原生插件之安卓文件操作原生插件

插件介绍 安卓文件操作原生插件&#xff0c;读写文件&#xff0c;文件下载等&#xff0c;支持读取移动设备路径等外部存储设备路径&#xff0c;如U盘路径 插件地址 安卓文件操作原生插件 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 uniapp 安卓文…

互联网医院|湖南互联网医院|智慧医疗改善就医服务

互联网医院系统&#xff0c;是指利用互联网技术和远程医疗技术&#xff0c;提供在线就诊、咨询、诊断和治疗等医疗服务的一种医疗模式。互联网医院系统实际上与医院的HIS系统很相似&#xff0c;是侧重服务于线上问诊的专业HIS&#xff0c;包含传统HIS的基本模块&#xff0c;如挂…

VS Code 开发 Spring Boot 类型的项目

在VS Code中开发Spring Boot的项目&#xff0c; 可以导入如下的扩展&#xff1a; Spring Boot ToolsSpring InitializrSpring Boot Dashboard 比较建议的方式是安装Spring Boot Extension Pack&#xff0c; 这里面就包含了上面的扩展。 安装方式就是在扩展查找 “Spring Boot…

【工具】【IDE】Qt Creator社区版

Qt Creator社区版下载地址&#xff1a;https://download.qt.io/archive/qt/ 参考&#xff1a;https://cloud.tencent.com/developer/article/2084698?areaSource102001.8&traceIduMchNghqp8gWPdFHvSOGg MAC安装并配置Qt&#xff08;超级简单版&#xff09; 1.安装brew&…

精品Python手机选购决策数据的分析与可视化大屏购物商城-爬虫

《[含文档PPT源码等]精品基于Python的手机选购决策数据的分析与可视化-爬虫》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;python 使用框架&#xff1a;Django …

2023-mac rz sz 安装

之前安装过一次&#xff0c;没问题&#xff0c;这次按照之前教程装了就不管上传下载都会卡住&#xff1b; step1: brew install lrzsz step2&#xff1a;在/usr/local/bin 路径下配置两个sh,之前从网上找到的直接用都不对&#xff0c;下面这个是调试过的正式可用的 iterm2…

堆叠注入 [GYCTF2020]Blacklist1

打开题目 判断注入点 输入1&#xff0c;页面回显 输入1 页面报错 输入 1 # 页面正常&#xff0c;说明是单引号的字符型注入 我们输入1; show databases; # 说明有6个数据库 1; show tables; # 说明有三个表 我们直接查看FlagHere的表结构 1;desc FlagHere&#xff1b;# 发…