备注:接下来你看到的都是干货~
一,首先来说什么是网页?
网站是指在因特网上根据一定的规则,使用html等制作的用于展示特定内容相关网页的集合。
网页是网站中的一“页”,通常是html格式的文件,它要通过浏览器来阅读。
网页是构成网站的基本元素,它通常由图片链接,文字,声音,视频等元素组成。通常我们看到的网页,常见以.html或.html后级结尾的文件,因此将其俗称为html文件![](https://i-blog.csdnimg.cn/blog_migrate/5cbb04bab8402d40c87fca3ed9eeaf36.png)
-
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是标签的含义,即这个标签是用来干嘛的。根据标签的语义,再合适的地方给一个最合适的标签,可以让页面结构更清晰。
二,什么是html?
HTML指的是超文本标记语言(Hyper Text,它是用来描述网页的一Markup Language),种语言。
HTML不是一种编程语言,而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)![](https://i-blog.csdnimg.cn/blog_migrate/1f5c322ce460829dd9f3a8c443964f74.png)
三,网页是怎么形成的?
网页是由元素组成,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。
前端人员开发代码------->浏览器显示代码(解析,渲染)-->生成最后的web页面![](https://i-blog.csdnimg.cn/blog_migrate/24c09232737f08cb320adb447a427fd7.png)
四,网页总结~
网页是图片、链接、文字、声音、视频等元素组成,其实就是一个html文件(后缀名是html)
网页生成制作:有前端人员书写html文件,然后浏览器打开,就能看到网页。
html:超文本标记语言,用来制作网页的一门语言,有标签组成的,比如,图片标签 链接标签,视频标签等。
1,基本语法的概述
1.html标签是由尖括号包围的关键词,例如.
2.html标签通常是成双成对出现的,例如。标签对<html>和</htmI>,我们称为双标签。中第一个标签是开始标签。第二标签是结束标签
3.有些特殊的标签必须是单个标签(极少情况),例如<br/>我们称为单标签。
二、标签关系:
双标签关系可以分为两类:包含关系和并列关系。
包含关系(父子关系)
并列关系(兄弟关系)
<head>
<title>我的第一个页面</title>
</head>
<body>
</body>
<!DOCTYPE html>
<html lang="en">
<head><!-- 头部 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><!-- 眼睛 -->
</head>
<body><!-- 身体 -->
<!-- ait+b 运行 -->
<!-- 1.内容加粗 2.独占一行 3.他是双标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2,标题标签<h1>-<h6>(重要):
为了使网页更具有语义化,我们经常会在页面中用到标题标签,html提供了6个重要的网页标题,即h1-h6
单词head的缩写,意为头部、标题。标签语义:作为标题使用,并依据重要性递增。
特点:
1.加了标题的文字会变得加粗,!字号也会依次变大。
2.一个标题独占一行![](https://i-blog.csdnimg.cn/blog_migrate/775e63a33db196c9b95b9891f8ea4480.png)
3,段落和换行标签(重要)
在网页中,要把文字有条理的显示出来,就需要将这些文字分段显示,在html标签中,<p>标签用于定义段落,他可以将整个网页分成若干个段落。
标签语义:可以把html文档分割为若干个段落
特点:
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
在html中,一个段落的文字从左到右依次排列,直到浏览器窗口的右端,然后才自动换行,如果希望某段文本强制进行换行显示,就需要使用换行标签<br/>
标签语义:强制换行
特点:
1.<br/>是个单标签
2.<br/>标签只是简单地开始新的一行,跟段落不一样,段落之 间会插入一些垂直的间距。
文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到html中的文本格式化标签,使文字以特殊方式显示
标签语义:突出重要性,比普通文本更重要。
div和span标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
div表示分割,分区;span意为跨度,跨距。特点:
1.<div>标签用来布局,但是现在一行只能用-个div。大盒子
2.<span>标签用来布局,一行上可以多个<span>。小盒子
图像标签和路径(重点)
1.图像标签
在html标签中,<img>标签用于定义html页面中的图像。
单词image的缩写,意为图像
src是<img>标签必须属性,它用于指定图像文件的路径和文件名
所谓属性:简单理解就是属于这个图像标签的特性。
<!-- p标签 段落
1:独占一行 2:当一行文字满了之后会自动换行 3:双标签
4:p与p直接会有段落间距 而换行内容则不会有-->
<!-- br/ 强制换行 -->
<p>这是一个段落<br>殴打上访回复第四u返回打碎~~~~~~~~~</p>
<!-- 文本标签 strongo和b加粗.. -->
<strong>加粗标签</strong><b>加粗标签</b>
<!-- 斜体em和i -->
<em>斜体文字</em><i>斜体文字</i>
<!-- 删除线del和s -->
<del>删除线</del><s>删除线</s>
<!-- 下划线ins和u -->
<ins>下划线</ins><u>下划线</u>
<hr> <!-- 创建一条水平线hr -->
<!-- 快级标签标签 div大盒子标签用来布局独占一行
span行级标签用来布局单独占一个空间-->
<span>小盒子</span><div>大盒子</div>
<!-- 图像标签img -->
<!-- ./+图片名称(必须是在同一个级别同一个文档里面)(/显示下级)(../显示上级) -->
<img src="./762f712caae2e03ef400423e5f78ab0.jpg" alt="图片的名称(不显示)" title="名称(显示)" >
<!-- a超链接 -self:默认值 在原先的页面中跳转新的页面
-blank:开启一个新的网页并跳转 -->
<a href="./02.html" class="" target="_blank">超链接</a>
<a href="http://www.7k7k.com">.7k7k</a>
<a href="https://v.qq.com">腾讯视频</a>
<!-- #: #相当于占位符
javascript:; -->
<a href="#">仅是个占位符</a>
<a href="JavaScript">&</a>
  <!-- &emsp;大空格  ;空格-->
< 小于号
<!-- 小于号 < -->
> 大于号
<!-- 大于号 > -->
& 和号
<!-- 和号 & -->
¥ 人民币
<!-- 人民币 ¥ -->
©
<!-- 版权 © -->
®
<!-- 红色商标 ® -->
°
<!-- 摄氏度 ° -->
±
<!-- 正负号 ± -->
×
<!-- 乘号 × -->
÷
<!-- 除号 ÷ -->
²
<!-- 平方二(上标2) -->
³
<!-- 平方3(上标3) -->
HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取html文档,并以网页的形式显示出它们。此时用浏览器打开这个网页,我们就可以预览我们写的第一个html文件了。