Front-End
## HTML
1. HTML基本标签结构
<!DOCTYPE html>// 文档类型的声明,告知浏览器是哪个版本的HTML 文档,需要注意的是它并不是一个HTML 标签,只是一个文档类型声名标签 <html lang="en"> // 在html 标签中指定了语言 <head>// 在头部标签中指定字符集,常用的有 UTF-8 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
标签名 | 标签的含义 | 说明 |
---|---|---|
<html> <html/> | HTML标签 | 页面中最大的标签,称为根标签 |
<head><head/> | 文档的头部标签 | 主要在head 标签中我们必须拥有的是 TITIE 标签,用来表示当前文档的标题 |
<title><title/> | 文档的标题 | 让文档拥有一个自己的标题 |
<body><body/> | 文档的主体 | 元素包含了文档的所有内容,页面内容基本都是放置在 |
2. HTML常用的标签
2.1 标题标签
#<h1>我是一级标签</h1><h6></h6> 需要注意的是每一个标题标签中的内容都是加粗的,也就是<strong></strong> 标签的作用。
特点:
加了标题标签的文字会被加粗
独占一行
2.2 段落标签和换行标签
#<p>我是一个段落</p>
特点:
文本在段落中会根据浏览器窗口的大小自动换行
段落和段落之间保证了空格
#
特点:
在HTML 文档中,文字会不断的从左到右进行显示,直到对话框的末尾。如果像要进行提前的换行操作,那么就可以使用当前换行但标签。
// 是一个单标签
br 只是简单的开启新的一行,而段落标签会在两行文字中间插入一个垂直的间距
2.3 文本格式化标签
在网页中,常见的文字格式有加粗、斜体、下划线、删除线,对于这四种格式都有对应的标签来操作。
标签 | 语义 | 说明 |
---|---|---|
<strong><strong/> | 加粗 | 推荐使用,语义强烈 |
<em><em/> | 斜体 | 推荐使用,语义强烈 |
<ins><ins/> | 下划线 | 推荐使用,语义强烈 |
<del><del/> | 删除线 | 推荐使用,语义强烈 |
2.4 div 和 span 标签
div 和 span 是没有语义,是一个“盒子”用来转载内容的。
div 这是头部
span 这是标题
div是division表示分割、分区,span表示跨度、跨区
特点:
div 标签用来布局,每一行只能放置一个。大盒子
span 标签用来布局,每行可以放置多个。小盒子
2.5 图像标签和路径
图像标签
<img src="图像的URL"
src是 img 标签的必须属性,用于指定图像文件的路径和文件名称
图像标签的属性
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本:如果由于某种原因无法显示图像,则指定图像的替代文本 |
title | 文本 | 提示文本:鼠标放置图片上显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置tu'xiatuxia哪个的边框粗细 |
2.6 超链接标签
链接的语法格式
<a href=" " target=" > 文本或者是图像 < /a>
属性 | 作用 |
---|---|
href | f'sf必须属性,用来指定链接的目标地址 |
target | 表示跳转的方式,其中self是默认的,表示在当前页面打开,blank表示在新页面打开 |
链接的分类
-
外部链接 <a href="https://baidu.com> 百度一下</a>。
-
内部链接:网站内部页面之间的相互链接,直接链接内部的页面名称就可以,例如首页
-
空连接:如果没有确定的链接目标时,首页
-
下载链接:如果链接中的内容是一个文件或者是压缩包,会直接下载当前文件。
-
网页元素链接:文本、图片表格、音频 、视频,都是可以直接超链接的
-
锚点链接:点解链接的时候,快速定位到当前页面中的某个位置
-
在href 中的属性设置为 #名称(一般是ID) 例如:第二集
-
找到目标的标签位置,在里面添加一个ID 属性,等于刚才的名称。<h3 id="two"></h3>
-
2.7 注释
<!-- 注释语句-->