Html+Css学习总结

Posted 2021-11-28 yeming980912

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html+Css学习总结相关的知识，希望对你有一定的参考价值。

　　html（Hypertext Markup Language）翻译过来就是超文本标记语言。

超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。

标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。

当我们将英语单词放入到标记当中，这时候我们可以称之为标签（单标签、双标签）。

Html基本结构<!DOCTYPE html<!--

    文档头（类型）声明
        不是标签，代表的是 HTML 5 的标准
-->
<html>
<!--
    根元素
        所有的标签都要放在根元素中
-->
<head>
<!--
    头部
        里面包含的绝大部分内容都是不可见的，
        里面的内容主要用于辅助页面的展示
-->
    <title>页面标题</title><!-- 定义页面标题 -->
    <meta charset="utf-8"/><!-- 定义页面的元数据 -->
    <!-- chasrt="utf-8" 针对搜索引擎和解析格式的属性 -->
</head>
<body>
<!-- 
    里面包含的绝大部分在页面中都是可见的，
    主要用于搭建 HTML 结构
-->
</body>

</html>
　　其中需要注意的就是<meta charset="utf-8"/>这行代码，UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，
也是一种前缀码，又称万国码。由Ken Thompson于1992年创建。它可以用来表示Unicode标准中的任何字符，且其编码中的第一个字节仍与ASCII兼容，
这使得原来处理ASCII字符的软件无须或只须做少部份修改，即可继续使用。因此，它逐渐成为电子邮件、网页及其他存储或传送文字的应用中，优先
采用的编码。
　　主要用到的Html代码分为行内元素和块级元素，行内元素里又有行内块元素。行内块和块级元素都是独占一行显示，可以设置宽高。行内元素则在一行
内显示。但可以用Css样式来设置行内元素的宽高，也可以用Display来转换元素的属性。
　　行内元素主要有：i；b；s；u；font；a……
　　块级元素主要用到的有：pre；h1-h6；p；div；hr……
　　还有诸多字符：&nbsp；空格字符  &copy；版权符 ； &It小于号……
　　
　　Html代码主要是承载内容，而Css代码则是承载了样式，代码规范有一点很重要，就是内容和样式分开！
　　CSS(Cascading Style Sheets )翻译过来就是层叠样式表。
CSS 就是用来装饰我们的 HTML 的。就像我用 HTML 写了一段文字，但是文字的颜色，文字大小，字体等等就得依靠 CSS 来修饰了。
　　Css代码使用方式有4种：内部样式表；外部样式表；内联样式；外部导入样式；
在常规的代码编写中我们用外部样式表。首先在网页head头部标签中写入link标签引入外部的Css代码文件，然后在外部Css文件中编写我们所需要运用
的Css样式。

　　CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。

　　CSS 选择器分为三种

标签名选择器div{width:100px;...}
会直接选择某一类标签，会针对这一类标签全部生效。
优先级：1
类选择器.div{width:100px;...}
使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
优先级：10
ID 选择器#div{width:100px;...}
使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
优先级为：100

　　还有一种伪类选择器，以下为其语法格式和意义：

　　　　a:link {color: #FF0000}		/* 未访问的链接 */
　　　　a:visited {color: #00FF00}	/* 已访问的链接 */
　　　　a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
　　　　a:active {color: #0000FF}	/* 选定的链接 */

　　接下来就是Html+Css的网页布局格式了，也是静态网页编写的最重要的部分。在 HTML 中，万物皆是盒模型，只要是 HTML 中的标签，我们都可以通
过设置 盒模型 相关的内容，对这个元素产生影响。
　　所有元素都是一个小盒子，整个网页就是一个大盒子，我们需要把各个小盒子在大盒子里摆放成我们所需要完成的网页的样子。写网页可以理解为建房
子。Html就是房子的整体框架，而Css就是我们对这个房子进行装修，把这个房子做成我们需要的样式。
　　在Html的盒子模型中，有四个要素，从外到里：外边距margin，边框border，内边距padding，内容content。这四个要素组成了我们网页中的盒子。
　　前面说过了，我们网页就是大盒子里装小盒子，也是盖房子并对其进行装修。我们怎么来将大盒子里的布局做成我们想要的格式，怎么将房子装修成我
们需要的样式呢？这里就得用到Css样式表。我们通过选择器选择到Html里的内容标签，首先大的方面我们可以调整内容和其他内容的距离，可以调整内容
宽高也就是盒子在网页所占的面积。小的方面，我们可以调整内容里的文字颜色、字体、大小、对齐方式等等，内容的背景图片、背景颜色、边框样式等等。
　　当我们用每个元素都是一个盒子的眼光去看待整个静态页面时，我们也就可以比较容易的去写成一个静态页面了，因为万物皆是盒模型，我们只需要一
个个的盒子进行分解，就可以容易看穿网页的结构，然后一个个的套代码去完成。
　　以上则是我对Html和Css的理解了。

以上是关于Html+Css学习总结的主要内容，如果未能解决你的问题，请参考以下文章

前端学习总结HTML5+CSS3+JavaScript