0
点赞
收藏
分享

微信扫一扫

黑马程序员之Web前端全栈 · 阶段一 前端开发基础 (3)

回溯 2022-05-04 阅读 36
前端html

Web前端全栈 · 阶段一 前端开发基础 (3)


说明


三、HTML 标签

1. HTML 语法规范

1.1 基础语法概述

1.2 标签的关系

双标签关系可以分为两类:包含关系并列关系
包含关系:

<head>  
	<title> </title> 
</head>

包含关系可以理解为“父子关系”
并列关系

<head> </head>
<body> </body>

并列关系可以理解为“兄弟关系”

2. 基本结构标签

2.1 第一个 HTML

一个典型的HTML页面如下所示:

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		你好,世界!
		Hello,World!
	</body>
</html>

结构标签说明:

标签名定义说明
<html></html>HTML标签页面中最大的标签,我们称之为 根标签
<head></head>文档的头部注意在head标签中我们必须要设置的标签是title
<title></title>文档的标题让页面拥有一个属于自己的网页标签
<body></body>文档的主体元素包含文档的所有内容,页面内容基本都是放到body里面的

2.2 基本结构标签总结

基本结构标签总结

3. 网页开发工具

3.1 常见的网页开发工具

  • Dreamweaver
  • Sublime
  • Webstorm
  • Hbuilder
  • Eclipse
  • Visual Studio Code
    常见的Web网页编辑器

3.2 使用 VSCode 软件进行网页开发

使用 VSCode 软件创建新页面的步骤如下:

使用 VSCode 软件创建的新页面的代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我利用vscode创建的第一个页面</title>
</head>
<body>
    写代码是一件非常快乐的事情  happy
</body>
</html>

下面对该页面新引入的部分标签进行解释:

3.2.1 文档类型声明标签

<!DOCTYPE html> :告诉浏览器这个页面采取html5版本来显示页面。

3.2.2 lang 语言种类

用来定义当前文档显示的语言,其中

  • en 定义语言为英语
  • zh-CN 定义语言为中文

3.2.3 字符集

3.2.4 以上新引入的标签标签总结

4. HTML 常用标签:

4.1 语义化标签

学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。

下图是一个没有语义化标签的网页:
没有语义化标签的网页
添加了语义标签后,该网页变为:
添加了语义标签后的网页

4.2 常用的标签

4.2.1 标题标签 < h1 > – < h6 >

h为单词 head 的缩写,意为头部、标题。
标签语义:作为标题使用,并且依据重要性递减。

具体实现:

		<h1>标题一共六级选,</h1>
		<h2>文字加粗一行显。</h2>
		<h3>由大到小依次减,</h3>
		<h4>从重到轻随之变。</h4>
		<h5>语法规范书写后,</h5>
		<h6>具体效果刷新见。</h6>

以上代码对应的实现效果如下:

4.2.2 段落标签 < p >

p为单词 paragraph [ˈpærəgræf] 的缩写,意为段落。
标签语义:可以把 HTML 文档分割为若干段落。

具体实现:

	<p> 第一个段落标签 </p><p> 第二个段落标签 </p>

以上代码对应的实现效果如下:

4.2.3 换行标签 < br / >

br为单词 break 的缩写,意为打断、换行。
标签语义:强制换行。

具体实现:

      你好<br />世界

以上代码对应的实现效果如下:

4.2.4 文本格式化标签

标签语义:突出重要性, 比普通文字更重要。

常见的文本格式化标签如下:

语义标签说明
加粗<strong></strong> 或者 <b></b>更推荐使用<strong>标签加粗,语义更强烈
倾斜<em></em> 或者 <i></i>更推荐<em>标签加粗,语义更强烈
删除线<del></del> 或者 <s></s>更推荐使用<del>标签加粗,语义更强烈
下划线<ins></ins> 或者 <u></u>更推荐使用<ins>标签加粗,语义更强烈
增大<big></big>ABCabcABCabc
减小<small><\small>ABCabcABCabc
上标<sup></sup>ABCabcABCabc
下标<sub></sub>ABCabcABCabc

4.2.5 < div > 和 < span >标签

div 是 division 的缩写,表示分割、分区。
span 意为跨度、跨距。
标签语义:通常用于网页内容布局。

具体实现:

     <div> 这是头部 </div>    
     <span> 今日价格 </span>

以上代码对应的实现效果如下:

4.3 图片标签

4.3.1 图像标签

img为单词 image 的缩写,意为图像。
src 是<img>标签的必须 属性 ,它用于指定图像文件的路径和文件名。

标签语义:用于在网页中插入图片。

具体实现:

    <img src="图像URL" />
    <img src="https://img-blog.csdnimg.cn/c46ff7439c8c46039218c9d3d903c748.png" />

以上代码对应的实现效果如下:

4.3.2 图像标签的其他属性

属性属性值说明
src图片路径必须属性
alt文本替换文本:图像不能显示的文字
title文本提示文本:鼠标放到图像上显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细

实现举例:​

<img src="图像URL" alt="这是个不可加载的图片示例" title="本图片不可加载" width="100" height="100" />
<img src="https://img-blog.csdnimg.cn/47e620b3a6b741af9bcdf84ee48b7b3e.png"  alt="这是个可加载的图片示例" title="本图片可加载" width="500" height="300" />

以上代码对应的实现效果如下:

4.4 链接标签

4.4.1 路径

4.4.1.1 目录文件夹 和 根目录

实际工作中,我们的文件不能随便乱放,否则用起来很难快速地找到他们,因此我们需要一个文件夹来管理他们。

在 VSCode 中,我们通常在“文件 — 打开文件夹“ 中选择目录文件夹,以方便后期管理文件。

由于页面中的图片会非常多, 通常我们会在目录文件夹中新建一个文件夹(images)来存放这些图像文件,这时再查找图像,就需要采用 “路径” 的方式来指定图像文件的位置。

路径分为相对路径和绝对路径。

4.4.1.2 相对路径

相对路径中使用的符号如下:

相对路径分类符号说明
同一径图像文件位于HTML文件同一级 如 <img src="baidu.gif />
下一级路径/图像文件位于HTML文件下一级 如 <img src="images/baidu.gif" />
上一级路径../图像文件位于HTML文件上一级 如 <img src="../baidu.gif" />
4.4.1.2 绝对路径

4.4.2 链接标签

a为单词 anchor [ˈæŋkə(r)] 的缩写,意为:
标签语义:用于在网页中插入可跳转的链接。
其两个属性的作用如下:

属性作用
href用于指定链接目标的url地址
target用于指定链接页面的打开方式,其中_self为默认值,_blank为从新窗口打开

具体实现:

	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
	<a href="https://www.csdn.net/" target="_blank"> 点我跳转至CSDN主页面 </a>

以上代码对应的实现效果如下:

4.5 注释 和 特殊字符

4.5.1 注释标签

标签语义:用于在网页中插入注释。
HTML中的注释以“<!--”开头,以“ -->”结束。

历史上有趣的注释

具体实现:

         <!-- 这是一句网页不会显示的注释语句 --> 

以上代码对应的实现效果如下:

4.5.2 特殊字符

特殊字符描述字符代码
  ~  空格符&nbsp
<小于号&lt
>大于号&gt
&和号&amp
人民币&yen
©版权&copy
®注册商标&reg
°&deg
±正负号&plusmn
×乘号&times
÷除号&divide
²平方2(上标2)&sup2
³立方3(上标3)&sup3

传送门

Web前端全栈 · 阶段一 前端开发基础 (2)
Web前端全栈 · 阶段一 前端开发基础 (4)<未完工待续。。。>

举报

相关推荐

0 条评论