必看，系统介绍前端 HTML与CSS的根基 见识点
1 什么是前端
前端即网站前台部分，运转在PC端，移动端等阅读器上展示给会员阅读的网页。随着互联网技术的开展，HTML5，CSS3，前端框架的利用，跨平台响应式网页设计能够顺应各种屏幕辨论率，完善的动效设计，给会员带来极高的会员体验。
前端技术一样分为前端设计和前端开发，前端设计一样可以懂得为网站的视觉设计，前端开发则是网站的前台代码实现，包罗根本的HTML和CSS乃至JavaScript
2 前端开发的技术栈
HTML
超文本标志说话 Hyper Text Markup Language
“超文本”就是指页面内可以包括图片、链接，乃至音乐、程序等非文字元素
负责完成页面的构造
CSS
级联样式表 Cascading Style Sheet
负责页面的风格设计，样式、美妙
JavaScript
阅读器足本说话，可以编写运转在阅读器上的程序
妥妥的编程说话
负责编写页面特效、调取阅读器的API(BOM)、操纵改动页面内容(DOM)，从后端猎取数据(Ajax),渲染页面等
jQuery是JavaScript的一个库
Vue、Angular、React 等是JavaScript 框架
HTML5 根基
1.HTML
1.1 什么是HTML
HTML是用来制作网页标志说话的
HTML 是Hypertext Markup Language 的英文缩写，即超文本标志说话
HTML说话是一种标志说话，不需要编译，直接用阅读器施行
HTML文件时一个文本文件，包括了一些HTML元素，标签等
HTML文件必需使用.html 或 .html 问文件名后缀
HTML是对大小不敏锐的，倡议用小写
HTML是有W3C（万维网联盟）保护的
HTML是通向WEB 技术世界的钥匙
1.2 开展历史
HTML是从2.0版本开端的，实际上没有1.0的官方标准,在1993年6月作为互联网工程工作小组（IETF）工作草案公布（并非标准） HTML 2.0——1995年11月作为RFC 1866公布，在RFC 2854于2000年6月公布之后被公布已经过时
HTML 3.2——1997年1月14日，W3C引荐标准
HTML 4.0——1997年12月18日，W3C引荐标准
HTML 4.01（细小改善）——1999年12月24日，W3C引荐标准
HTML 5——2014年10月28日，W3C引荐标准（我们此刻用的就是HTML5）
1.3 HTML5的由来
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日宣布。HTML5 仍处于完美之中。然而，大部分现代阅读器已经具备了某些 HTML5 支撑。
2012年12月17日，万维网联盟（W3C）正式公布固结了大量网络工作者血汗的HTML5标准已经正式定稿。按照W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
2013年5月6日， HTML 5.1正式草案宣布。该标准定义了第五次严重版本，第一次要修订万维网的中心说话：超文本标志说话（HTML）。在这个版本中，新功效不竭推出，以帮忙Web利用程序的作者，努力提高新元素互操纵性。
2014年10月29日，万维网联盟公布，经过接近8年的艰辛努力，该标准标准终于拟定完成。
1.4 HTML5的长处
1、提高可用性和改善会员的友好体验；
2、有几个新的标签，这将有助于开发人员定义重要的内容；
3、可以给站点带来更多的多媒体元素(视频和音频)；
4、可以很好的替换FLASH和Silverlight；
5、当触及到网站的抓取和索引的时候，关于SEO（搜索引擎）很友好；
6、将被大量利用于移动利用程序和游戏；
7、可移植性好。
1.5 HTML5的兼容性
Internet Explorer 9 乃至 以上版本
chrome、Safari、opera、Firefox和各种以wekkit为内核的国产阅读器
2 HTML根本语法
2.1 HTML标签
* 标签是HTML 中最根本的单位，也是重要的组成部分
* 平常用两个角的括号：<和>
* 标签都是闭合的（两种情势：成对与不成对）
* 双标签（成对）：<标签名> 可以加内容</标签名> 如：`<table>内容</table>` 显示开端完毕
* 单标签（不成对）：<标签名/> 两个单标签内不成加内容 如： `<br/>` , `<hr/>` 里面的左歪杠可以省略
* 标签大小写都可以，引荐使用小写
* 对与HTML标签来将，最重要的是语义
2.2 HTML标签属性
HTML属性一样都显现在HTML的开端标签中, 是HTML标签的一部分。
标签可以有属性,它包括了额外的信息.属性的值必然要在双引号中。
标签可以具有多个属性。
属性由属性名和值成对显现。
语法格局如下：
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
<!-- 输出内容… -->
</标签名>
单标签<img src="图片的地址">
双标签<table width="100" height="200"></table>
2.3 HTML代码格局
任何回车或空格在源代码中都是不起作用，一样标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格停止代码排版，这样可以使代码清楚，也便于团队合作。必需保持严厉的缩进规则，以Tab键为准。
2.4 HTML 注释
<!-- 注释内容 -->
<!--
这里全是注释
都是注释
-->
可以在里面写单行注释，也可以写多行
注释里的！符号和-- 要连起来不克不及空格
2.5 HTML实体
留意：用来表示非凡符号，跟转义字符有像
&nbsq; 表示一个空格
<表示非凡符号 <
> 表示符号 <
©表示版权符号 ?上海公安 版权号333333455
¥表示人民币符号 ￥1000
&表示实体本身& 假如是空格则就显示& 假如是符号 则&符号
3 HTML常用标签
文档声明 <!doctype html>
3.1 主体构造
<html></html> 此元素可告知阅读器其本身是一个 HTML 文档。
<head></head>用于定义文档的头部，它是所有头部元素的容器,对文件的描写。<head> 中的元素可以援用足本、指示阅读器在哪里寻到样式表、供给元信息等等。
<body></body>代表文件内容,定义文档的主体
3.2HEAD头部标签
<title></title> 双标签内写标题，网页标题
<base>标签为页面上的所有链接规定默许地址或默许目标
<meta>写在最上面，由于下面有输入字符，指定网页的元信息可指定字符编码，关键字，描写信息属性：charset , name ,content
<meta charset="utf-8"> 指定编码
<meta name="keyword" content=" 指定搜索关键字
同志交友,同志,同志相亲">
<meta name="description" content=" 指定描写信息
我国最大的同志交友平台">
<link>导入css 文档，或者指定的网页图标 属性 src ， type ，rel
<link rel="stylesheet" type="text/css" href="./01.css"> 从文件导入css
<link rel="shorcut icon" type=" 导入网页标题图标 ico格局可以
image/x-icon" href="./os.ico">
<style></style>
<style type="text/css"> 可以直接在头部使用本人定义的css来润饰
h1{
color: red;
}
</style>
<script></script>标签用于定义客户端足本，比方 JavaScript。script 元素既可以包括足本语句，也可以通过 src 属性指向外部足本文件。
<script type="text/javascript" src="script.js"></script>
<script>
alert('OK')
</script>
3.3 格局排版标签
<hn></hn> 1~6 标题
<p></p> 段落
<pre></pre> 原样输出
<br> 换行
<hr> 分隔
<p></p> 没有任何语义的标签
3.4 文本标签
<em></em> 强调 展现为歪体
<strong></strong> 强调 展现为粗体
<mark></mark> H5新增 表示被选中
<sup></sup> 上标 如多少次方
<sub></sub> 下标 化学元素水
<ins></ins> 增加的内容 内容下面有下划线
<del></del> 删除的内容 内容中心划了一条线
<ruby></ruby> / <rt></rt> 加拼音 H5新增
<ruby>你好<rt>nihao</rt></ruby> 在你好上方加上nihao的显示
CSS根本语法
使用CSS
link 引入外部的CSS文件
<style></style> 在html中写
使用html元素的style属性
格局
选中器 {
CSS属性: 值;
CSS属性: 值;
}
选中器 {属性:值;属性:值}
注释
/* */
CSS长度单位
px 像素
em 默许大小的倍数
百分比 默许大小参照
cm
mm
pt
CSS 色彩单位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
16进制 #abcdef #f90 #ccc
5 CSS选中器
#标签名选中器
tagName {
}
# 类名
.className {
}
#ID选中器
#idName {
}
# 全局选中器
* {
}
# 组合 后代元素
选中器 选中器 .list li
# 组合 子元素
选中器>选中器 .list>li
# 群组
选中器,选中器，选中器 h1,h2,p,.list
# 多前提 .item.frist_item
p.item
6 选中器优先级
ID > CLASS > tagName > *
组合选中器 数数 看优先级的个数对照
7 CSS属性 常用
字体
font-family 字体家族 font-family:"Arial","Helvetica","宋体",sans-serif; 或者衬线字体serif
font-size 字体大小 10px 1.3em 都可以
font-weight normal/bold 字体宽度 默许 乃至加粗
font-style normal/italic 字体风格 默许 歪体
font-variant normal/small-caps 字体变形 默许 小型大写字母
font 复合属性
font:[weight | style | variant] size family
色彩
color 文字色彩
文本
word-spacing 单词 空格
letter-spacing 字母 空格 1px 2em 2个字的空格
text-align: left / center /right 文本水平对齐 左边 中心 左边
vertical-align: baseline / middle .... 垂直对齐方式 默许 图片和文字时在中心
line-height 行高 一行的状况下 高度和行高一样的状况下 左居中
text-decoration ： none/overline/underline/line-through 文本装饰 默许 上划线 下划线 删除线
text-indent: 2em 文本首行缩进
word-wrap: break-word 单词过长或者url 可以换行
overflow-wrap word-wrap的别号 CSS3
white-space pre pre-wrap 保存输入原样 当文字碰到边界换行
相关文章：
前端根基(零)CSS根基
前端新人学习笔记-html/css/js根基知识点
相关视频：
html与CSS根基入门视频教程-免费在线视频教程
以上就是必看，系统介绍前端 HTML与CSS的根基 知识点的具体内容，更多请关注百分百源码网其它相关文章！
