HTML和CSS (前端共三篇)【详解】
目录
一、前端开发介绍
二、HTML入门
三、HTML基础标签
四、CSS样式修饰
五、HTML表格标签
六、HTML表单标签
一、前端开发介绍
web应用有BS和CS架构两种,其中我们主要涉及的是BS架构。而BS架构里,B(Browser浏览器)是客户端的角色,它负责与用户交互:给用户展示数据、收集用户输入的数据。
前端页面是在浏览器里渲染显示的,而同一页面在不同浏览器里显示的效果是有差异的,所以建议大家都使用chrome浏览器
前端开发有一套Web标准也称为网页标准,由一系列的标准组成,大部分由W3C( World Wide Web Consortium,万维网联盟)负责制定。由三个组成部分:
-
HTML:负责展示内容、收集数据。但是不好看
-
CSS:负责修饰HTML的样式。
-
JavaScript:负责网页的行为(交互效果)
二、HTML入门
1.HTML: HyperText Markup Language,超文本标记语言。
-
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
-
标记语言:由标签构成的语言
-
HTML标签都是预定义好的。例如:使用
<h1>
标签展示标题,使用<img>
展示图片。 -
HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
-
2. HTML快速入门
第一步:创建一个名为HTML的文件夹
第二步:创建一个文本文件,然后修改文件名为hello.html,注意文件的后缀是.html
第三步:选中文件,鼠标右击,选择使用记事本打开文件,并且编写前端代码
<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1></body>
</html>
第四步:然后选中文件,鼠标右击,选择使用浏览器打开文件 ,结果是 Hello HTML
3. 开发工具VSCode
-
Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。
-
官网: https://code.visualstudio.com
右键点击Open with Live Server运行
三、HTML基础标签
1.文本类标签,是html提供的用于展示文本内容的标签,是html里非常常见的基础标签。
2. 路径的写法
无论是前端开发还是后端开发,都会经常用到路径,那么前端开发中路径是怎么写的呢?同样有两种写法:
-
绝对路径:指完整路径
磁盘文件的绝对路径:
C:\img\a.jpg
或者/Users/tom/abc.jpg
。前端开发中不要使用这种路径互联网网址绝对路径(url):
http://www.baidu.com
。注意:url中开头的http或者https等不能省略,必须写 -
相对路径:指想要加载的目标资源,和当前资源的相对位置。有两种写法:
以
./
开头的路径:表示从当前目录加载资源,其中./
可以省略。例如-
./hello.html
表示从当前目录里加载hello.html
页面文件 -
hello.html
等价于./hello.html
以
../
开头的路径:表示从上级目录里加载资源,其中../
不能省略。例如:-
../welcome.html
表示从上组目录里加载welcome.html
-
3. 颜色的写法
4.尺寸的写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文体类标签</title>
</head>
<body><h1>公司简介</h1><hr color="orange" size="2px"><p><b>"中关村黑马程序员训练营"</b>是由<a href="http://www.itcast.cn" target="_blank">传智播客</a>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。<br>目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。</p><p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。</p><p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。</p><p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。 </p>
</body>
</html>
2. 媒体类标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体标签</title>
</head>
<body><img src="img/1.jpg" width="500px"><video src="video/1.mp4" controls width="500px"></video><audio src="audio/1.mp3" controls></audio>
</body>
</html>
四、CSS样式修饰
1.CSS: Cascading Style Sheet,层叠样式表,用于控制页面的样式(表现)
div和span标签
有任何特殊的显示效果和特殊功能,所以可以使用CSS添加几乎任何样式
<div>div里的内容没有任何样式,但是宽度会独占一行
</div>
<span>span里的内容同样没有任何样式,但是宽度是由内容决定的。内容多大,就占多大空间
</span>
2. CSS基础语法
1.CSS的引入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS引入方式</title><!-- <style>div{color: blue;}</style> --><link rel="stylesheet" href="./css/demo.css">
</head>
<body><!-- ctrl + / 是注释快捷键引入方式1:行内样式,用的少在html标签里直接加样式代码 style="css样式属性:值; css样式属性:值;"问题:要给一个标签加样式,就要修改这个标签;如果要加的样式很多,这个标签里的内容会很长如果多个标签要加相同的样式,那么每个标签里都得写样式--><!-- <div style="color: red;">黑马程序员昌平Java418期秦宇迪和雷宇迪</div><div style="color: red;">黑马程序员</div> --><!-- 引入方式2:内部样式,用的多在head标签里增加子标签style,在style里写css样式书写语法是:选择要修饰的标签 {css样式属性: 值;css样式属性: 值;}问题:只能选择当前页面里的标签进行修饰。如果有多个页面都要加相同的样式,每个页面里都得重复写一次--><!-- <div>小红</div><div>小明</div> --><!-- 引入方式3:外联样式,用的更多创建单独的css文件(xxx.css),把样式代码写到css文件里在html里的head标签内使用link标签引入css文件即可--><div>小红15K</div><div>小明15K</div>
</body>
</html>
2.CSS选择器
-
标签选择器:根据标签名称选择要修饰的元素
-
id选择器:根据标签的id属性值选择要修饰的元素
-
class选择器:根据标签的class属性值选择要修饰的元素
-
特别注意的是如果一个标签被选设置同样的设置(比如都设置颜色,颜色不同),既有标签的设置,又有id的设置,又有class的设置,优先级 id > class > 标签
<head><style>div{/*选中所有div标签,设置div里内容显示成红色*/color: red;}#d1 {/*选中id为d1的标签,设置内容颜色为蓝色*/color: blue;}.cls{/*选中class属性值为cls的标签,设置内容颜色为绿色*/color: green;} </style>
</head>
<body><div>hello</div><div>css</div><div id="d1">hello</div><span class="cls">hello</span><span class="cls">world</span>
</body>
3.CSS常用属性
1.常用样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用样式</title><style>div {color: red;font-size: 50px;font-family: '楷体';background-color: beige;/* 首行缩进。2em是2个中文字符的距离 */text-indent: 2em;/* 行高 */line-height: 100px;/* 当一行内容不满时,水平就居中显示 */text-align: center;}a{/* 设置文字的样式。underline下划线;overline上划线;line-throgh删除线;none无线条 */text-decoration: none;}</style>
</head>
<body><div>418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K</div><a href="http://www.baidu.com">跳转到百度</a>
</body>
</html>
2 页面布局与盒子模型
所谓“盒子模型”, 是指CSS把页面中所有的元素(标签),都看做是一个盒子,从而通过设置盒子的大小等样式进行页面布局。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>#inner{width: 200px;height:200px;background-color: yellow;}#box{background-color: lightgreen;width: 200px;height: 200px;border: green 50px solid;padding: 50px;margin: 50px;}</style>
</head>
<body><div id="box"><div id="inner"></div></div>
</body>
</html>
五、HTML表格标签
1.场景:在网页中以表格(行、列)形式整齐展示数据
2.表格标签
<!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>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="图片路径" width="100px"> </td><td>某公司</td><td>某某有限公司</td></tr><tr><td>2</td><td> <img src="图片路径" width="100px"> </td><td>公司</td><td>某某团控股有限公司</td></tr></table></body>
</html>
六、HTML表单标签
表单,是用于收集用户所输入的数据的组件
1.标签介绍
<!--
01.表单标签:form是一个容器,里边用来放各种各样的表单项。脱离开表单项,form标签本身没有任何作用属性:name:名称。可以不给名称action:表单数据提交的路径。如果没有路径,表示提交给当前页面自己method:表单数据提交的方式。常用方式有get、post
-->
<form name="myform" action="" method="get"></form>
2.get和post的区别(重点)
get方式:
数据是在HTTP请求行里提交的,会显示到地址栏
安全性相对较低
参数长度有限制
post方式:
数据是在HTTP请求体里提交的,不会显示到地址栏
安全性相对较高
参数长度理论上没有限制
3.input标签
4.select下拉框标签
5.tetxtarea文本域标签
如果需要让用户输入大段的文本内容的话,可以使用textarea文本域标签,它允许用户输入多行内容
<form method="post" action=""><!--文本框(text),密码框(password):name:表单项的名称。如果这个表单项的数据要提交,就必须有name属性value:默认值-->帐号:<input type="text" name="username" value="默认值"> <br>密码:<input type="password" name="password" value="123456"><br><!--单选按钮(radio),复选框(checkbox):name:表单项名称。如果这个表单项的数据要提交,就必须有namename相同的radio属于同一组;同组radio的特性是:选择互斥name相同的checkbox属于同一组,但是同组的目的仅仅是方便服务端接收数据而已value:选项的值,每个选项都要有值。选中哪个选项,提交表单时就提交哪个选项的value值默认值:哪个选项想要默认选中,就在哪个选项上加属性 checked="checked" 或者简写:checked-->性别:<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女 <br>爱好:<input type="checkbox" name="hobby" value="sing" checked>唱<input type="checkbox" name="hobby" value="dance" checked>跳<input type="checkbox" name="hobby" value="rap" checked>rap<input type="checkbox" name="hobby" value="ball">篮球 <br><!--文件选择框(file)name:如果这个表单项的数据要提交,就必须有name注意:默认情况下,文件选择框提交的仅仅是文件名称,而不是上传文件-->文件:<input type="file" name="file"><!--隐藏域:不显示到页面上的表单项,但是在提交表单时,它的数据可以被提交(只要有name)type:hiddenname:如果数据要提交,就必须有namevalue:隐藏域的值实际使用场景:等学习到的时候再说--><input type="hidden" name="hide" value="隐藏域的值"><!--按钮:普通按钮(button):没有任何功能的按钮,所以将来可以使用JavaScript自定义任何功能提交按钮(submit):点击时会提交表单。按钮在哪个表单里,就提交哪个表单重置按钮(reset):点击时会把表单里所有表单项数据,恢复成默认值常用属性:name:可以不设置。value:是按钮上的文字--><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><br><br><hr><!--下拉框:select标签:下拉框本身name:如果下拉框的数据要提交,就必须有name属性option标签:下拉选项,要放在select标签里边使用value:选项的值。选中哪个选项,就提交哪个选项的value值默认值:如果没有任何设置,默认选中第一个选项如果要手动设置默认值:哪个选项想要默认选中,就在哪个选项option上加属性 selected="selected"或者简写 selected-->地址:<select name="address"><option value="tj">天津市</option><option value="bj" selected>北京市</option><option value="sh">上海市</option></select><!--文本域:textareaname:如果数据要提交,就必须有name属性-->slogan:<textarea name="slogan" rows="5" cols="10" maxlength="5">默认值</textarea>
</form>
七、文档阅读
这里只是教大家一个入门,还有很多标签我们没有学习,如果忘记和查找去一个官网
文档地址: w3school 在线教程
相关文章:

HTML和CSS (前端共三篇)【详解】
目录 一、前端开发介绍 二、HTML入门 三、HTML基础标签 四、CSS样式修饰 五、HTML表格标签 六、HTML表单标签 一、前端开发介绍 web应用有BS和CS架构两种,其中我们主要涉及的是BS架构。而BS架构里,B(Browser浏览器)是客户端的…...

Linux——进程控制(二)进程等待
目录 前言 一、进程等待 二、如何进行进程等待 1.wait 2.waitpid 2.1第二个参数 2.2第三个参数 3. 等待多个进程 三、为什么不用全局变量获取子进程的退出信息 前言 前面我们花了大量的时间去学习进程的退出,退出并不难,但更深入的学习能为本…...
多线程导入excel
设置线程池参数,创建线程池 corePoolSize要保留在池中的线程数,即使它们是空闲的,除非{code - allowCoreThreadTimeOut}被设置maximumPoolSize允许在池中的最大线程数keepAliveTime当线程数大于核心时,这是多余的空闲线程将在终止…...

设计模式(十五)状态模式
请直接看原文:设计模式系列 ------------------------------------------------------------------------------------------------------------------------------- 前言 建议在阅读本文前先阅读设计模式(十一)策略模式这篇文章,虽说状态…...

Java基于SpringBoot的在线文档管理系统的设计与实现论文
摘 要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,在线文档管理当然也不能排除在外。在线文档管理系统是以实际运用为开发背景,运用软件工程原理和开发方法&am…...
突破编程_C++_STL教程( list 的高级特性)
1 std::list 的排序 1.1 基础类型以及 std::string 类型的排序 std::list的排序可以通过调用其成员函数sort()来实现。sort()函数使用默认的比较操作符(<)对std::list中的元素进行排序。这意味着,如果元素类型定义了<操作符ÿ…...

Scratch 第十六课-弹珠台游戏
第十六课-弹珠台游戏 大家好,今天我们一起做一款弹珠台scratch游戏,我们也可以叫它弹球游戏!这款游戏在刚出来的时候非常火爆。小朋友们要认真学习下! 这节课的学习目标 物体碰撞如何处理转向问题。复习键盘对角色的控制方式。…...
对简单工厂模式、工厂方法模式的思考
目录 1 背景1.1 题目描述1.2 输入描述1.3 输出描述1.4 输入示例1.5 输出示例 2 简单工厂模式3 工厂方法模式4 思考4.1 改进工厂方法模式 1 背景 题目源自:【设计模式专题之工厂方法模式】2.积木工厂 1.1 题目描述 小明家有两个工厂,一个用于生产圆形积木…...

【详识JAVA语言】面向对象程序三大特性之二:继承
继承 为什么需要继承 Java中使用类对现实世界中实体来进行描述,类经过实例化之后的产物对象,则可以用来表示现实中的实体,但是 现实世界错综复杂,事物之间可能会存在一些关联,那在设计程序是就需要考虑。 比如&…...

【剑指offer--C/C++】JZ3 数组中重复的数字
一、题目 二、本人思路及代码 这道题目它要求的时间空间利用率都是n,那么可以考虑创建一个长度为n的数组repeat初始化为0,下标代码出现的数字,下标对应的数组内容代表该下标数字出现的次数。然后遍历提供的数组,每出现一个数字&a…...
基于SpringBoot的在线拍卖系统设计与实现(源码)
项目源码:https://gitee.com/oklongmm/biye2 引言 随着互联网技术的发展,电子商务得以快速发展,其中之一的在线拍卖系统也逐渐得到了广泛的应用。但是,现有的在线拍卖系统在操作复杂性、安全性和稳定性方面存在一定的问题。为了…...
卢森堡比利时土耳其媒体宣发稿助力跨境出海推广新闻营销
【本篇由言同数字科技有限公司原创】随着全球化进程的加速,越来越多的品牌开始考虑在海外市场扩展业务。对于品牌来说,跨境海外推广是必要的,因为它可以帮助品牌打开更大的市场、吸引更多的消费者、提高品牌知名度和形象,并在全球…...

冒泡排序(C语言详解)
原理:从左到右一次比较,如果左侧数字比右侧数字大(小),则两数交换,否则比较下一 组数字,每一次大循环比较可以将乱序的最右侧数字改为最大(最小),…...

STC-ISP原厂代码研究之 V3.7d汇编版本
最近在研究STC的ISP程序,用来做一个上位机烧录软件,逆向了上位机软件,有些地方始终没看明白,因此尝试读取它的ISP代码,但是没有读取成功。应该是目前的芯片架构已经将引导代码放入在了单独的存储块中,而这存储块有硬件级的使能线,在面包板社区-宏晶STC单片机的ISP的BIN文…...

【word】引用文献如何标注右上角
一、在Word文档中引用文献并标注在右上角的具体步骤如下 1、将光标移动到需要添加文献标注的位置: 2、在文档上方的工具栏中选择“引用”选项: 3、点击“插入脚注”或“插入尾注”: ①如果选择的是脚注,则脚注区域会出现在本页的…...
MySQL 5.5、5.6、5.7的主从复制改进
主从复制面临的问题 MySQL一直以来的主从复制都是被诟病,原因是: 1、主从复制效率低 早期mysql的复制是通过将binlog语句异步推送到从库。从库启动一个IO线程将接收到的数据记录到relaylog中;另外启动一个SQL线程负责顺序执行relaylog中的语句实现对数据的拷贝。 这里的…...

性能分析排查思路之日志(1)
本文是性能问题分析排查思路的展开内容之一,主要分为日志1期,机器4期、环境2期共7篇系列文章,本期是第一篇,讲日志的分析方法和经验。 系列文章传送门: 一图梳理性能问题分析排查思路-总体概述(0ÿ…...

Vue中如何实现条件渲染?
在Vue中实现条件渲染非常简单且灵活,主要通过Vue的指令来实现。在Vue中,我们可以使用v-if和v-else指令来根据条件来渲染不同的内容。下面就让我们通过一个简单的示例来演示如何在Vue中实现条件渲染: <!DOCTYPE html> <html lang&qu…...

Postman上传文件的操作方法
前言 调用某个接口,测试上传文件功能。一时间不知如何上传文件,本文做个操作记录,期望与你有益。 步骤一、设置Headers key:Content-Type value:multipart/form-data 步骤二、设置Body 选择form-data key:file下拉框选择file类型value&…...
linux系统Jenkins工具介绍
Jenkins概念介绍 Jenkins概念Jenkins目的特性产品发布流程 Jenkins概念 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台。这是一个免费的源代码,可以处理任何类型的构建或持续集成。集成Jenkins可以用于一些…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
c# 局部函数 定义、功能与示例
C# 局部函数:定义、功能与示例 1. 定义与功能 局部函数(Local Function)是嵌套在另一个方法内部的私有方法,仅在包含它的方法内可见。 • 作用:封装仅用于当前方法的逻辑,避免污染类作用域,提升…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林:一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好,未来的算法大神! 在数据结构的世界里,“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的,它…...

《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
数据库正常,但后端收不到数据原因及解决
从代码和日志来看,后端SQL查询确实返回了数据,但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离,并且ai辅助开发的时候,很容易出现前后端变量名不一致情况,还不报错,只是单…...
基于 HTTP 的单向流式通信协议SSE详解
SSE(Server-Sent Events)详解 🧠 什么是 SSE? SSE(Server-Sent Events) 是 HTML5 标准中定义的一种通信机制,它允许服务器主动将事件推送给客户端(浏览器)。与传统的 H…...