必看,系统介绍前端 HTML与CSS的基础 知识点


本文摘自PHP中文网,作者php是最好的语言,侵删。

前端

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; 表示一个空格

  • &lt;表示特殊符号 <

  • &gt; 表示符号 <

  • &copy;表示版权符号 ?上海公安 版权号333333455

  • &yen;表示人民币符号 ?1000

  • &amp;表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

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的基础 知识点的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html fieldset标签怎么用

Html怎么禁止复制粘贴

css怎么消除块元素

Html h1-h6标签怎么用

Html blockquote怎么用?blockquote标签的用法介绍

Html实现不显示表格边框线需要设置什么属性

css如何实现波浪效果

css怎么使用外部艺术字

css属性是什么

Html如何隐藏元素

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...