HTML基础知识和CSS常见操作

最新推荐文章于 2024-01-14 23:47:16 发布
最新推荐文章于 2024-01-14 23:47:16 发布
阅读量495 收藏 7
点赞数 3
分类专栏： 前端 文章标签： HTML加载顺序 JS和jQuery顺序 css基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39915585/article/details/89423333
版权

在一个项目的开发中，由于没有专门做前端的同学，于是自己简单粗暴地学习了一些前端的基础知识，可以做一个简单的页面啦！把之前的笔记贴出来和后台开发的兄弟们共勉！

目录

一、css基础知识与常用操作

1、HTML元素可以看作盒子，"box model"

2、如何将元素与样式关联

3、常用元素及其样式设置

二、HTML基础知识

1、HTML的加载顺序

2、css、jQuery、js文件的位置与引入顺序

3、控件大全

 

一、css基础知识与常用操作

1、HTML元素可以看作盒子，"box model"

有这些东西可以定义：

（1）margin：外边距，没有背景颜色，是完全透明的；

  • 设置方式
    • margin:25px 50px 75px 100px;（上右下左）；3个值（上|左右|下）;两个值（上下|左右）
    • margin-top/bottom/right/left: 25px
  • 取值：
    • auto：设置为浏览器边距，这样做的结果会依赖于浏览器
    • length：定义一个固定的margin（使用像素，pt，em等）
    • %：定义一个使用百分比的边距

（2）border：边框，指定一个元素边框的样式和颜色

  • 设置选项
    • border-style 边框样式
    •  border-width 边框宽度：两种方式，1-指定长度值（px, pt, cm, em） ；2-使用关键字（thick 、medium 和 thin，不具体
    • border-color 边框颜色：三种方式，1-颜色的名称（如 "red"）；2-RGB 值（如 "rgb(255,0,0)"）；3-Hex - 指定16进制值,（如 "#ff0000"）
  • 分别设置
    • 边框分别设置样式：border-style:dotted solid double dashed;
    • 宽度：指定某条边框：border-left-width:15px;
    • 颜色：分别设置颜色：border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
  • 特殊的：
    • 边框圆角：border-radius: 8px

（3）padding 填充：元素边框与元素内容之间的空间，即上下左右的内边距，没有颜色哦

  • 设置方式：
    • padding-top/bottom/right/left: 25px
    • padding:25px 50px 75px 100px;
  • 取值情况：length 和 %

2、如何将元素与样式关联

（1）body：直接body{ xxxx:xxxx; }

（2）通过元素的id：

  • #元素ID {xxx: xxx; yyy:yyyy;}
  • #元素A的ID,#元素B的ID,#元素C的ID {xxx: xxx; yyy:yyyy;}

（3）通过标签类型

  • input[type="number"] {xxx: xxx; yyy:yyyy;}
  • input[type="number"] ,input[type="password"] {xxx: xxx; yyy:yyyy;}

（3）在标签中写class="xx"

  • 第一步：. myhref{xxx: xxx; yyy:yyyy;}  !!有个点
  • 第二步：<button class="myhref"   ..... >

3、常用元素及其样式设置

（1）body：背景颜色、背景图（链接、位置、大小、重复）

body
{
background-color:#ffffff;
background-image:url('hhbd/images/codeInitialization/lansebeijing.png');
background-repeat:no-repeat;    /* 背景图片小于屏幕事，不重复平铺，只显示一次 */
background-position:top;
background-size:100% 40%;     /* 中间没有逗号隔开的*/
}

（2）div（和body差不多，都是背景性质的）

#back_style{
width:90%;   /* 占屏幕宽度的百分比*/
height:80%;
background-image:url('hhbd/images/recharge/beijing.png');
background-repeat:no-repeat;
background-position:top;
background-size:cover; /*等比扩展图片来填满元素*/
}

（3）文字

  • 颜色、字号、加粗、对齐
  • 装饰text-decoration（上划线overline、删除线line-through、下划线underline、闪烁blink、无none）
#title{
color: #ffffff;
font-size: 2.1em;
font-weight:bold;
text-align:center; /* 或者<h1 align="center">*/
}

（4）输入框

  • box-sizing:更改元素的默认css模型，建议都用border-box，则这个元素的实际宽=width-(border+padding)
  • 长宽、背景颜色、圆角、字号、字体颜色、字体对齐、边框颜色
  • 其他细节：生成框类型display、去掉默认设置、元素边框外画线outline
input[type="id"] {
box-sizing: border-box;
width:90%;
height:2.7em;
background-color: #2364b2;
border-radius:10px;
font-size:1.4em;
color:#ffffff;
text-align:center;
text-decoration:none;
-web-kit-appearance:none;
-moz-appearance: none;
display:block;  block指块级元素，前后有换行符
outline:0;
padding:0 1em;
}

（5）按钮：长宽、圆角、位置、背景颜色、圆角、文字颜色、对齐、字号、按钮阴影

#myButton
{
margin:0 auto;
width: 90%;
height:3em;
background-color: #ffffff;
border-radius:6px;
padding: 10px 40px;
border: none;

color:#318fff ;
text-decoration: none;
text-align: center;
font-size: 1.5em;
font-weight:bold;

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

 

二、HTML基础知识

1、HTML的加载顺序

  • 从上到下，依次加载
  • 重要的内容应该先加载，由此产生HTML代码排序问题。

2、css、jQuery、js文件的位置与引入顺序模板

  • 宏观上先后：css --> jQuery --> js
  • 具体分析（不考虑太复杂的情况）

 

css 

jQuery

js

 

推荐位置

放在<head>中

先公共css，再独立css

js之前

页面底部

先公共，再独立

jQuery之后

页面最底部

先公共，再独立

原因

打开网页时，浏览器先下载好 CSS 样式表，之后下载的网页内容，就会立刻加上 CSS 的样式效果。

如果不先加载css，则可能出现FOUC（无样式闪烁），加载出一堆凌乱内容，等加载到样式时才慢慢变成正常样式。

jQuery 是一个比较常用的 JavaScript 库，我们写的js代码可能就基于它，所以一定在js之前引入。

 

JavaScript 文件通常比较大，浏览器下载比较费时间。

所以放在底部，网页先显示内容，再加载js对当前页面进行处理

  • 标签顺序的模板
<!doctype html>    //声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
<html lang="en">  //所用语言为英语
<head>
  <meta charset="UTF-8">   //  meta可提供有关页面的元信息（meta-information），如编码、关键词、描述、作者信息
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  //让IE使用最新的渲染模式
  <meta name="viewport" content="width=device-width, initial-scale=1"> //针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1
  <meta name="renderer" content="webkit">  //可以让部分国产浏览器默认采用高速模式渲染页面
  <title>标题</title>
  <link rel="stylesheet" type="text/css" media="screen" href="style.css"/> // css
</head>
<body>
  
<script src="hhbd/staticsjs/jquery-2.1.4.js"></script>

<script type="text/javascript" src="jquery/插件.js"></script>
<script type="text/javascript" src="自己编写的js/js.js"></script>

</body>
</html>

3、控件大全

 

 

 

 

西西噜噜
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML+CSS+JavaScript基础知识
u010975449的专栏
07-21 7914
第一部分：HTML 一、简介HTML 1、HTML（Hyper Text Mark-up Language超文本标记语言）的缩写（标记：就是用来描述网页内容的一些特定符号）。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。 2、HTML文档的创建方式： 手工直接编写（例如记事本）
HTML+CSS-基础篇
可可的博客
11-15 660
HTML+CSS基础篇（干货） 一.基本架构 <!doctype html> <html> <head> <meta charset="utf-8"><!--制定编码格式utf-8--> <title>无标题文档</title><!--文档名--> </head> <style><!--这里可以放页面引用的css样式部分--></style> <body&gt
HTML和CSS基础知识
最新发布
m0_59583208的博客
01-14 346
（2） 绝对定位：position: absolute---- 参考body标签的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）----参考自己默认的原位置进行定位---不释放原有空间位置---没有脱标（脱离标准流布局）----参考浏览器窗口的左上角原点位置进行定位---释放原有空间位置---脱标（脱离标准流布局）（1）后代选择器---选择器1 选择器2{样式属性声明}，选择器1中的所有选择器2。（3）id选择器（#id名{样式属性声明}）---id名称在项目中是唯一的。
一、HTML+CSS基础知识学习笔记
每日编程
05-23 5742
注：如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向，一定要有一个擅长的能够用来吃饭的，其他的能掌握多少就是多少，像我这样的什么都学，什么都不知道没什么卵用的。 1.HTML：Hyper Text Markup Language(超文本标记语言.) 文本:就是一个文件，包含一部分的文本内容. 标记语言：标记语言都是由标签组成. 一般情况下，标签分为开始和结束
HTML和CSS基础概念
wangzunkuan的博客
03-08 1262
Html、CSS和JS的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaS...
HTML5+CSS3入门基础知识
12-29
本节课程将介绍 HTML5 和 CSS3 的基础知识，帮助读者快速入门和掌握这两种技术。 HTML5 基础 HTML5 是 HTML 的最新版本，旨在提高网页的可读性、可访问性和可维护性。HTML5 新增了许多新的特性和元素，如音频、...
html和css知识点总结.docx
04-03
HTML 和 CSS 是构建网页的基本语言，它们在...这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
html&css入门基础知识点.pdf
10-04
HTML和CSS基础知识点 HTML是用来描述网页的一种语言，指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。HTML使用标记标签来描述网页的结构和内容。 标记语言是一套...
html和css基础
07-25
一、HTML基础知识点 1. HTML文档声明： HTML文档必须以DOCTYPE声明开头，以便遵守W3C标准。常见的DOCTYPE声明有两种，一种是常规网页声明，另一种是框架页声明。 2. 编码声明：HTML文档需要声明编码字符集，以便...
【HTML】html基本操作
weixin_45495526的博客
02-12 612
1.标题 eg:<h1>一号标题</h1> 加tab变标签 从h1-h6依次增大字号。 自己造标题不好用的啦，无法运行的。 2.空格和回车不能直接用键盘的，要用代码 &nbsp; 一个空格 一个换行，一个回车 <br /> 3.测试细节以浏览器最终效果为主 4.p标签：负责放文章段落 标签语义化：在合适的地方使用合理的标签，就叫满足标签语义化。考研在搜索引擎排名中排名更靠前，点击率更高，带来更高的收益。 5.代码注释 快捷键：Ctrl + ？取消注释再按一次（
html ，css基本知识
weixin_53946630的博客
03-27 131
[html 基本知识 css 基本知识 javascript 基本知识 HTTP 协议相关知识 请求格式 响应格式 常见请求方法及含义 常见响应状态及含义 常见HTTP头 静态资源 vs 动态资源 什么是 JSP 技术（模板技术） Servlet 的生命周期TOC](这里写自定义## 标题 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生
HTML、CSS：基础知识
KaiSarH
12-13 332
重新听的HTML课,作为一个半路出家的人,还是收获很大的. 浏览器内核 — 渲染引擎 — 将代码渲染为网页 网页主要由三部分组成: 结构(Structure) 表现(Presentation) 行为(Behavior) 结构 : HTML 表现 : CSS 行为 : js(dom + es) ㈠ 结构 < !DOCTYPE html> 文档类型声明 <hr> 横线标签 &...
自己总结的HTML+CSS详细基础知识
li_aoqi的博客
03-23 170
HTML5+ CSS3 前端详细笔记 一、 什么是HTMLl5？ HTML5 ( 超文本 标记 语言) 二、 前端三要素： HTML5 (HyperText Markup Language) -----超文本标记语言 CSS3 （Cascading Style Sheets）---------层叠样式表 JavaScript（脚本语言）------------------动态交互 三、HTML标记标签（标记语言） ​ ①标记标签一般成对出现 （也存在单标记） ​ ②HTML 标签是由尖括号
HTML与CSS基础
Zzy2372的博客
10-09 703
H5+CSS3 第一章：HTML基础 1，HTML简介 HTML (Hyper Text Markup Language) 超文本标记语言 超文本 不仅仅包含文本信息，还包括图片，视频，音频… 标记：用来描述超文本的标签 百度一下 语言：高级计算机语言 2，HTML历史 创始人： Tim Berners-Lee（蒂姆·伯纳斯-李）【互联网之父、W3C创始人、HTML设计者】 1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他
HTML基础教学
Skywalker10的专栏
05-25 8539
课题:HTML基础课时:8课时一、  教学目标1.  了解WEB静态网页结构。2.  掌握HTML网页布局。3.  掌握HTML中最常用的标签。4.  掌握CSS在标签中的用法。5.  掌握网络教程的学习及使用方法。6.  了解HTML语义化。二、    教学重点1.  掌握HTML网页布局。2.  掌握HTML中最常用的标签。3.  掌握CSS在标签中的用法三、    教学难点1. 如何运用HT...
HTML与CSS基础（超详细）-入门
wutong0108的博客
12-06 1656
文章目录一、HTML是什么？二、HTML文档结构三、HTML标签是什么？四、链接 一、HTML是什么？ 二、HTML文档结构 三、HTML标签是什么？ 四、链接 ##对于HTML用法的总结 ##一、HTML是什么？ 1.HTML是用来描述网页的一种语言。 2.HTML=Hyper Text Markup Language 即为超文本标记语言。 3.HTML不是一种编程语言，而是一种标记语言 (标记语言是一套标记书签)。 4.HTML使用标记标签来描述页面。 ##二、HTML文档结构 1.<!DO
CSS基础-27CSS常用操作-图片
翟浩浩Android专栏
08-02 359
html> lang="en"> charset="UTF-8"> href="css06.css" type="text/css" rel="stylesheet"> class="rongqi"> class="tupian"> href="http://www.baidu.com" target="_self">
HTML&CSS精选笔记_CSS入门
:)一位靓仔偶然路过的博客
07-18 4359
CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
HTML+CSS测试.docx
03-30
综上所述，HTML CSS测试文件覆盖了HTML和CSS的基本知识点，包括基本标签、样式属性以及网页制作常见技巧。通过这些选择题的测试，可以对于学习者对HTML和CSS的理解情况进行初步的评估。同时，这些选择题也为学习者...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值