前端3剑客(第1篇)-初识HTML

100编程书屋_孔夫子旧书网

当今主流的技术中,可以分为前端和后端两个门类。

前端:简单的理解就是和用户打交道

后端:主要用于组织数据

而前端就Web开发方向来说, 分为三门语言, HTML、CSS、JavaScript

语言 作用
HTML 描述页面的结构,类似于动物的骨架
CSS 渲染技术,使得页面更好看,也可以一定程度的让页面动起来
JavaScript 实现和后端的交互, 数据验证、收发等功能

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>

</body>
</html>

上面面的一段代码既表示一段HTML的结构, 它表示生成了一个空白的HTML网页

组成HTML的元素称为标签,标签的结构分为两种

  • 有开始标签和结束标签的 如
  • 有单标签的 ,例如 ,单标签中的 / 即表示标签的闭合, / 符号不写也是可以的

下面这段HTML代码包含的标签解释如下

  • 声明类型, 意思为超文本语言类型。 是一种HTML5的规范写法,在HTML发展过程中还有以下的几种声明方式

    复制代码
    <!DOCTYPE html> html5规范, html的第一行必须为此值
    
    <!--html4 严格版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    
    <!--html4 过渡版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    <!--html4 框架版-->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
                "http://www.w3.org/TR/html4/frameset.dtd">
    
    关于html4的声明类型,可以参考:
    https://www.w3.org/TR/html4/sgml/dtd.html
  • html 最外层的一个跟节点,里面的所有元素都是它的子元素

    复制代码
    <!--lang属性表示使用英文,如果是中文,可以改成zh, 非严格属性也可以不写-->
    <html lang="en">
    
    </html>
  • head 头标记,整个网页的全局属性都会写在这个里面

  • body 网页的主体部分,用户可以直观感受到的显示内容的部分

  • meta 标签, 标记原数据,可以规定网页的字符、缩放比例等信息

    复制代码
    <!--规定字符集使用UTF-8, UTF-8 涵盖全球所有的国际和民族的文字和大量图像, UTF-8 规定一个字符占3个字节-->
    <meta charset="UTF-8">
  • title 标题标签,标题的内容会在浏览器的tab页中显示

相关推荐
胖纳特4 分钟前
Nextcloud 文件预览困局与破局:集成 BaseMetas Fileview 实现全格式在线预览
前端·后端
一个心烑4 分钟前
Layui结合springboot读取返回值,前端展示简单示例
前端·spring boot·layui
天天向上10244 分钟前
openlayers 加载Shapefile文件
前端·javascript·html
亿元程序员7 分钟前
手工拼豆有风险?手把手教你开发个电子版的
前端
hhhhhh_we11 分钟前
再定义“皮肤人格”:从Baumann 16型分型到预颜美历的AI时序人格
前端·图像处理·人工智能·python·aigc
鹏程十八少12 分钟前
10. 2026金三银四 Android 组件化 & ARouter 面试杀手锏:33 道高频题 + 答案 + 流程图 + 源码,资深工程师必刷
前端·后端·面试
yqcoder12 分钟前
CSS 布局双雄:浮动 (Float) vs 绝对定位 (Absolute) 深度解析
前端·css
朝阳3917 分钟前
react【实战】首页 -- 白天/黑夜主题切换(含组件封装)
前端·react.js·前端框架
无心使然云中漫步22 分钟前
Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
前端·arcgis·vue·数据可视化
zhensherlock33 分钟前
Protocol Launcher 系列:Beorg 高效任务管理的协议支持
前端·javascript·typescript·node.js·自动化·github·js