因为是第一次写博客,而之前慕课网关于【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>
<title>...</title>
<meat>
<link>
<style>...</style>
<script>...</script>
</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>
<li>信息</li>
<li>信息</li>
</ul>
特性:1.ul是没有前后顺序的列表,称为无序列表
2.默认样式:每项前自带一个圆点。
3.共三种样式:<ul type="disc(实心圆点) square(实心方块) circle(空心圆)">
十九.使用ol标签-----有序标签
语法:<ol>
<li>信息</li>
<li>信息</li>
</ol>
特性:1.ol是有顺序排列的,称为有序列表
2.默认样式:每项li前自带序号,默认从1开始。
3.共五种样式:<ol type="1|a|A|i|I" start="X(只能是数字)">
二十.使用dl标签---自定义标签
语法:<dl>
<dt>
<dd></dd>
</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>
<caption>标题文本</caption>
二十五.Img标签---为网页插入图片
1.语法:<img src="图片地址" alt="图片下载失败的替换文本" title="提示文本">
2.讲解:
⑴src:标示图像的位置。
⑵alt:当图片下载失败时,可看到该属性指定文本
⑶title:鼠标滑过图片时显示的文本
3.图片常用格式:jpg,gif,png,jpeg
4.图片边框:border
5.插入分层路径的图片:文件夹名/图像地址
6.插入不同路径(不同盘)的图片:.../文件夹名/图像地址(分几个文件夹,就需要输入../,一个../表示返回上一层路径)