前端学习笔记
html部分
一、网页的一些相关概念:
1.什么是网页
是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为.html)
2.什么是HTML
超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等
3.网页的组成
网页由结构、表现、行为组成。
(个人理解:结构=html,表现=css,行为=JavaScript。 三者相比而言,结构最重要)
二、HTML的标签
1、标签的规则
- HTML标签就是用尖括号包裹一个关键字,例如
<html>
- HTML标签大部分情况都是成对出现的,例如
<html>
</html>
,我们称作双标签。 - 一小部分的HTML标签是单独出现的,例如
<br>
,我们称作单标签。
2、标签的关系
标签可以分为两类关系:包含和并列。
- 包含标签
<head>
<title> </title>
</head>
- 并列标签
<head> </head>
<body> </body>
3、基本结构标签
基本结构标签就是骨架标签
标签名 | 定义 | 说明 |
---|---|---|
<html></html> | HTML标签 | 根标签 |
<head></head> | 文档的头部 | 在head标签中设置titile标签 |
<titile></titile> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 页面内容基本都是放在body里面的 |
4、常用的标签
- 标题标签
<h1> - - - <h6>
标签
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
- 段落标签
<p>
标签用于定义段落,它可以将整个网页分为若干个段落。
<p> 我是一个段落标签 </p>
- 换行标签
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签 <br />
。
具体实现:
<br />
特点:
1. <br />
是个单标签。
2. <br />
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
- 文本格式化标签
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong> 和<b></b> | <strong></strong> 语义更强烈 |
倾斜 | <em></em>和<i></i> | <em></em> 语义更强烈 |
下划线 | <ins></ins>和<u></u> | <ins></ins> 语义更强烈 |
删除线 | <del></del>和<s></s> | <del></del> 语义更强烈 |
- div和span标签
没啥语义,就是个盒子,div是个大盒子,span是个小盒子
具体实现:
<div> 这是头部 </div>
<span> 今日价格 </span>
特点:
1. <div>
标签用来布局,但是现在一行只能放一个<div>
。 大盒子
2. <span>
标签用来布局,一行上可以多个 <span>
。小盒子
- 图片标签
在 HTML 标签中, 标签用于定义 HTML 页面中的图像。
具体实现:
<img src="图像URL" />
解释:
src 是<img>
标签的必须属性,它用于指定图像文件的路径和文件名。
图像标签注意点:
1.图像标签可以拥有多个属性,必须写在标签名的后面。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3.属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 基本属性,必须要有 |
alt | 文本 | 图片不能正常显示时,可以出现的文本 |
title | 文本 | 鼠标经过图片时出现的文本 |
width | 像素 | 图片的宽 |
height | 像素 | 图片的高 |
border | 像素 | 图片的边框粗细 |
- 路径
绝对路径和相对路径
1、绝对路径指以引用文件所在位置为参考基础,而建立出的目录路径
例如:
同级路径
<img src = "zhangshuai.jpg>
上级路径
<img src = "images/zhangshuai.jpg>
下级路径
<img src = "../zhangshuai.jpg>
- 连接标签
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">
文本或图像
</a>
说明:
1.href:用于指定链接目标的url地址
2.target:用于指定链接页面的打开方式_self默认值 _blank新窗口打开
3.#:空链接
链接分类:
1.外部链接: 例如
< a href="http:// www.baidu.com "> 百度</a >
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如
< a href="index.html"> 首页 </a >
3.空链接: 如果当时没有确定链接目标时,
< a href="#"> 首页 </a >
4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 :
< a href="index.html"> 首页 </a >
3.空链接: 如果当时没有确定链接目标时,
< a href="#"> 首页 </a >
4.下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。
- 注释
HTML中的注释以“<!--”开头,以“ -->
”结束。
具体实现:
<!-- 注释语句 --> 快捷键: ctrl + /
- 特殊字符
在 HTML 页面中,一些特殊的符号打不出来(QAQ空格啥的,烦死了),此时我们就用特殊字符代替。
空格 、大于号、 小于号 这三个就可以了, 其余的使用很少
附上第二部分链接:
前端自学笔记(HTML部分2)