当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

web前端-《初识HTML》(附实例详解)

教程管理员 发布于2023-09-26 23:06 HTML教程 147

简介: web前端-《初识HTML》(附实例详解)

🍁(一)HTML简介


🔥1.什么是HTML?


  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)


  • HTML 不是一种编程语言,而是一种标记语言 (markup language)


  • 标记语言是一套标记标签 (markup tag)


  • HTML使用标记标签来描述网页


🔥2.HTML标签


  • HTML标签由 尖括号包围 的关键词。如:< html>


  • HTML 标签通常是成对出现的,如 < p > 和 < /p >


  • 标签对中的第一个标签是开始标签(< p >),第二个标签是结束标签(< /p >)


注意:并不是所有标签都有结束标签如< b >


🔥3.HTML文档


-HTML文档包含 HTML 标签和纯文本


-HTML文档也被称为网页


浏览器会自动读取HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是使用标签来解释页面的内容


实例:


<html>
<body>
<h1>欢迎!!</h1>
<p>你好,一起来学习前端吧!</p>
</body>
</html>


image.png


在这串代码中


  • < html > 与 < /html > 之间的文本描述网页


  • < body > 与 < /body > 之间的文本是可见的页面内容


  • < h1 > 与 < /h1 > 之间的文本被显示为标题


  • < p > 与 < /p > 之间的文本被显示为段落


🍁(二)HTML四个基础标签


🔥1.HTML标题


HTML 标题(Heading)是通过 < h1 > — < h6 > 等标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<h2>hello world</h2>
<h3>hello world </h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</body>
</html>


image.png


🔥2.HTML段落


HTML 段落是通过 < p > 标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
</body>
</html>


image.png


🔥3.HTML链接


HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签,通过它可以实现页面的跳转。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
<a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a>
</body>
</html>


image.png


此时只需点击文字即可跳转。


🔥4.HTML图像


HTML 图像是通过 < img > 标签进行定义的。


实例:


<html>
<body>
<h1>hello world </h1>
<p>sulaing!!!</p>
<a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a><br/>
<img src="https://img1.baidu.com/it/u=386692673,2792409680&fm=253&fmt=auto&app=138&f=JPEG?w=571&h=381" alt="web前端" width="300px" height="200px">
</body>
</html>


image.png


参数src为图片的路径,这里可以选择网页图片的地址,或者是本地图片,当使用本地图片时,需使用绝对路路径来定位图片。


参数alt为当图片路径不对加载图片出现错误时显示的内容。如:


image.png


🍁(三)HTML元素


HTML 元素指的是从开始标签结束标签所有代码。


🔥1.元素语法


  • HTML 元素以开始标签起始,以结束标签终止。


  • 元素的内容是开始标签与结束标签之间的内容。


  • 某些 HTML 元素具有空内容。


  • 空元素在开始标签中进行关闭(以开始标签的结束而结束),如< br > 换行标签。


  • 大多数 HTML 元素可拥有属性,如widh,height等。


温馨提示: 在html中虽然没有结束标签也可以浏览器也能正确读取出来。但尽量加上结束标签,这也是我们编程的一个良好的习惯!!


🍁(四)HTML属性


属性是 HTML 元素提供的附加信息


  • HTML元素可以设置属性


  • 属性可以在元素中添加附加信息


  • 属性一般描述于 开始标签


  • 属性总是以名称/值对的形式出现,比如:name=“suliang”。


实例:


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


这里的href就是a标签的属性,且是设置在a标签的开始标签里面的。


🔥1.常见HTML元素属性


属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的 唯一 id
style规定元素的行内样式(inline style)
title描述了元素的 额外信息 (作为工具条使用)


🍁(五)HTML文本格式化


在html中,又是我们需要对文本进行格式化输出,例如加粗文本,斜体文本,以及文本的上标和下标的表示等等。


实例:


<!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>Document</title>
</head>
<body>
    <p>格式化文本</p>
    <p>定义<b>粗体文本</b></p>
    <p>定义<em>着重文本</em></p>
    <p>定义<i>斜体文本</i></p>
    <p>定义<small>小号文本</small></p>
    <p>定义<strong>加重语气文本</strong></p>
    <p>定义<sub>下标</sub>H<sub>2</sub>O</p>
    <p>定义<sup>上标</sup>2<sup>10</sup></p>
    <p>定义<ins>插入字</ins></p>
    <p>定义<del>删除字</del></p>
</body>
</html>


image.png


🍁(六)HTML超链接


tips:在href属性中填写的url最好始终在url后添加反斜杠,主要是为了区分访问的是文件还是文件夹。如:访问路径为http://baidu.com/a,浏览器不知道是访问的是文件还是文件夹,就会再次访问确认是哪种类型,若是文件夹则在后面加上反斜杠后以http://www.baidu.com/a/ 再次运行 。若链接为http://www.baidu.com/a.html则可以明确的知道这是文件而非文件夹,即可以不用添加反斜杠。


🔥1.a标签的target属性


描述
_blank在新窗口打开
_parent在父窗口中打开链接
_self默认,在当前页面跳转
_top在当前窗口打开链接,并替换当前的整个窗体。


附:target属性还有一个值为framename,后续在js中我们再细说。


🍁(七)HTML头部信息


一个默认的HTML文件头部信息如下:


<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>Document</title>
</head>


上面包含了meta和title两个元素,当然html的头部中你还可以插入脚本(scripts), 样式文件(CSS)以及style,link,base等元素。


🔥1.< meta >标签


元数据(Metadata)是数据的数据信息。< meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。


  • < meta >标签没有结束标签


实例:


1.1 定义文档字符编码


<meta charset="UTF-8">


1.2 把content属性关联到HTTP头部


<meta http-equiv="X-UA-Compatible" content="IE=edge">


1.3 定义文档关键词,用于引擎搜索


<meta name="viewport" content="width=device-width, initial-scale=1.0">


另外还可以进行对页面的刷新和定义页面作者等信息。


1.4 定义页面作者


<meta name="author" content="su liang">


1.5 刷新页面


//每30秒刷新页面
 <meta http-equiv="refresh" content = "30">


🔥2.< title >标签


定义了文档的标题


实例:


<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>


image.png


🔥3.< link >标签


  • < link > 标签定义文档与外部资源的关系


  • < link > 标签最常见的用途是链接样式表


注意: 此元素只能存在于 head 部分,不过它可出现任何次数


实例:


<link rel="stylesheet" type="text/css" href="./teststyle.css">


html代码:


<!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">
    <link rel="stylesheet" type="text/css" href="./teststyle.css">
    <title>前端学习</title>
</head>
<body>
    <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a>
    <p class="su">
        苏凉
    </p>
    <div class="div1">这是一个盒子</div>

</body>
</html>


css代码:


.su{
    font-size: large;
    color: blueviolet;
}
.div1{ 
    margin-right:1400px;
    border:3px inset red;
    background-color: antiquewhite;
}


实现效果:


image.png


🔥4.< base >标签


定义了页面链接标签的默认地址链接。


<!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">
    <link rel="stylesheet" type="text/css" href="./teststyle.css">
    <base href="https://www.baidu.com/" target="_blank">
    <title>前端学习</title>
</head>
<body>
    <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a>
    <p class="su">
        苏凉
    </p>
    <div class="div1">这是一个盒子</div>
<br/>
    <p><a href="">点击打开百度</a></p>

</body>
</html>


image.png



琼ICP备09004296号-12