HTML基础2

最新推荐文章于 2022-04-28 17:55:59 发布

梦幻之光_dream

最新推荐文章于 2022-04-28 17:55:59 发布

阅读量202

点赞数 1

分类专栏： Web前端开发文章标签： html

本文链接：https://blog.csdn.net/William_fang/article/details/116106628

版权

Web前端开发专栏收录该内容

108 篇文章 10 订阅

订阅专栏

文章目录

一.HTML语法规则
二.标签学习
篇章

一.HTML语法规则

1.概述

我们知道网页是在整体结构中进行开发的。如果想要搭建完整的网页，必须掌握标签知识点，进行网页搭建。

2.标签

标签分为双标签和单标签。

双标签：由3个部分组成，开始→内容→结束。
例如，h1标签。作用是插入一级标题。

<h1>学习</h1>

单标签：由1个部分组成，没有内容和结束，只有开始。
例如，hr标签。相当于开始和结束合体了，斜杠替代了结束。hr标签的作用是插入一条水平线。

<hr/>

3.标签级别

在超文件标记语言中，标签是有级别的，分为文本标签和容器标签。

文本级别标签

常用的文本级别标签：p标签、span标签、img标签、表单元素等。

显示的内容部分一般只能插入文字，或者是其他文本级别的标签，否则将来学习样式时，网页的布局会受到影响。

例如：下面的写法就可以理解文本级别标签了。

<p>
	我是段落
	<span>我是文本</span>
</p>

结论：p标签与span标签都是文本级别标签，它们是可以相互嵌套的。所以，我们也可以写成下面的写法。

<span>
	我是段落
	<p>我是文本<p>
</span>

容器级别标签

常用的容器级别标签：div、h1、dl、dt、dd、ul、ol、li 等。

网页显示内容部分可以插入任意内容，或者是其他容器级别的标签，也可以文本级别的标签。

例如，下面的写法就可以理解容器级别标签了。

<div>
   <h1>快乐</h1>
   学习
   <span>向前冲</span>
</div>

结论：容器级别标签的写法不可以改变顺序，不然会影响网页布局。

文本级别标签与容器级别标签的区别

总结：容器级别标签里可以出现文本级别标签。

但是，文本级别标签里是不可以出现容器级别标签，会影响网页的布局。

所以，标签的级别不同，嵌套的内容也是不同的。

4.标签属性

标签可以添加属性，属性由两部分组成，分别是属性名和属性值。

接下来，我们从下面这三种写法进行解析。

   <h1 class="box1" >标签</h1>   
   <h1 class="box1 box2" >标签</h1>  
   <h1 class="box1"  id="color">标签</h1

第一行：class是属性名，它的属性值是box1。
第二行：class是属性名，它的属性值是box1和box2。
第三行：class是属性名，它的属性值是box1。id是属性名，它的属性值是color。
所以，我们得出结论：标签的属性名可以是多个，属性值也可以是多个。

总结：标签属性可能对于整个网页有影响，也可能对某个标签有影响。

二.标签学习

h1标签

h1标签的作用：插入一级标题。

p标签

段落标签属于文本级别的标签，作用是插入一段文字。

img标签

图像标签属于文本级别的标签，作用是插入一张图片。它是单标签，可以借助图片标题把图片理解成文字。

img标签的属性名：图片标题、图片高度、图片宽度、图片边框。

属性名src的相对路径

…/：代表文件所在文件夹的上一级文件。那个省略号是可以当成image文件的。

/：斜杠可以理解为进入。如果是image/1.jpg,那么image就是上一级。用 / 进入下一级1.jpg，就能访问到图片了。

   <img src="1.jpg"/>

属性名src的绝对路径

1.从盘符当中复制一个路径，放到src里。

 <img src="D:\360downloads\tree.jpg"/>

2.从别人网站中，找到图片，并复制它的路径，放到src里。

  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F65%2F80%2F5957e7369da50_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621867908&t=77de3074c55c97662ac4181441f9da99"/>

其他属性名的作用

alt的作用：当图片没有图像的时候，用文字来代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签使用</title>
</head>
<body>
    <img src="1.jpg" alt="无法显示"/>
</body>
</html>

在这里插入图片描述

title的作用：当鼠标移到图片上的时候，显示提示的文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签使用</title>
</head>
<body>
    <img src="tree.jpg" title="这是大树"/>
</body>
</html>

在这里插入图片描述

width的作用: 设置图片的宽度。

 <img src="tree.jpg" width="100px"/>

宽度属性值是由数字+像素组成，例如100px，px是像素的单位。

height的作用：设置图片的高度。

<img src="tree.jpg" height="100px"/>

border的作用：设置图片外层的边框宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签使用</title>
</head>
<body>
    <img src="tree.jpg"  border="40" />
</body>
</html>

在这里插入图片描述

总结：如果图片没有设置宽度和高度，就会显示原始图片的大小。

a标签的使用

a标签是超链接的意思，作用是可以设置不同页面的跳转，或者是同一个页面中不同位置的跳转。

a标签是文本级别标签，也是双标签。常用属性：href。

<a href=""></a>

href:当前网页跳转到另外一个网页的地址。这个地址可以相对路径，也可以是绝对路径。

相对路径

 <a href="other/one.html">跳转</a>

绝对路径

<a href="http://www.baidu.com">百度一下</a>

title：鼠标移到上面的时候，提示文字。属性值可以是任意类型的字符。

<a href="one.html" title="点击一下">跳转</a>

在这里插入图片描述

例如，我们要跳转到百度，可以使用绝对路径的方法，将百度的网址放到href里。

<a href="http://www.baidu.com">百度一下</a>

例如，我们要跳转到自己写的网页，如果那个网页和当前网页在同一个路径的情况下，放一个以后缀名为html的文件名即可。

<a href="one.html">百度一下</a>

a标签——锚点的使用

锚点的意思：锚点可以称为命名锚点。锚点也可以理解为追踪定位器。只要我们对某个位置的内容设置了锚点，不管这个位置的内容在哪一个网页的角落，我们都可以利用锚点迅速地找到那个内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点使用</title>
</head>
<body>
    <p id="current">设置锚点</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <a href="#current">设置锚点链接</a>
</body>
</html>

在这里插入图片描述
点击之后，如下图

总结：设置锚点的步骤。

1.设置锚点：任意标签都可以当做锚点。有锚点的标签，需要加一个id属性。
锚点的id属性值：一般情况下是英文、中文、数字、横线、下划线等。最好不要用中文。

<p id="current">设置锚点</p>

2.设置锚点链接,是需要使用a标签的。属性名href后面的属性值是由 # + 锚点id的属性值组成。

<a href="#current">设置锚点链接</a>

注意事项：多个锚点的属性名id的属性值别重名。

a标签的空链接

 <a href="#">空链接</a>

超链接的效果：文字下面会有划线。

空链接：点击空链接，会在原来的网址上加一个#，相当于回到了原来的地方。

篇章

上一篇：HTML基础1

下一篇：HTML基础3

梦幻之光_dream

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录