前端网页学习(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>
以上为本次学习内容