前端基础html笔记

最新推荐文章于 2024-07-11 15:29:37 发布

此言言此

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量232

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/2201_75308743/article/details/139400264

版权

前端主要由三部分组成：html、css、JavaScript。html相当于是前端的骨架，一个网页的全部模块就是由html编写；css负责排版，对页面进行美化；而JavaScript使页面能按照我们的预期动起来，比如说一个简单的动画效果，或者是我们的鼠标能够通过点击按键触发新页面等等。缺少这三个元素，我们的页面都不会满足我们实际的使用需求。

下面，我将简单介绍html的基础使用。

html的框架如下：

<!DOCTYPE html>        
<html>              
<head>          
<title>文档标题</title>            
</head>           
<body>          
  文档内容......         
</body>                
</html>

第一行为声明，表名该语言是html方便浏览器更好的识别该语言。

下面最外层为<html></html>，所有的html语句都要包含在其中，相当于一个大括号，后一个加斜杠‘/’代表语句结束。

而html里面又包含两部分<header></header>和<body></body>。

head顾名思义就是头部，头部定义了网页的名称，显示的语言（编码所用的语言），以及其他简介信息。如下所示：该网页名称为“这是一个学习网页”，以utf-8的编码方式编码，即为中文编码。

    <header>
<meta charset="utf-8">
<title>这是一个学习网页</title>
    </header>

body为身体，是html文本最主要的部分，所有要实现的模块都会在body里实现。

    <body>
<!--p标签为段落标签标签，我们可以在里面写一些文本内容-->
        <p>学习HTML</p>
<!--h1标签为标题标签，代表一级标题，有1~9级标题，标题字体越大，等级越小-->
        <h1 style="color: aqua;">第一步</h1>
<!--hr为分割线标签，类似还有br换行标签，由于我们并不需要在这两类标签内写什么，所以可以直接写一个带/的标签即可，不用首尾呼应-->
        <hr/>
<!--div标签代表一个容器，我们可以定义它的样式大小，在这个容器里，我们可以定义任何内容，并且可以对其进行批量设置其样式-->
        <div >
<!--a标签是一个链接标签，href是其具体的链接属性（链接地址），中间可以写明其显示的名称是啥-->
            <a href="https://www.bilibili.com/">b站</a>
            <br/>
            <a href="https://www.iqiyi.com/?vfm=f_588_wrb&fv=ac30238882b84c8c">爱奇艺</a>
            <hr/>
            <a href="https://cn.bing.com/images/search?view=detailV2&ccid=1tOq5wBm&id=C72D7DBE7E239AD06129818A3DE7042C30F38AEC&thid=OIP.1tOq5wBmEfaHhqR-N3w56gHaG-&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.d6d3aae7006611f68786a47e377c39ea%3frik%3d7IrzMCwE5z2KgQ%26riu%3dhttp%253a%252f%252fpic.ntimg.cn%252f20131028%252f13984383_171843651115_2.jpg%26ehk%3d4SCA2042hzkkZofnLUSML2WgVzwz9RMXyKkXwc2zHG0%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=965&expw=1024&q=%e8%8b%b9%e6%9e%9c%e5%9b%be%e7%89%87&simid=608044546698510990&FORM=IRPRST&ck=B35447BF5636E1E2E9E96DE834B69609&selectedIndex=0&itb=0&idpp=overlayview&ajaxhist=0&ajaxserp=0">苹果图片</a>
            <br>
<!--img标签是图像标签，src是图像属性（及图像链接），显示为整张图片，而不是链接地址-->
            <img src="C:\Users\Administrator\Desktop\图片素材.png" width=300>
            <br>
            <img src="C:\Users\Administrator\Desktop\素材二.png" alt="敦煌">
            <br>
<!--video是视频标签，src同样是视频属性，及地址名称，可在属性前后设置其大小（宽和高），controls为控制按钮，可以控制视频正常播放，若无则无法正常播放-->
            <video width="400" src="HTML.mp4" controls>html学习视频</video>
            <br>
        </div>
<!--table为表标签，可以设置该表的高、宽，样式，样式（border为其边框，solid为实线，数字为粗细，可加颜色，padding为其内距边框的区域，margin为其外围距其他的距离）-->
<table width="400" style="border: 3px solid red;padding: 60px 20px;margin: 10; " >
<!--tr为表格的行-->
<tr>
<!--td为该行中的具体内容-->
    <td>英语</td>
    <td>数学</td>
</tr>
<tr>
    <td>100</td>
    <td>99</td>
</tr>
</table>

    </body>

其实这仅是很基础的html编写，如果想了解更多的内容，可以自行关注编程入门教程_w3cschool极客教程

网站进行学习。

此言言此

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端基础html笔记

html相当于是前端的骨架，一个网页的全部模块就是由html编写；而JavaScript使页面能按照我们的预期动起来，比如说一个简单的动画效果，或者是我们的鼠标能够通过点击按键触发新页面等等。head顾名思义就是头部，头部定义了网页的名称，显示的语言（编码所用的语言），以及其他简介信息。下面最外层为<html></html>，所有的html语句都要包含在其中，相当于一个大括号，后一个加斜杠‘/’代表语句结束。body为身体，是html文本最主要的部分，所有要实现的模块都会在body里实现。
复制链接

扫一扫