2021-07-26

最新推荐文章于 2024-10-09 20:10:15 发布

脑後的记忆丨找不出来。

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量50

点赞数

文章标签： web css html

本文链接：https://blog.csdn.net/qq_52850120/article/details/119116392

版权

本文介绍了Web前端的基本概念，包括HTML文档结构、CSS的三种引入方式和一些基本样式属性如border和padding。此外，还讨论了开发环境中的常见浏览器和编辑工具，以及margin的用法和注意事项。对于初学者，了解这些基础知识是入门Web前端开发的重要步骤。

摘要由CSDN通过智能技术生成

前言

本文章讲述web是什么，开发环境介绍，HTML文档结构以及css的三种引入方式。

提示：以下是本篇文章正文内容，下面案例可供参考

一、web前端是什么？

百度百科是这样定义的：主要职责是利用 (X)HTML/CSS/Java/Flash 等各种 Web 技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发 Java 以及 Flash 模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的 Web 开发，致力于通过技术改善用户体验。

通常意义上来讲，web 前端工程师，不仅要会开发而且还要会移动开发。也就是说，我们学习 web 的时候也是需要学习 html5 技术的。据了解，现在企业招聘的用人标准都是会包含会 html5 开发这一条。

就是说 html5 与 web 前端技术他们是一种从属的关系，html5 是属于前端 web 开发的一部分，但 web 开发所包含的技术就很广阔了。除了 html5 还需要学习其他的技术如：CSS、div、Java、jQuery、网站性能优化、SEO、PHP 基础和服务器端的基础知识。

二、开发环境介绍

1.常见浏览器

Chrome，欧朋，Firefox，Safari，IE浏览器。

2.常见代码编辑工具

sublime，webstorm，vscode，atom，hbuilderX

三、html文档结构

1.什么样的文件是一个网页？

只要扩展名为.html的文件，文件内容不管是什么都可被浏览器识别。

2.html文档基本结构

如图：

“<>”在html中为标记，尖括号里的内容为标签，整个HTML都是由标签组成，标签分为单标签和双标签，单标签如<mete......>,只有一半，中间不放内容。双标签如<title></title>中间放东西。<!DOCTYPE html>是html5的声明，每一个版本都有一个声明。最大的标签为<html>，包含了所有内容。<head>为头，设置和标题放入头中。头中的<meta charset="utf-8">标签作用是设置编码格式为utf-8（中文编码格式），<title>标签为标题，<title>某东</title>说明打开的网页标题为“某东”；<body>为身体，所有内容都写在body里。内容一般也放在标签<div></div>,为了方便设置样式，如<div style="color:green">大郎该吃药了</div>。

3.如何在HTML文件中使用注释？

“commed+？”或者“control+？”为注释快捷键。

四.css三种引入方式

1.css的内联样式

在标签内使用style属性设置样式，style=“属性名：属性值；属性名：属性值；.......”。其优先级最高。

<body>
       
       <div style =“color:red;background:blue;”>大郎该吃药了</div>
   </body>

缺点：不能统一设置样式；代码臃肿，不好维护。

2.css的内部样式

在<head>里写style的标签，在标签内写样式，如：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>北京</title>
       <style>   div{width: 200px;
   height: 200px;}</style>
   </head>
   <body>
       
       <div style ="color:red;background:blue;">大郎该吃药了</div>
   </body>
</html>

所得结果如下：

内联样式要比内部样式优先级高，如图所示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>北京</title>
       <style>   div{width: 200px;
   height: 200px;
       background: mediumaquamarine;}</style>
   </head>
   <body>
       
       <div style ="color:red;background:blue;">大郎该吃药了</div>
       <div>莲莲，俺大郎来了！</div>
   </body>
</html>

所得结果如下：

优点：可以统一样式。

缺点：虽然可以统一设置样式，但是多个html文件中无法复用。

3.css的外部样式

就是把 CSS 代码保存在一个单独的文件中，文件的扩展名为.css ，然后在 HTML 页面中引入这个 CSS 文件即可。

例如：在目录project下新建index.css，在index.css里写样式，之后再插入index.html中。

如图所示：

注意：外部样式并不比内部样式优先级高，二者优先级一样如果外部样式和内部样式都存在头<head>里，谁放在最下面谁决定样式。

优点：利用率最高，在实际项目开发中使用最多。

五、border

设置边框：

border：像素边框颜色边框线设置（dashed虚线，solid实线）。

border-方向(left,right,top,bottom)：颜色像素线的样式（设置添加方向的边框）。

注意：设置边框的样式没有顺序，如颜色像素线的样式可换成像素线的样式颜色，且可以分开写。

如图所示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           div{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               border-left: 2px #CD5C5C dashed;
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

结果如下：

用border设置三角形：

在head里设置，不用设置背景颜色，背景宽度为0，将边框的上，左，右三个方向设置成透明颜色transparent，下方的颜色根据需要设置，代码如下：

<style type="text/css">
           div{
               width: 0;
               border-left: 100px transparent solid;
               border-top:100px transparent solid;
               border-right: 100px transparent solid;
               border-bottom: 100px darkgreen solid;
           }
       </style>

结果如下：

六、padding

padding 属性定义元素边框与元素内容之间的空间。这是css中的内边距，就好比你刚买手机的时候，你从外边看到一个盒子，但是打开的时候里面还有一层泡沫，泡沫里面才是手机，那层泡沫就可以理解为padding。该属性可采取 4 个值：如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。

/* 第一个值代表上下第二个值代表左右 */
           /*padding: 20px 100px;*/
           /* 从上开按时顺时针设置 */
/*padding:10px 20px 30px 40px; */
           /* 分别设置padding */
           /* padding-left,padding-right,padding-top,padding-bottom */

正常盒模型：设置padding和border会让元素变大。

IE盒模型：设置padding和border不会让元素变大，会压缩内容区域。