前端简介--HTML与CSS知识分享
导读： 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。 从软件分类...
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
从软件分类来说: (根据使用的目的不同)
系统软件应用软件
从软件信息存储位置的不同:
单机软件
软件和数据都存储在客户端C/S架构软件 Client / Server
软件程序和数据一部分存在客户端,一部分存在服务器端B/S架构软件 Browser / Server
软件程序和数据全部存在服务器端
前端开发也叫作web前端开发, 是为B/S架构的软件提供界面解决方案的.
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了, 即HTML5。
级联样式表（Cascading Style Sheet）简称"CSS"，通常又称为"风格样式表（Style Sheet）"，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局，功能强大，扩展性很强。支持多种语言开发,只需要安装对应的插件即可. 我们学习前端过程中主要使用它来敲代码. 我们前端常用的IDE(集成化开发环境)选择很多, 例如: vscode, hbuilder, webstorm, sublime等.
vscode官网:
IDE: 集成开发环境
vscode插件的安装:
1.view in browser:
能够让我们所写的代码运行在浏览器上.
2.Beautify:
能够使我们写的代码变得漂亮点
3.Auto Close Tag:
自动添加 HTML 关闭标签
4.Color Highlight:
颜色高亮
5.HTML CSS Support:
html css 支持插件
6.Preview on Web Server:
使我们写的网页可以通过本地服务器打开
vscode的自动保存设置: 打开左上角的 文件 —–>
选择自动保存, 如果不选择自动保存,则只能够手动保存后程序才能运行.
前端的开发工作主要是在vscode等编辑器上进行的, 但是代码的调试主要是在浏览器上, 所以我们给大家推荐chrome浏览器, 用于查看和调试前端代码.
我们可以通过查看源代码的形式, 看到制作出来的网页
通过仔细观察网页源代码我们可以知道: 制作网页的语言是用 "" 括起来的. 有些是成对出现,有些不是 —–>
我们一般称这样用尖括号括起来的语言为 HTML
HTML 是 Hyper Text Markup Language 的首字母简写, 意思是超文本标记语言, 超文本指的是超链接, 标记指的是标签, 是一种用来制作网页的语言, 这种语言由一个个的标签组成, 用这种语言制作的文件保存的是一个文本文件, 文件的扩展名为 .html 或者 .htm
html文件的基本结构为:
注意:
html语言中注释的写法:
快捷键: ctrl + / 取消注释: ctrl + /
说明:
基本上所有的html文件都是按照这样的格式作为模板进行开发.head标签的主要作用:
网页的设置资源的引用head标签中的内容一般不会显示在网页上.body中的内容通常用于网页显示
我们可以新建一个.html文件, 在文件中快速创建基本标签:
快速创建的方法是: 在文件中敲一个 " ! " 然后按 tab 键 即可:
我们可以看到,这样就可以快速的创建一个基本的html文档了, 我们可以在这个文档中快速的编写代码
说明:
lang="en": 声明这个网页的语言是英文, 如果是中文则为: lang="zh-CN", 主要是做统计使用, 国内网页一般不关心这个值.第五行的主要作用是: 让网页在移动端观看时, 网页不缩放.第六行的主要作用是: 如果网页在 IE 浏览器上观看, 让 IE 以最高版本显示网页
学习 HTML 语言就是学习标签的用法, HTML 标签有20多个, 学会这些标签的使用, 就基本上学会了 HTML的使用
在html语言中, 用尖括号括起来的部分, 我们成为标签.
成对的标签单个的标签
无论是成对的标签还是单个的标签,都需要用 " " 括起来
例如:
由上图我们可以知道:
这样的标签是成对的
这样的标签是单个的
同时: 由上面的代码我们也可以获取到:
标签是可以嵌套的: 例如 上面的代码中 html 标签, 嵌套了 head 标签和 body 标签.
body 标签又嵌套了 ul 标签, ul 标签嵌套了 li , li 嵌套了 a标签等等.
类似于这样标签中添加标签的写法,我们称之为标签的嵌套.
有些标签内部有这样的设置:
其中 src=" " 和 alt=" " 这部分内容, 我们称之为当前标签的属性.
说明:
有些标签的属性是相同的, 有些标签的属性是不同的. 通过标签的属性,我们可以给当前的标签设置不同的内容.
总结:
我们只需要知道标签的尖括号内部添加的设置是属性即可html 常用标签的属性我们在学习的过程中慢慢掌握.
注意: 在前端中, 元素指的就是标签, 所以我们有时候说: xx元素, 即指的是 xx标签
标签按照显示的不同, 可以分为两类:
块元素 (行元素)内联元素 (行内元素)
块元素的特点:
单个块元素在浏览器中默认独占一行两个块元素不能够在一行显示, 他们会自动换成两行显示块元素可以设置宽高等属性.
内联元素:
多个内联元素可以在一行显示内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.
常用的块元素标签:
1. 标题标签
表示文档的标题, 除了具有块元素基本特征之外, 还含有默认的外边距和字体大小
2.段落标签:
表示文档中的一个文字段落, 除了具有块元素基本特征, 还含有默认的外边距
3. 通用块容器标签 div
表示文档中一块内容, 具 有块元素基本特性, 没有其他默认样式
常用内联元素标签
1.超链接标签 a
链接到另外一个网页, 具有内联元素基本特征, 默认文字蓝色, 有下划线
说明:
a 标签的 href 属性可以添加 # 号, 这个是缺省链接地址:
不确定地址时, 我们可以临时使用 # 来占位,确定后替换即可如果想要跳转到当前页面的最上方时, 可以使用 # a 标签有 target 属性
如果不设置该属性, 在当前页面打开新页面如果设置该属性, 则会在新窗口中打开新页面
2.通用内联容器标签 span
具有内联元素基本特性, 没有其他默认样式
我们一般在文字段落的中间部分强调某一部分的时候调用span,添加样式,从而改变强调的部分的样式:
例如: 这是一段文字,其中梅总需要强调,所以我们可以使用span来完成强调的操作.
3. 图片标签 img
在网页中插入图片, 具有内联元素基本特性, 但是它支持宽高设置
说明:
src属性主要是添加要展示的图片地址alt属性的作用:
图片加载失败时, 显示的提示信息搜索引擎在收录图片时, 根据这个属性值来收录图片制作无障碍网页, 方便盲人的读屏软件读取.
特殊的一些标签:
空格: 在html中, 空格一般会用: 表示
回车: 在html中回车换行一般用表示
小于号( ): 在html中一般用表示
删除标签: del 或者 ( s )
倾斜标签: em 或者 ( i )
下划线标签: ins 或者 ( u )
总结:
HTML 整体是由标签组成的, 各个标签的功能很多都是重复的同学们学习标签用法的时候多多练习即可标签整体分为: 块级标签 和 行内标签
块级标签可以设置宽高值, 独占一行行内标签自动设置宽高值, 一行内可以有多个一般来说, 块级元素可以包含行内元素,行内元素不能包含块级元素.特殊情况, 需要记住: p 标签不能嵌套 div a 标签用于跳转(超链接) [跳转网页, 跳转页面, 跳转文件等]标题标签用于设置标题, 共有6级div就是一个无色透明的容器,看不见,摸不到img标签主要用于设置图片p 标签就是paragraph(段落) 通常用于包裹段落span是一个行内元素通常用于p标签内部,个别文字设置时使用.
课下自己了解:
块级元素和内联元素的嵌套规则：
最基本：内联不能嵌套块级，块级可以嵌套内联元素
? 正确（块级并列）
正确（内联嵌套内联）
错误（内联嵌套块级）
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div，就是我犯的错误。
—— 错
—— 错
特殊的
里面可以嵌套div（可以但
不行）
块级元素与块级元素并列、内联元素与内联元素并列
正确
正确
错误（块级和内联并列了）
网页布局原理:
标签在网页中会显示成一个个的方块,先按照行的方式, 把网页划分为多个行, 再到行里面划分列, 也就是说在表示行的标签中在嵌套标签来表示列, 标签的嵌套产生叠加效果.
上图实例:
在布局中需要尽量使用带语义的标签, 使用带语义的标签的目的首先是为了让搜索引擎能更好的理解网页的结构,提高网站在搜索中的排名(也叫作SEO), 其次是方便代码的阅读和维护
带语义的标签:
h1 —- h6: 表示标题p: 表示段落img : 表示图片a: 表示链接
不带语义 的标签:
div: 表示一个容器span: 表示行内的一块内容
所以我们要根据网页上显示的内容, 使用合适的标签, 可以优化之前的代码.
为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生.
CSS是 Cascading Style Sheets 的首写字母缩写,意思是层叠样式表.
有了CSS, html 中大部分表现样式的标签就废弃不用了, html只负责文档的结构和内容,
表现形式完全交给CSS, 这样使得html文档变得更加简洁.
说明:
选择器是将样式和页面元素关联起来的名称
属性名是希望设置的样式属性, 每个属性有一个或者多个值
属性和值之间用冒号隔开
一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
2. 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
3.外联式:
1.标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
例如:
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
2.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器
举例:
3.层级选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
例如:
层级选择器: 按照标签的层级来匹配对应的标签
4. id选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
举例：
5. 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
总结:
CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可. 标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.class 类选择器是经常使用的选择器. 可以多多练习层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
属性作用举例Width＜/td>
设置元素(标签)的宽度width: 200px;
Height＜/td>
设置元素(标签)的高度height: 200px;
background设置元素背景色或者背景图片(详看下面)background: pink;
border设置元素四周的边框border: 1px solid pink;
border-top设置元素顶部边框border-top: 1px solid pink;
border-left设置元素左边边框border-left: 1px solid pink;
border-right设置元素右边边框border-right: 1px solid pink;
border-bottom设置元素底部边框border-bottom: 1px solid pink;
padding设置内边距(同时设置四个边,也可以分开设置)padding: 20px;
margin设置外边距(同时设置四个边,也可以分开设置)margin: 20px;
float设置元素浮动,浮动可以让块元素在一行排列float:left(左浮动) float: right(右浮动)
补充说明:
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
我们可以对上面的代码进行合并书写:
background: url(bgimg.gif) no-repeat 5px 5px;
补充:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css 浮动:
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素"卡住"：
color设置文字的颜色font-size设置文字的大小font-family设置文字的字体font-weight设置文字是否加粗line-Height＜/td>
设置文字的行高text-decoration设置文字的下划线
提示:样式中的注释
通过样式,并且参照下图, 可以把之前写的布局作进一步的调整, 完成最终的布局效果:
参考文字:
人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 前端简介--HTML与CSS知识分享
本文地址： https://pptw.com/jishu/661609.html