前端学习笔记 HTML5 保姆级教程

不染pigpig

已于 2022-05-18 10:59:30 修改

阅读量454

点赞数

分类专栏：前端学习文章标签： html5

于 2022-04-06 09:14:12 首次发布

本文链接：https://blog.csdn.net/weixin_47464737/article/details/123964018

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 保姆级教程

前端学习路线：

HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js
除了掌握这些技术，后期我还需要学习更多辅助性的技能，包括SCSS、Typescript、UI框架, gulp和babel等等。学完，并且能够熟练使用之后，才算是一位真正意义上的前端工程师。

Web领域，不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。

第一章、认识HTML5

1.1 认识HTML

HTML（HyperText Markup Language，超文本标记语言,一门描述性语言，描述网页）.
由蒂姆.伯纳斯.李制定的一套规则：W3C（万维网联盟）, 根据这套规则来写前端，获取网页内容。

1.2 认识浏览器

若某个标签在某个浏览器中不能使用或出现错误，可以用如下网站查询该标签在浏览器中的使用
caniuse.com

网页浏览器：

还有移动端浏览器 QQ浏览器等

1.3 开发工具

1.3.1 VScode 安装及插件安装

以下开发工具都可以，推荐使用VScode，官网下载安装

安装好后，可以装 中文插件，点下 install，下载好以后，关闭，再打开就可以

auto rename tag: 修改一个标签时，另一半标签也会跟随修改
view in browser 修改代码后，右键点预览
live server 实时浏览，修改好以后就点 open with live server，后面代码的修改时，网页实时自动刷新
htmltagwrap 选中段内容后，按下 Alt + W ，直接出现

标签，现在只需要修改标签名就可以修改标签

1.3.2 VScode 使用技巧

输入标签： html + 回车 → ，再自己换行，敲错了会有提示
放大缩小标签： Ctrl + “+”， ctrl + “-” 放大缩小
在第一行直接敲 “!”，回车，显示主要标签，如下图

第二章 HTML5 的基本语法

文档扩展名： xxx.html。
语法： <标签符>内容</标签符> = <开始标签> 内容<结束标签>
标签与元素： 标签就是元素，p标签也可说成p元素

2.1 基本结构

四个部分组成
文档声明：
html标签对：<html> </html/>
head标签对：<head></head />
body标签对：<body></body />
在这里插入图片描述
说明
<!DOCTYPE html> : 声明这是一个html页面
<head>标签

<head>
        #meta标签 #定义页面的特殊信息如关键字、页面描述等；两个重要属性： name 和 http-aquiv
		#编码方式
		<meta charset="UTF-8">   #防止页面出现乱码
		#网页关键字
		<meta name="keywords" content="键盘敲烂，月薪百万”/>  
		#网页描述
		<meta name="description" content="只要功夫深，铁杵磨成针”/>  
		#本页作者
		<meta name="author content="jack"/>
		#版权声明
		<meta name="copyright" content="版权归我“”/>
</head>

meta标签的http-equiv属性只有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。

<!DOCTYPE html>
<html >
<head>   
		 <meta http-equiv="refresh" content="6;  url=http://www.lvyestudy.com"/>
 </head>
 <body>    
	 <p>这个页面在6秒之后自动跳转到lxx网</p>
</body>
</html>

style标签 定义元素的CSS样式

<head>   
		 <style  type="text/css">
		 #这里写CSS样式
		 </style>
 </head>

script标签 定义页面的JavaScript代码，或引入外部JavaScript文件

<head>   
		 <script >
		 #这里写Javascript代码
		 </script >
 </head>

link标签 引入外部样式文件（CSS文件）
body标签

2.2 标签语法

标记分为单标记和双标记。双标记又<标记> 开始和，在标记前加 “/” 表示结束， </标记> 结束；单标记形式：<标记/>
在这里插入图片描述

2.3 语言规范

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号都可以

2.4 快捷键及代码编写技巧

ctrl + w 选中
写多个同样的标签可以<标签>*n 按下回车
注释选中 ctrl + / 或者 < !-- 内容–>
创建多个标签
dl>dt+dd 回车就可以了例如 dl>dt{11111}+dd{22222} 回车

<dl>
        <dt>11111</dt>
        <dd>22222</dd>
    </dl>

路径分类：绝对路径、相对路径
绝对路径 是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。
注意 : 绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符.
相对路径，就是相对于自己的目标文件位置。
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名; <img src=“pic4.gif” />
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名； <img src=“img/pic.png“/>
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
…/目标文件文件名+扩展名；< img src=”…/小可爱.png"/>

第三章 HTML 文本标签

3.1 标题标签 (h1)

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

在这里插入图片描述

3.2 段落标签（p）

<p>这是一个段落</p>

3.3 文本修饰标签

3.3.1 换行（br）

<br />
换行是一个空标记（强制换行） 在需要换行的内容后加 <br>标签

3.3.2 水平线（hr ）

<hr /> 空标记

效果图：

3.3.3 加粗（b/ strong）倾斜（em /i）删除（s/del）下划线（u）上标（sup）下标（sub）

<b>粗体文本</b>  只显示加粗
<strong>强调的内容</strong>突出的文本

<em>强调文本</em>
<i>斜体文本</i>

<s>删除的文本</s>删除线
<del>删除的文本</del>删除线  推荐del

<u>文本</u>下划线
<sub>下标文本</sub>下标
<sup>上标文本</sup>上标

其他标签：
<code>计算机代码</code>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<ins>插入的文本</ins>

框架标签：
<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>

应用：

效果图：

上标标签 <sup>内容</sup>

案例：

代码：

<!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>
    <h1>HTML5</h1>
<p>本词条<strong>由“科普中国”科学百科词条编写与应用工作项目审核</strong> 。</p>

<p>
    HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．
    <br>
    被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开
    <br>
    发。
</p>

<p>
    HTML5是Web中核心语言HTML的规范，<em><b>用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的</b></em>，在浏览器中 <br>
    通过一些技术处理将其转换成为了可识别的信息。HTML5在从前<del>HTML4.01</del>的基础上进行了一定的改进，虽然技术人员在开发 <br>
    过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。<sup>[1-2]</sup>
</p>

<h2>Html5的新特性</h2>
<hr>
<p>HTML5将Web带入一个成熟的应用平台，在这个平台上，<strong>视频、音频、图像、动画以及与设备</strong>的交互都进行了规范。</p>

<h3>智能表单</h3>
<p>
    表单是实现用户与页面后台交互主要组成部分，HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增 <br>
    强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5 <br>
    的表单来实现；一些如内容提示、焦点处理、数据验证等功能，也可以通过THML5的智能表单属性标签来完成。<sup>[6]</sup>
</p>

<h3>多媒体</h3>
<p>
    HTML5最大特色之一就是支持音频视频，在通过增加了audio、video两个标签来实现对多媒体中的音频、视频使用的 <br>
    支持，只要在Web网页中嵌入这两个标签，而无需第三方插件（如Flash）就可以实现音视频的播放功能。HTML5对音频、视频  <br>
    文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
</p>
</body>
</html>

3.3.4 水平线标签属性应用（hr）

<hr color=“green” width="300" align="left">   颜色 宽度 靠左靠右
<hr noshade /> 取消阴影

3.4 特殊符号尖角号空格

尖角号 - 空格 - 版权 - 商标TM R

# 尖角号 &lt; /&gt;
<body>
    <p>
        我上一节中讲的内容是hr,用法是这样的 &lt;hr noshade /&gt;
    </p>

    <p>
        <hr noshade />
    </p>
</body>

结果呈现：

#空格 &nbsp
<body>
    
    <p>&nbsp;&nbsp;&nbsp;&nbsp;赵钱孙李，周吴郑王</p>
    <p>&emsp;&emsp;赵钱孙李，周吴郑王</p>
    
</body>

结果：

<body>

版权： &copy;
商标： <p>&trade;</p>  ™
      <p>&reg;</p>    ® 
                           
</body>

3.5 分组标签 div 和 span

- div 没有具体的意义，将布局实现区块的划分, 独占一行

<body>
	<div>1111</div>
	<div>1111</div>
	<div>1111</div>  #表示内容分为三块
</body>

- span 标签，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离 作用就是独立修饰某一个文本，文字

<body>
	<h3><span>体育</span><span style="color: gray;">sports</span></h3>
</body>

效果图：
在这里插入图片描述

3.6 列表标签有序列表无序列表自定义列表

有序列表

<!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>
    <!--注释-->
    <!-- 
        1. li里面可以随意放标签，但是ol里面只能防止li,
        2. 数字是自动生成的。 
        3. type:1,a,A,i,I  除了这5个值之外的，就按照 1 2 3 来排序
           start: 取值只能是一个数字  从第几个开始
    -->
    <ol type="a" start="27">
        <li>把冰箱打开</li>
        <li>大象装进去</li>
        <li>冰箱关上</li>
    </ol>
</body>
</html>

无序列表

<body>
    <!-- 
        1. ul里面只能放li, li里面可以放其他标签
        2. 默认的是黑色的实心圆 
        3. type, disc（实心圆）  circle（空心圆） square（正方形实心）  none(什么都没有，用的多)
    -->
    <ul type="none">
        <li>蒸羊羔</li>
        <li>蒸熊掌</li>
        <li>烧花鸭</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

自定义列表

<body>
    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
    </dl>

    <dl>
        <dt>11111</dt>
        <dd>2222</dd>
    </dl>

3.7 图像（img）音频（audio）视频标签（video）超链接标（a）签

图像标签:

<img  src=“图片路径”   title=“鼠标悬停上去之后的提示信息” 
 alt=“图片不显示之后（加载失败）的提示信息“ width=“200px” height=“200px”/ >

超链接标签：

作用：能够实现不同页面的跳转
形式： <a  href=“路径”  title=“鼠标悬停上去之后的提示信息” 
           target=“规定在何处打开文档"> 内容  </a>
Target属性：规定在何处打开文档。
target=“_self“  默认值
target=“_blank“  新窗口打开

举例： 
<body>
    <a href="http://caniuse.com">百度</a>
    <a href="http://caniuse.com" target="_blank">百度</a>


    <a href="02-test.html">成绩查询</a>
    <a href="http://www.baidu.com" title="百度查询">
        <img src="img/baidu.png" alt="">
    </a>
    </body>

结果：

音频标签

<body>
	<audio controls>
	    <source src="horse.ogg" type="audio/ogg">
	    <source src="horse.mp3" type="audio/mpeg">
	    您的浏览器不支持 Audio 标签。
	</audio>
</body>

视频标签

<body>
	<video width="320" height="240" controls>
	  <source src="movie.mp4" type="video/mp4">
	  <source src="movie.ogg" type="video/ogg">
	    您的浏览器不支持 Video 标签。
	</video>
</body>

3.8 表格标签（table）和表单标签（form）

后续使用的时候补充

3.9 头部标签

后续使用的时候补充

4 常用标签整理

① label 表单控件

<label for="email">E-mail:</label>
<input type="text" id="email">
或
<label>E-mail:<input type="text"></label>

显示效果：
在这里插入图片描述
作用：是使用户在填写表单的项目时有更好的体验

内联元素会在一行显示
网页中当我们点击E-mai字样或文本框时都会在文本框中出现光标
前提是label的for属性的属性值与想要关联的表单控件的id一样

<label for="c">c:</label> <input type="radio" id="c"><br>
<label for="b">b:</label> <input type="radio" id="b"><br>
<label for="c">c:</label> <input type="radio" id="c">

显示效果如下：
在这里插入图片描述

不染pigpig

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记 HTML5 保姆级教程

HTML5 保姆级教程前端学习路线：HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js除了掌握这些技术，后期我还需要学习更多辅助性的技能，包括SCSS、Typescript、UI框架, gulp和babel等等。学完，并且能够熟练使用之后，才算是一位真正意义上的前端工程师。Web领域，不少技术之间都有着交叉关系，只有“通”十行才可能做到“精”一行。文章目录HTML5 保姆级教程第一章、认识HTML51.1 认识H
复制链接

扫一扫