学习笔记-前端开发-002_Html基础
所有的网页都是以HTML、CSS、Javscript
作为基础搭建的,他们又被称为前端三剑客,而HTML
(超文本标记语言)又是其中的骨架,他需要搭建起网页的基础框架和包含文本、图片、视频、音频、链接等元素的图文内容让浏览器进行解析,通常后缀名为(.html
或者.htm
)
1 HTML注释
俗话说:注释乃代码之母
<!-- 单行注释 -->
<!--
多行注释
-->
由于HTML代码非常杂乱无章,所以程序员们会习惯性的使用注释来划定区域方便后续的查找
<!-- 导航条开始 -->
导航条所有的html代码
<!-- 导航条结束 -->
<!-- 左侧菜单栏开始 -->
左侧菜单栏所有的代码
<!-- 左侧菜单栏结束 -->
京东首页部分代码
2 HTML文档结构
<!-- 文档声明:告诉浏览器使用什么版本的html/xhtml解析该文档 -->
<!DOCTYPE html>
<!-- html标签:该标签内为HTML内容 -->
<html>
<!-- 头部标签:标签内容不会渲染到浏览器的文档窗口,但有特殊含义 -->
<head></head>
<!-- 主体标签: 标签内为网页主题内容 在 浏览器文档窗口渲染给用户展示 -->
<body></body>
</html>
TIPS:文件后缀名是给用户方便查看的,只不过对应不同的文件后缀名有不同的软件进行处理
注意:HTML代码是没有格式的,只是我们习惯了缩进来表示代码关系
3 文档声明
声明不是 HTML 标签,文档声明是为了告诉浏览器使用什么版本的`html/xhtml`解析该文档,文档声明有着固定的格式,即在文档最上方以``开头在HTML 4.01
中,<!DOCTYPE>
声明引用DTD
,因为HTML 4.01
基于SGML
。DTD
规定了标记语言的规则,这样浏览器才能正确地呈现内容
HTML5 不基于SGML
,所以不需要引用DTD
由于目前使用的基本为HTML5,就不对其他版本进行演示,遇到百度即可
<!DOCTYPE html>
4 HTML标签
在<html>...</html>
之内均为html内容,浏览器会读取他们进行框架的渲染
<!DOCTYPE html>
<html lang="zh"> <!-- 添加lang="zh" -->
<head>
</head>
<body>
</body>
</html>
<html lang='zh'>
是向搜索引擎、翻译软件表示该页面是html语言,并且语言为中文网站
en:英文、zh:中文、de:德文、ja:中文
<html lang='zh,en'>
可以同时表示网站拥有两种语言
5 标签基本格式
html标签按照格式分类,可分为
闭合标签:<标签名>内容部分</标签名>
<h1>内容</h1>
自闭合标签:<标签名/>
<img src='' />
闭合标签内部可以存放对应的内容文本,标签可以控制他们的样式,而属性也能控制标签的样式
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
最常见的属性名有id\class\style
id:定义标签的唯一ID,HTML文档树中唯一,不能重复
class:为html元素定义一个或多个类名(classname)(CSS样式类名)
style:规定元素的行内样式(CSS样式)
标签可以拥有自定义的属性
<div id=123 class='456' tp_name="text1"></div>
<!-- tp_name 是自定义的属性名 -->
6 head基础标签
头部部分使用<head>...</head>
进行闭合,用于定义文档的头部,通常是进行引用资源、声明信息的作用,头部标签内的信息不会在网页中显示出来,在head标签中,元素可以引用脚本、层叠样式表等操作
6.1 title标签
<html>网页标题</html>
6.2 meta标签
Meta标签介绍:
<meta>
元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词<meta>
标签位于文档的头部,不包含任何内容<meta>
提供的信息是用户不可见的
meta标签的组成:meta标签共有两个属性,它们分别是http-equiv
属性和name
属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
6.2.1 http-equiv属性
相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
6.2.2 name属性
主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="author" content="这是网页作者"/ >
<meta name="description" content="搜索引擎简介 ">
6.3 引入类标签
在html中还拥有引用CSS、Javascript
代码的标签,具体使用方法在后续对应章节详细介绍
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件或网站图标
7 body基础标签
主体部分是指用<body>...</body>
标签闭合起来的内容,他是直接应用在网页中的部分内容
7.1 标题标签
h1~h6标签是标题大小标签,最直观的表示就是文本显示大小,但功能类似于world软件中的标题。
<!-- 从大到小,指的是一级标题~六级标题 -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
7.2 段落标签
段落标签,一个P标签闭合内的内容会显示在一段中
<p>大家好,我是段落1。</p>
<p>大家好,我是段落2。</p>
<p>大家好,我是段落3。</p>
7.3 格式标签
这里指的是换行符和分隔符标签,他们都是自闭合标签,可以独立存在
<br/> 换行标签
<hr/> 换行线标签
7.4 文本属性标签
HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,比如粗体和斜体字。如果需要在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化。
<strong>加粗</strong>
<b>加粗</b>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
<font size=“10px” color=“red”>规定字体属性</font>
size 字体的大小
color 字体颜色
<pre>html并不认编码时候的格式,需要添加各种格式标签,而pre标签让代码中的格式原本输出到浏览器中</pre>
7.5 超链接标签
a标签是超链接标签,它具有进行网页跳转的功能
<a href="https://www.kinghtxg.com">kinght's blog</a><br/>
<a href="https://www.kinghtxg.com" target="_self">kinght's blog 当前页面跳转</a><br/>
<a href="https://www.kinghtxg.com" target="_blank">kinght's blog 新页面跳转</a>
超链接是浏览者和服务器的交互的主要手段,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。
超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的,用户通过点击超链接可以从一个网页跳转到另一个网页。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时,遇到一个不认识的英文,你只要在这个单词上单击一下,即可跳转到它的翻译页面中,看完单词的解释后点一下返回按钮,又可继续阅读,这就是超链接的常见用途。还有经常到购物网站中去,我们都是在百度搜索,然后点击对应的搜索项进入到对应的购物网站的,这也是超链接的作用。超链接的属性:
属性 | 值 | 描述 |
---|---|---|
href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] href的值留空,则默认是跳转到当前页面,也就是刷新当前页面 |
规定链接的跳转目标 |
title | <a href="http://www.baidu.com" title="国内最著名的搜索引擎网站">百度</a> |
链接的提示信息 |
target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过 |
7.6 锚点
锚点( anchor )是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的链接跳转,运用相当普遍。例如,我们有一个网页,由于内容太多,导致页面很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
例如,返回页面最上方,也可以运用上锚点技术来解决这个问题
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">
<p>第一章内容</p>
</div>
<div>
<p id="i2">第二章内容</p>
</div>
<div id="i3">
<p> 第三章内容</p>
</div>
</body>
</html>
还可以对其他网页进行锚点跳转,通过在不同部位设置不同name名,和使用href=name
的方式进行跳转到网页对应位置
<a href="http://wiki.kinghtxg.com/6_前端开发/001_前端简介.html#22-http响应头">超链接锚点跳转</a>
7.7 图片标签
在HTML中,图像由<img>
标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg、png、gif
src属性:
指定图像的URL地址,是英文source的简写,表示引入资源。
src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。
alt属性:指定图像无法显示时的替换文本。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
点击图片跳转可以配合a标签使用
<a><img src="" alt=""></a>
例如:
<img src='https://skystarry-1251157247.cos.ap-chengdu.myqcloud.com//blog/20201012102822386_1637764831748.gif' width="100px" height="100" alt="欢迎大佬看笔记" />
src后面跟的是图片的链接地址,width是图片的宽,height是图片的高,alt的作用就是如果加载不出图片,对用户的提示图片功能的字显示
7.8 特殊符号
在html页面中空格会被压缩,可以用特殊符号 
作为空格,标识商标,可以用特殊符号®
®,标识版权可以用特殊符号©
©
空格
> 大于
< 小于
& &
¥ ¥
© 版权符号
® 注册商标
8 块级标签与行内标签
标签大致可分为两类
- 块级标签(block) -- 独占一行
- div(块级空标签)、p(段落文本)、 h1-h6(标题)、ul(无序列表)、li、dl(自定义列表)、dt、dd
- 块级标签可以修改长宽 但页面占位还是整行
- 块级标签可以嵌套任意的块级标签和行内标签
- p标签除外,只能嵌套行内标签
- 行内标签(inline) -- 按文本内容占位
- a(超链接)、span(空标签)、strong(加粗)、u(下划线)、em(斜体)
- 行内标签不能嵌套块级标签,可以嵌套行内标签
块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的
<div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
9 列表标签
列表标签分为三类:无序列表、有序列表、标题列表
,列表标签常见于各种榜单、导航栏等场景,主要分为有序列表和无序列表
9.1 无序标签
无序列表,顾名思义就是不含排序的列表
<ul>
<li>案例1</li>
<li>案例2</li>
<li>案例3</li>
</ul>
列表符号默认为实心原点,可以通过修改属性进行修改
<ul type="square">
<li>项目符号:正方形</li>
</ul>
<ul type="circle">
<li>项目符号:空心圆</li>
</ul>
<ul type="disc">
<li>项目符号:实心圆</li>
</ul>
9.2 有序列表
有序列表就是在列表前会加上排序的数字
<ol>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
</ol>
列表符号默认为数字,可以通过修改属性进行修改
<ol type="1">
<li>项目符号:数字</li>
<li>项目符号:数字</li>
<li>项目符号:数字</li>
</ol>
<ol type="A">
<li>项目符号:字母</li>
<li>项目符号:字母</li>
<li>项目符号:字母</li>
</ol>
<ol type="i">
<li>项目符号:罗马数字</li>
<li>项目符号:罗马数字</li>
<li>项目符号:罗马数字</li>
</ol>
9.3 标题列表
标题列表又称为自定义列表,可以作为多级目录使用
<dl>
<dt>第一章</dt>
<dd>1.1</dd>
<dd>1.2</dd>
<dt>第二章</dt>
<dd>2.1</dd>
<dd>2.2</dd>
</dl>
本文来自博客园,作者:kinghtxg,转载请注明原文链接:https://www.cnblogs.com/kinghtxg/articles/17158154.html