慕课网【HTML+CSS】3.13前学习内容汇总

来源：互联网发布：我知天下之中央编辑：程序博客网时间：2024/05/02 00:14

因为是第一次写博客，而之前慕课网关于【HTML+CSS】的课程已经看了一部分，所以就一次性写在该博客下。

-----------------------------------------------------------------------分割线--------------------------------------------------------------------------------------

web前端开发基础技术需要掌握：HTML、css、JavsScript语言。

1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的语言，可以包含文字、图片、视频等。

2.CSS样式是表现，就像网页的外衣。比如标题字体、颜色变化，或为标题加入背景图片边框等、所有这些用来改变内容外观的东西称之为表现。

3.JavaScript是用来实现网页上的特效效果。

一.认识HTML标签

平常所说的上网就是浏览各种各式各样的网页，这些网页都是由HTML标签组成。

标签的语法

1.标签：由英文尖括号<和>括起来

2.html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/

如<p></p> <div></div>

3.标签与标签之间是可以嵌套的，但先后顺序必须一致。如<div>里嵌套<p>，那么</p>必须放在</div>前。

如<div><p>...</p></div>

4.HTML标签不区分大小写，但建议小写。

二.认识HTML文件基本结构

1.一个html文件是有自己固定的结构的

如： <html>

<head></head>

<body></body>

</html>

2.代码讲解：

⑴<html></html>称为根标签，所有的网页标签都在<html></html>中。

⑵<head>标签用于文档的头部，它是所有头部元素的容器。头部元素有<title><script><style><link><meat>等标签。

⑶在<body>和</body>标签之间的内容是网页的主要内容。如<h1><p><a><img>等网页的内容标签，在这里的标签中的内容会在浏览器中显示出来。

三.认识head标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档包含的数据都不会真正作为内容显示出来。

1.以下这些标签可以用到head部分·：

<head>

<meat>

<link>

</head>

2.<title>标签：<title>和</title>标签之间的内容是网页的标题信息。它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

三.代码注释

代码注释的作用是帮助程序员标注代码的用途。代码注释不仅方便程序员自己回忆起以前的代码的用途，还可以帮助其他人很快的读懂其编写程序的功能，方便多人合作开发网页代码。

语法：

注意：注释代码是不会在结果窗口中显示出来的。

四.语义化，让你的网页更好的被搜索引擎理解

重点：1.标签的用途：明白每个标签的用途，也就是在什么样的情况下使用哪些标签才是合理的。比如文章的标题就可以用标题标签去实现，文章中段落的内容就得放在段落标签中。

2.标签在浏览器中的默认样式：明白每个标签的用途（在什么情况下用到什么标签），比如文章的标题就要用到标题标签，文章中的段落就要放在段落标签里。

五.Body标签---网页上显示的内容放在这里

在网页上展示出来的页面内容一定要放在body标签里。

语法：<body>...</body>

六.<p>标签---添加段落标签

如果想在网页上显示文章，这时就需要<p>标签，把文章的段落放在p标签里。

语法：<p>段落文本</p>

注意：一个段落一个p标签。

p标签默认样式：段前段后都会有空白。

七.<hx>标签----标题标签

使用<hx>标签来制作文章的标题

标题标签一共有6个：h1,h2,h3,h4,h5,h6。分别为一到六级标题，并且依据重要性递减，h1是最高等级。

语法：<hx>...</hx>(x为1到6)

注意：标题标签默认样式是加粗的，1的字号最大。

八.加强语气标签,

如果要对某几个文字需要强调，就结余用到<strong>/<s>或<em>/<i>标签

区别：strong/s默认加粗，em/I默认倾斜

九使用span标签为文字设置单独样式

可以用<span>单独设置样式。

语法：<span>文本</span>

十.<q>标签----短文本引用

如果要在网页中引用别人的语言，就要用到<q>标签。

语法：<q>引用文本</q>

注意：.要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。

十一.<block quote>----长文本引用

语法：<block quote>引用文本</block quote>

注：浏览器对<block quote>标签的解析是缩进样式。

十二..为网页添加空格

语法： 

注：在HTML代码中输入空格是不起作用的。

十三.br标签---分行显示文本

在需要换行的地方输入<br />。

语法：<br />

注意：1.br标签是空标签，标签中没有内容的标签就是空标签。空标签只需要写一个开始标签。

2.HTML中是忽略回车的，换行必须用br标签。

十四.hr标签---添加水平横线

加用于分隔的横线，会使文章看起来更加整齐。

语法:<hr />

注意：1.hr标签也是空标签，只有开始标签、

2.默认样式：线条较粗，颜色为灰色。

十五.address标签---为网页加入地址信息

一般网页中联系地址用<address>标签。

语法：<address>联系地址信息</address>

注意：默认样式为斜体。

十六.code标签---加入一行代码

如果要在网站上展示一行代码，可以用到<code>标签。

语法：<code>代码语言</code>

注意：只能用于一行代码

十七.pre标签---加入一段代码

当网页需要大量代码时，可以用到<pre>标签。

语法:<pre>...</pre>

特性：被包围在pre元素中的文本通常会保留空格和换行符。

十八.使用ul标签----无序标签

语法：<ul>

</ul>

特性：1.ul是没有前后顺序的列表，称为无序列表

2.默认样式：每项前自带一个圆点。

3.共三种样式:<ul type="disc(实心圆点) square（实心方块) circle(空心圆)">

十九.使用ol标签-----有序标签

语法：<ol>

</ol>

特性：1.ol是有顺序排列的，称为有序列表

2.默认样式：每项li前自带序号，默认从1开始。

3.共五种样式：<ol type="1|a|A|i|I" start="X(只能是数字)">

二十.使用dl标签---自定义标签

语法：<dl>

<dt>

</dt>

</dl>

注意：1.dt是定义列表项使用，dd是对列表项的描述。

二十一.认识div在排版中的作用

在网页制作过程中，可以把一些独立的逻辑部分划出来，放在一个div标签中，这个div标签的作用就相当于一个容器。

语法:<div>...</div>

逻辑部分：页面上相互关联的一组元素，如网页中独立的栏目模块，就是一个独立的逻辑部分。

二十二.给div命名，使逻辑更加清晰

为了使逻辑更加清晰，可以为一个独立的逻辑部分设置一个名称，用id属性来为div提供唯一的名称

语法:<div id="模块名称">..</div>

二十三.table标签----网页上的表格

1.要素:table,tr,th,td

2.特性：表格的标签均为双标记标签

⑴<table>：整个表格以<table>开始，</table>结束

⑵<tr>：表示表格中的一行

⑶<td>:表示一行中的一个单元格

⑷<tbody>:等表格内容全部下载完显示

⑸<th>:表格表头，默认粗体并居中。

3.表格中用到的一些属性标签

⑴边框：border边框线（单位：数字）bordercolor=“边框线颜色”

⑵高和宽：高height宽width。两种值百分比%和像素px

⑶水平位置：align="center居中left靠左right靠右"

⑷垂直位置：默认居中。valign="top上bottom靠下"

⑸背景：bgcolor背景颜色 background背景图片

⑹合并：cellspan合并行中的单元格rowspan合并列中的单元格。最少为2个单元格。

⑺间距：cellspacing外间距（单元格与单元格之间的距离）cellpadding内间距（单元格与文字的距离）

⑻默认：外间距默认2px，边框线默认1px

二十四.为表格添加表格和摘要

1.摘要：不会在浏览器中显示出来。作用是增加表格的可读化。

语法:<table summary="表格输入文本">

2.标题：用以描述表格的内容

⑴位置：默认文本位置为表格上方。默认水平位置为居中

⑵语法：<table>

二十五.Img标签---为网页插入图片

1.语法：<img src="图片地址" alt="图片下载失败的替换文本" title="提示文本">

2.讲解：

⑴src:标示图像的位置。

⑵alt:当图片下载失败时，可看到该属性指定文本

⑶title：鼠标滑过图片时显示的文本

3.图片常用格式：jpg,gif,png,jpeg

4.图片边框：border

5.插入分层路径的图片：文件夹名/图像地址

6.插入不同路径（不同盘）的图片：.../文件夹名/图像地址（分几个文件夹，就需要输入../，一个../表示返回上一层路径）

1 0