前端网页学习 Day44（前端三剑客 html页面 常用标签 标签分类）

前端网页学习(html)

DAY44

今日内容:

前端三剑客

HTML页面

常用标签

标签分类

前端三剑客

---

html(超文本标记语言)

非编程语言,自身不具备逻辑

作用: 负责完成网页的结构

组成: 标签,指令,实体

标签: 被<>包裹,以字母开头,可以结合合法字符,能被浏览器解析的标记

由纯字母或者字母与数字组合

例: 零

指令: 被<> 包裹,以 ! 开头的可以被浏览器解析的标记

例: <!dcotype> #文档类型:规定该页面的标签遵循html的语法

实体: 被&; 包裹的#开头的十进制数或特殊字母组合

例: <zero>

css(级联样式表)

功能: 负责页面的风格设计,样式和美观

组成: 选择器 作用域 样式块

选择器: 由标签/类/id单独出现或者组合出现

作用域: {}内部区域

样式块: 满足css链接语法的各种样式

例:

JavaScript(浏览器脚本语言)

功能: 负责编写页面特效 调用浏览器API 操作改变页面内容

从后端获取数据 渲染页面等

组成: BOM DOM ES

BOM : 文档对象模型 是w3c组织推荐的处理可扩展标志语言的标准编程接口

DOM : 浏览器对象模型 是用于描述这种对象与对象之间层次关系的模型

ES : 是一种开放的 国际上广为接受的脚本语言规范

HTML页面

---

基础模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

模板解读

<!-- 文档类型:标签语法为html-->
<!-- html5语法特点 -->
<!--
	1.不区分大小写
	2.含有许多系统标签,一般都具有语义
	3.可以随意定义自定义标签
	4.h5内容不保留空白字符(制表符)
	5.提倡小写
-->
<!DOCTYEP html>
<!-- html:文档根标签 -->
<html>
<!-- html语法中没有明确规定缩进规则,但从美观和可读性出发,开发者需要严格遵守缩进-->
	<head>
        <!-- 文档头标签,包含内容: 样式表,脚本,元信息,内嵌代码块-->
        <!-- 字符编码-->
        <meta charset="utf-8" />
        <!-- SEO 浏览器搜索优化-->
        <meta name="keywords" content="搜索匹配字段用逗号隔开" />
        <meta name="description" content="网站简介" />

        <!-- 移动适配 -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

        <!-- tag图片 -->
        <link rel="icon" type="image/x-icon" href="图片">
		
        <!-- 文档tag标题标签,设置文档tag的标题内容-->
        <title>第一个页面</title>
	</head>    
	<body> 
        <!--文档主体标签,包含文档所有文本与超文本内容-->
    	<script type="text/javascript">
        	alert('你好!');
        </script>
    </body>
</html>
<!-- 一个页面只存在一个标准模板 -->
<!-- doctype必须出现在第一行 -->
<!-- 特殊:如果没有书写模块,浏览器解析会按"自己心情"帮你添加模板 -->

常用标签

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8"
        <title>常用标签</title>
    </head>
    <body>
        <!-- 1.无语义标签 -->
        <!-- div:最常用的标签 -->
        <!-- span:最常用的纯文本标签 -->
        <div></div>
        <span></span>
        
        <!-- 2.常用语义标签 -->
        <!-- 标题:h1~h5 -->
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <h6>六级标题</h6>
        <!-- br:换行  hr:分割线 -->
        <br>hello<br>world<br>
        <hr>hello<hr>world<hr>
        
        <!-- 3.文本标签 -->
        <!-- i:常用的标签,一般不作为斜体文本使用,而是作为字体图片使用-->
        <i>斜体</i>
        <em>以斜体方式强调</em>
        <b>加粗</b>
        <strong>以加粗方式强调</strong>
        <!-- p:段落标签具有具体区域 -->
        <p>段落标签</p>
        <!-- pre:原样文本标签,保留所有字符,原样显示 -->
        <pre>hello      world</pre>
		<!-- ins:样式具有下划线 -->
        <ins>插入的文本</ins>             
        <!-- del:样式具有中划线 -->
        <del>删除的文本</del>
        <!-- sup:样式具有上标-->
        <span>10<sup>2</sup></span>
        <!-- sub:样式具有下标 -->
        <span>H<sub>2</sub>O</span>
        <!-- small:小号字体 -->
        <span>你好啊!<small>哈哈!</small></span>
        <!-- 显示拼音 -->
        <ruby>中国<rt>zhongguo</rt></ruby>
        
    </body>
</html>

标签分类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>标签的分类</title>
    </head>
    <body>
        <!-- 1.单双标签 -->
        <!-- 标签都需要闭合 -->
        <!-- 单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合) 
		单标题一般具有特殊功能,单标签主功能-->
        <hr>
        <!-- 2.双标签:闭合操作有对应的结束标签,也可省略(强烈不建议) 
		双标签一般具有文本(普通文本与超文本),双标签主内容 -->
        <div>
            我是一个双标签
        </div>
        
        <!-- 3.单一组合标签 -->
		<!-- 组合标签必须组合出现,协同下才能显示产生相应的内容与效果 -->
        <ruby>
        	组合<rt>zuhe</rt>
        </ruby>
     
    </body>
</html>

以上为本次学习内容