前端小白必须掌握的HTML+CSS技巧！

最新推荐文章于 2024-07-14 10:34:53 发布

澄大橙

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量153

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/weixin_44509862/article/details/105385665

版权

一、什么是web前端？

web（互联网总称）：是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。用户在查找或浏览信息的时候，展现出图形化，用直观的界面方式表达出来。
前端：对于网站(页面)来说，有2部分，一个是网站的页面设计，用户的视觉效果等(美工完成)，第二个是网页的结构设计，对页面用代码的实现（web前端开发）。
二、什么是web前端开发？

是网页的结构设计，对网页用代码实现。
网页代码结构：HTML、CSS、JavaScript以及现在最新的HTML5、CSS3等。
三、网页结构分析！（需要掌握的基本技术）

1.HTML “标签”相当于你建房子的“材料”砖头等。

2.CSS “样式”相当于你要给你的房子设计、卧室、客厅、刷漆颜色、等，把这个房子建起来，再实现漂亮外观。

3.JavaScript “动态效果”相当于你给你的房子安装灯泡，点击打开灯，点击关掉灯（识别脸部开门、等）

HTML+CSS即可实现简单的静态可互动且有一定布局样式的页面

HTML的一般格式
置顶声明
< !DOCTYPE > 网页声明
< !DOCTYPE > ------ 指示 web 浏览器关于此页面将使用哪个 HTML 版本进行编写的指令。
< !DOCTYPE html > ------ HTML5文档声明，所有浏览器均开启标准模式。
p.s. 原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。

< meta > 定义元信息
< meta>用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新、设置视窗（移动端自适应）等。

        <meta charset="utf-8">

1
meta标签必须放在最前面，任何其他内容都必须跟随其后！确保支持响应式布局
meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、name属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息。（通过viewport元素控制视窗）

    <meta name="参数" content="参数变量值">；
    
    <meta name="viewport" content="width=device-width, initial-scale=1">；

    width=device-width设备屏幕的宽度  height=device-height设备屏幕的高度
    initial-scale：表示初始的缩放比例 minimum-scale：表示最小的缩放比例
    maximum-scale：表示最大的缩放比例 user-scalable：表示用户是否可以调整缩放比例

2、http-equiv属性：
http-equiv 为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部（相对于http的文件头，设定属性）。

    <meta http-equiv="参数" content="参数变量值">；
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">；

CSS的一般格式
有三种方式来插入样式表：
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>
  <style type="text/css">
      body {background-color: red}
      p {margin-left: 20px}
  </style>
</head>

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
     This is a paragraph
</p>

哥伦比亚新增201例确诊病例累计确诊1780例

澄大橙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端小白必须掌握的HTML+CSS技巧！

一、什么是web前端？web（互联网总称）：是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。用户在查找或浏览信息的时候，展现出图形化，用直观的界面方式表达出来。前端：对于网站(页面)来说，有2部分，一个是网站的页面设计，用户的视觉效果等(美工完成)，第二个是网页的结构设计，对页面用代码的实现（web前端开发）。二、什么是web前端开发？是网页的结构设计，对网...
复制链接

扫一扫