前端开发编程基础知识（HTML+CSS）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： MVC
作者：BOLS
撰写时间：2021/5/18
1--3 概念，记住有印象即可
1、主流浏览器及内核(记住)
谷歌chrome -- webkit -- blink
微软IE -- trident
火狐firefox -- gecko
苹果safari -- webkit
欧朋Opera -- presto -- webkit -- blink
2、网页概述
网页元素： 文本、图片、输入框、按钮、超链接、音频、视频。。。
w3c: 万维网联盟，专门制定web标准的机构
web标准(w3c标准)： w3c组织针对网页三层结构制定的一系列的开发标准
网页三层结构：结构层、表现层、行为层
网页三门核心技术：html、css、javascript
3、html简介
html ：超文本标记语言 （HyperText Markup Language）
html是用来描述网页的语言
由一套标记标签组成
不是编程语言
4、html文档（网页）
创建 后缀名 为 .html的文件
生成基本结构代码 ! + enter
！！！！代码编辑开始，多看多记，多敲多敲多敲
5、网页基本结构
备注<!-- -->内的是注释说明部分，可以省略不写
<!DOCTYPE html> <!-- 文档类型声明：告诉浏览器
以html的哪个标准解析网页（html5） -->
<html lang="zh-CN"> <!-- 根标签：代表网页的
开始和结束 lang="en/zh-CN" 指定网页语言 -->
<head> <!-- 网页的头部：一般用来放置
网页的
一些元数据（比如字符设置、
标题、样式表、关键字...） -->
<meta charset="UTF-8"> <!--
设置网页的字符集（编码方式）
避免网页乱码： utf-8
国际编码 gb2312 中文编码（简体）
gbk 国标扩
（简体和繁体中文） -->
<title>我的第一个网页</title> <!--
网页标题：显示在浏览器
选项卡页卡和收藏夹的书签上 -->
</head>
<body>
网页主体，所有在浏览器
可视区显示的内容都放在这里
</body>
</html>
注意：5部分的代码在 Visual Studio Code 编辑器里编辑完后，可以直接在浏览器中运行
下面的标签都写在<body></body>双标签中
6、html基本语法
6.1 标签 <单词>
单标签（空标签） ：只有开始标签，没有结束标签
<meta>
<br>
<img>
双标签 ： 由一个开始标签和结束标签以及之间的内容组成
<html>...</html>
<head>...</head>
<body>...</body>
...
6.2 属性
属性用来给标签添加附加信息
属性必须在开始标签上定义
多组属性用空格隔开
每一组属性由 属性名="值" 组成
<meta charset="UTF-8">
<html lang="zh-CN">
<img src="" alt="">
<person name="Rose" age="18" hair="brown"> </person>
6.3注释
<!-- html注释 -->
快捷键：
单行 ctrl+/
块注释 ctrl + shift + /
7、常用标签
7.1、标题(h1-h6)
h1标签在一个网页中只能使用一次，一般用来定义网站的主标题或者logo
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
7.2、段落(p)
段落用来定义普通文字，文章的正文内容，每个段落前后默认会添加一些空白间距
<p> ... </p>
7.3、区块（盒子）（div）
没有具体的语义，一般用来划分页面的模块
<div>
<h3> ... </h3>
<p> ... </p>
</div>
7.4、水平分割线 （hr）（单标签）
代表主题结束
<div> ... </div>
<hr>
<div> ... </div>
7.5、换行 （br） （单标签）
<p>
大家好<br>
“你们的事就是最重要的事
</p>
7.6、span
无语义标签，通常用来给一段文字中指定的文字添加特殊样式
<p style="color: red;">
你好呀<span
style="color:
blue;">111222</span>奋发图强
</p>
8、文本格式化标签
b : 样式加粗，没有语义
strong: 样式加粗，并且有强调的语义
i : 样式斜体，没有语义
em : 样式斜体，并且有强调的语义
sup : 上标文本
sub: 下标文本
del ：删除文本
9、网页图片
<img src="图片地址" alt="提示文本" width="300" height="200" title="悬停提示文本">
属性说明:
src="图片地址" :用来定义图片资源的路径，可以使用相对路径或者绝对路径
alt="提示文本" ：定义图片无法显示时的提示文字
width="300" : 定义图片的宽度
height="200"： 定义图片高度 （宽高设置其中一个值，另一个值会按照图片原始宽高比等比缩放）
title="悬停提示文本" : 鼠标悬停在图片上显示的提示文字
10、相对路径和绝对路径
相对路径
./ : 表示当前目录，可以省略
../ : 表示上一级目录
../../ : 表示上两级目录
路径开头的 / ： 表示根目录
绝对路径
本地的绝对路径
<img src="电脑本地存储的图片路径" alt="">
网络地址
<img src="网络上右键复制的图片地址路径" alt="">
这是我所学到的HTML+CSS基础，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
1692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
