一、前端开发的HTML介绍

最新推荐文章于 2024-06-25 06:17:50 发布

戴代_

最新推荐文章于 2024-06-25 06:17:50 发布

阅读量179

点赞数 1

分类专栏：前端笔记文章标签： html

本文链接：https://blog.csdn.net/m0_49879527/article/details/108103699

版权

前端笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、HTML

1.HTML语法

代码如下（示例）：

<!DOCTYPE html>              <!-- 文档声明 -->
<html lang="en">             <!-- html开始标签 -->
<head>                         <!-- head开始标签 -->
    <meta charset="UTF-8">       <!-- meta标签只有开始标签 -->
    <title>Document</title>      <!-- title标签的开始和结束标签写在了同一行 -->
    <style>                      
		p{color:red;} /*style内部为样式，语法与html不同*/
	</style>
</head>                        <!-- head结束标签 -->
<body>                         <!-- body开始标签 -->
    <p>我的第一个网页</p>
</body>                        <!-- body结束标签 -->
</html>                      <!-- html结束标签 -->

html语法有以下四个特征
大部分HTML标签都是成对出现的，【开始标签】是一对尖括号中间写入标签名，而【结束标签】相对于【开始标签】会在标签名之前添加一个斜杠。例如上面案例中
有些标签只有【开始标签】，没有【结束标签】。例如上面案例中meta标签，它就没有结束标签
开始标签中可以填写一些其他信息，例如meta中的charset=“UTF-8”，这叫做HTML标签的【属性】，用来进一步描述标签的信息。
HTML标签可以相互嵌套，例如body标签中嵌套了p标签，而body标签本身又在最外层的html标签中

2.常见的标签

HTML标签有上百个之多，我们只要掌握常见的html标签，就可以完成丰富的网页。而且我们在后续的项目开发当中，也是仅仅只使用这十几个标签而已。

标题标签

在浏览网页时我们经常会看到一篇文章的标题，或是文章中某一段落的标题。像这样的标题，我们使用标题标签h*(*代表着1-6六个数字）
代码如下（示例）：

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

运行以上代码我们发现，标题标签会呈现一种加粗效果，h1字体大小最大，从h1-h6字体逐渐变小。

列表标签
网页中的列表是非常常见的，HTML中的列表包括有序列表，无序列表，自定义列表，在后续的开发中，比较常用的是无需列表。
代码如下（示例）：

<!-- 
    <ul> 标签用来定义无序列表，将 <ul> 标签与 <li> 标签一起使用，就可以创建无序列表。
-->
<h1>水果列表</h1>
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>草莓</li>
</ul>


<!--
    <ol> 标签可以定义有序列表，将 <ol> 标签与 <li> 标签一起使用，就可以创建有序列表，列表排序以数字来显示。
-->

<h1>水果列表</h1>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>草莓</li>
</ol>


<!--
    <dl> 标签可以定义描述列表，<dl> 标签与 <dt> 和 <dd> 一起使用，创建自定义列表（描述列表）。
-->

<dl>
     <dt>香港四大天王</dt>
       <dd>刘德华</dd>
      <dd>郭富城</dd>
       <dd>黎明</dd>
       <dd>张学友</dd>

</dl>

超链接标签（锚点标签）
网页中的超链接用a标签表示
代码如下（示例）：

<a href="http://baidu.com">点我可以跳转到百度</a>
<a href="demo01.html">点我跳转到demo01.html文件</a>
<a href="#footer">点我跳转到页尾</a>

上面我们已经提到了HTML标签的【属性】，【属性】用来进一步描述标签。例如上面的三个例子，我们可以使用href属性设置不同的a标签链接到不同的位置。

关于href属性的值有示例代码中的三种设置方式，使用方法如下所述：

跳转到其他网站，网址前要写http://或https://。
跳转到当前网站(或本机文件),可以直接填写相对路径或绝对路径。
可以通过设置锚点的方式，让网页跳转到当前页面的指定位置。

在实际开发中，我们经常会将超链接放在列表中
代码如下（示例）：

<ul>
    <li><a href="http://baidu.com">百度</a></li>
    <li><a href="http://163.com">网易</a></li>
    <li><a href="http://qq.com">腾讯</a></li>
</ul>

图片标签
网页中的图片可以使用img标签表示
代码如下（示例）：

<img src="images/logo.png" alt="文件无法显示">

img标签涉及到两个重要的属性：

src属性可以指定要显示的图片源文件的路径；路径分为绝对路径和相对路径。
相对路径就是：指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。

绝对路径:是指完整的网址

alt属性中可以设置文本，当图片无法正常显示的时候，图片位置会显示alt属性中的文本信息。
div标签

div标签在网页中没有明确的语义，可以说它是一个【无语义标签】，div标签常常用来作为一个容器存放其他标签，是一个很重要的布局工具，它是个块级元素（后面会讲到块级元素，行内元素以及行内块的区别，这里了解一下就可以了）
代码如下（示例）：

<div>这是一个容器</div>

span标签

span标签与div标签类似，同样是一个【无语义标签】，通常用来存放文本内容。它是个行内元素。
代码如下（示例）：

<h1>我最喜欢的颜色是蓝色</h1>
<h1>我最喜欢欢的颜色是<span>蓝色</span></h1>

在上面的第一行代码中，所有的文本都存放在h1标签当中，我们只能给这些文字统一设置样式。如果我们希望只给蓝色设置样式，那么就需要用到第二行的写法。这样我们就可以单独给蓝色两个字设置样式了。

如果需要单独设置文字的样式，又没有什么特别的语义，那么就需要用到span标签。

3.常用的html属性

除了上面讲过的a标签的href属性和img标签的src属性和alt属性，接下来我们再说两个常用的属性。
代码如下（示例）：

<div id="top">id属性就是标签的身份证</div>
<div class="box">class属性可以给标签分类</div>
<div class="box">class属性可以给标签分类</div>
<div class="box">class属性可以给标签分类</div>

id属性就像标签的身份证一样，不能重复，例如我们已经编写了一个id为top的属性，那么后续的标签中就不能再有id为top的标签。我们可以通过id找到HTML文档中的唯一元素，并设置其样式（第04节我们讲解如何使用css选择器找到指定元素）。

class属性可以将HTML标签分类，我们可以通过box属性找到所有class值为box的HTML标签。

总结

华丽的网页界面，都是由静态网页和一些动态效果，插入的视频，和flash等等，不得不说，静态网页的制作，是学习网页的必经之路，可见静态网页在学习网页的前端是十分重要。静态网页主要是通过html制作。

戴代_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一、前端开发的HTML介绍

一、HTML目录一、HTML1.HTML语法html语法有以下四个特征2.常见的标签标题标签列表标签超链接标签（锚点标签）图片标签div标签span标签3.常用的html属性总结1.HTML语法代码如下（示例）：<!DOCTYPE html> <html lang="en"> <head>
复制链接

扫一扫