文档类型声明标签
<!DOCTYPE>作用:告诉浏览器用那种HTML版本声明标签
eg.<!DOCTYPE html>意为用html5版本显示网页
lang 语言种类
<html lang="en">
在这里en为英语,zh-CN为中文,但你照样可以混着写中英文。
字符集"character set"
在<head>标签中可用<meta>标签的charset属性规定HTML可用那种编码字符。
eg.<meta charset="UTF-8"/>
charset常用值有:中文简体GB2312,中文繁体BIG5,简加繁GBK,万国码UTF-8
标题标签
通过<h1>-<h6>标签定义,共六级标签,作为标题使用。
eg.<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
特点:一级标题文字字号更大,更粗,其余的根据重要性依次减小。一个标题独占一行。
段落和换行标签
eg.<p>我是段落标签</p>
<br/>我是换行标签,我是一个单标签
图像标签和路径
<img/>这也是一个单标签。
一:属性分类
1.src是<img/>标签的必须属性,用于指定图像文件的路径和文件名。
eg.<img src="图像URL"/>
2.图像显示不出来,用alt替换文本。
eg.<img src="img.jpg" alt="我是一张无法显示的图片"/>
3.title 提示文本,鼠标放到图像上时提示文字
eg.<img src="img.jpg" title="我是轶点点“/>
4.width给图像设定高度,height给图像设定宽度,这俩只修改一个时会等比例缩放。
5.border设置图像边框。
注:
- 属性要写在标签名后
- 属性之间不分先后顺序
- 属性之间必须以空格分开
- 格式:属性="属性值"
二:路径分类
1.相对路径
图片相对于HTML页面的位置,可以为分为三类:
- 同一级路径<img src="img.jpg"/>
- 下一级路径<img src="file/img.jpg"/>
- 上一级路径<img src="../img.jpg"/>
2.绝对路径
图片位于目录下的绝对位置,可分为两种:
- <img src="C:\users\apple\案例\img.jpg"/>
- <img src="http://www.qq.jpg"/>
超链接标签
一.属性分类
1.herf
这是一个必须属性,用于指定链接的地址。
eg.<a href="https://www.csdn.com">这是一个链接</a>
2.target
使用target可以设置打开方式,若不写target,默认值为targe="_self",直接在此窗口打开;
若写target="_blank",在新窗口打开。
eg.<a href="https://www.csdn.com/" target="_blank" rel="noopener noreferrer">访问csdn!</a>
3.ID
id 属性可用于创建一个 HTML 文档书签,用于锚点链接中找目标位置。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对读者来说是隐藏 的。
eg. 在HTML文档中插入ID:
<a id="tips">具体内容</a>
在HTML文档中创建一个链接到"具体内容(id="tips")":
<a href="#tips">大纲中的具体内容标题</a>
二.链接分类
1.外部链接
eg.<a href="http://www.qq.com" target="_blank">腾讯</a>
2.内部链接
指内部页面之间的相互链接,若为同一级,直接写内部页面名称即可,否则,同上述路径中讲 过的上一级/,下一级../写法
3.空链接
eg.<a href="#">空的</a>
4.下载链接
若href中的地址是一个文件.exe或一个压缩包.zip,就会成为下载链接。
eg.<a href="img.zip">下载压缩包</a>
5.网页元素链接
文本,图像,表格,音频,视频都可以。
eg.<a href="http://www.qq.com"><img src="img.jpg"/></a>
大意是点击这个图片可以跳转至另一个页面。
6.锚点链接
点击链接可以快速定位到页面中某个位置。
- 在链接文本href属性中,设置属性值为#名字的形式,如<a href="#two">第二集</a>
- 找到目标位置标签,里面添加一个id属性=刚才名字,如<h3 id="two">第二集介绍</h3>
文本格式化标签
- 加粗<strong></strong> or <b></b>
- 倾斜<em></em> or <i></i>
- 删除<del></del> or <s></s>
- 下划线<ins></ins> or <u></u>
<div>和<span>标签
这两个标签都无语义,可以理解为一个盒子,用来装内容。
<div>只能一个人独占一行,可理解为行盒子。
<span>一行可以放多个小盒子。
<hr>和注释标签
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
eg.<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
注释标签的写法为<!--这是一个注释-->,其快捷方式为ctrl+/
特殊字符标签(常用)
空格符 |   |
< | &It |
> | > |
& | & |
一般的,空格符写几个空几格。
<head>
<head> 元素包含了所有的头部标签元素。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
-
<title>标签定义了不同文档的标题。定义了浏览器工具栏的标题,当网页添加到收藏夹时,显示在收藏夹中的标题,以及显示在搜索引擎结果页面的标题。
-
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
eg.<head>
<base href="http://www.csdn.com/images/" target="_blank">
</head>
-
<link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表
eg. <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
-
<style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
eg. <head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
-
meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
eg.
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="前端学习">
定义网页作者:
<meta name="author" content="轶点点">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
-
<script>标签用于加载脚本文件,如: JavaScript。