今日内容：

　　1.前端概述

　　2.前端三剑客

　　3.页面基本结构

　　4.常用标签

　　5.标签分类

1.前端概述与前端三剑客

　　前端即⽹站前台部分，运⾏在PC端，移动端等浏览器上展现给⽤户浏览的⽹⻚。随着互联⽹技术的发 展，HTML5，CSS3，前端框架的应⽤，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动 效设计，给⽤户带来极⾼的⽤户体验。 前端技术⼀般分为前端设计和前端开发，前端设计⼀般可以理解为⽹站的视觉设计，前端开发则是⽹ 站的前台代码实现，包括基本的HTML和CSS以及JavaScript

　　广义前端：所有用户可以直接看见并交互的界面

　　狭义前端：浏览器上运行的用户交互界面

　前端三剑客：

　　HTML:

　　　　1.超文本标记语言Hyper Text Markup Language

　　　　2.负责完成页面的结构

　　　　3.文件后缀：.html .htm

　　CSS:

　　　　1.级联样式表 Cascading Style Sheet

　　　　2.负责页面的风格设计，样式，美观

　　　　3.文件后缀：.css

　　JavaScript：

　　　　1.浏览器脚本语言，可以编写运行在浏览器上的程序

　　　　2.负责编写页面特效、调用浏览器的API（BOM）、操作改变页面内容（DOM），从后端获取数据（ajax）,渲染页面等

　　　　3.文件后缀：.js

　　总结：    　　　　

　　　 HTML相当于一个人的骨架结构（网页结构），
    　　网页内容就是人的血肉（网页内容），
    　　CSS就是套上人皮，加上衣服（网页样式、风格），
    　　JavaScript是给人赋予了灵魂（用户交互）。

　　　　

2.页面基本结构

页面基本结构：

<!DOCTYPE html>

<html>

 <head>

 <meta charset="utf-8" />

 <title>第⼀个⻚⾯</title>

 </head>

 <body>

 </body>

</html>

页面基本结构解读：

　　DOCTYPE:制定文档类型，规定HTML标签语法
　　html:文档根标签，标注着文档（页面）的开始与结束
　　head:文档头标签，可以引用脚本文件、制定样式表、书写代码逻辑块、提供元信息
　　body:文档主体标签，包含文档所有文本与超文本内容
　　title：文档tag标题标签，设置文档tag的标题内容

meta(元标签)

字符编码

<meta charset="utf-8">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

SEO

<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">

<meta name="description" content="80字以内的⼀段话，与⽹站内容相关">

移动适配

<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"

/>

meta:可以设置字符编码（charset = ""）、SEO(name="keywords"、name="description")、移动适配(name="viewport")

link（连接标签）

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

⽂档tag图标

<link rel="shortcut icon" type="image/x-icon"

href="http://www.baidu.com/favicon.ico" />

link:连接标签（外连接样式表、文档tag图标）

style（样式标签）

<style></style>

style:样式标签（内联样式表）

script（脚本标签）

<script type="text/javascript"></script>

script:脚本标签

3.常用标签

  无语义标签：

    <div></div> 最常用的标签，没有之一

    <span></span> 纯文本标签

   常用语义标签

    <h1></h1> 标题标签

    <p></p>段落标签

    <pre></pre>原生显示标签

    <br>换行标签

    <hr>分割线标签

    文本标签

    <i></i>斜体标签

    <em></em>强调斜体标签

    <b></b>粗体标签

    <strong></strong>强调粗体标签

    <del></del>删除标签

    <sub></sub>上标标签

    <sup></sup>下标标签

    <ruby>拼音<rt>pinyin</rt></ruby>组合标签给中文加上拼英

    其他标签

    <section></section>块

    <small></small>小号标签

4.标签分类

<!-- 1.单双标签 

	 标签都需要闭合 -->

<!-- 单标签 ：闭合操作在本身的尾部，并且可以省略（自定义标签要自我标注闭合）

	单标签一般具有特殊功能，单标签主功能-->

<!-- 双标签 ：闭合操作有对应的结束标签完成，也可以省略（强烈不建议）

	双标签一般具有文本（普通文本与超文本），双标签主内容-->

<hr>c  	<div>123</div>

<!-- 2.行块标签 -->

<!-- 行标签:内联，不具备自身宽高，通常同行显示 -->

<!-- 快标签：快级，具备自身宽高，通常换行显示-->

<!-- 自定义标签均属于内联标签 -->

<!-- span{我是span$}*2+div{我是div$}*2 -->

<span>我是span1</span>

<span>我是span2</span>

<div>我是div1</div>

<div>我是div2</div>

<!-- 3.单一组合标签 -->

<!-- 组合标签必须组合出现，协同下才能显示产生相应的内容和效果 -->

<ruby>

	好的<rt>haode</rt>

</ruby>

　　

day44的更多相关文章

  1. 自定义控件学习 Day44

    自定义控件学习 Day44 onMeasure 测量控件的宽高. onLayout 设置位置 onDarw 绘制控件 问题堆栈 1. 事件监听传递 最外层获取到控件,根据事件事件传递机制,返回值fal ...

  2. day44——索引、explain、慢查询、数据备份、锁、事务

    day44 索引介绍 为何要有索引? ​ 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还有一些复杂的查询操作 ...

  3. day44前端开发2之css基础

    web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head>  ...

  4. day44 mysql高级部分内容

    复习 1.多表查询 2.navicat 3.pymysql 1.视图 ***(是一个虚拟表,非真实存在的) 引子 select * from emp left join dep on emp.dep_ ...

  5. Python：Day44 Javascript

    一个完整的Javascript实现是由三个不同的部分组成: 1.核心 ECMA Javascript 2.浏览器对象模型(DOM) document object model (整合JS.html.C ...

  6. day44前端开发1之html基础

    web前端开发1一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体 标签:由< ...

  7. python 全栈开发，Day44(IO模型介绍,阻塞IO,非阻塞IO,多路复用IO,异步IO,IO模型比较分析,selectors模块,垃圾回收机制)

    昨日内容回顾 协程实际上是一个线程,执行了多个任务,遇到IO就切换 切换,可以使用yield,greenlet 遇到IO gevent: 检测到IO,能够使用greenlet实现自动切换,规避了IO阻 ...

  8. day44 数据库学习 索引 引用自egon 老师博客

    MySQL索引管理 总结 #索引是存在硬盘中的, #索引的功能, 1.可以加速查询 2.但是他会降低写入和删除的速度 所以不能乱加索引 总结二 1 最左前缀匹配原则 2设置的索引,它的字段中的内容占空 ...

  9. Day44 数据库的操作

    视图操作: 1.左连接查询 select * from person left join dept on person.dept_id = dept.did 2. 右连接 3. 内连接  inner ...

随机推荐

  1. 设计模式(22)--Template Method(模板方法模式)--行为型

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.模式定义: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声 ...

  2. css之background-position属性实现雪碧图

    什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...

  3. CSS中的三种常用定位

    一.相对定位(position:relative) 如果想让一个元素在本来的位置进行一个位移,可以将该元素的定位设置为relative,同时指定相对位移(利用top,bottom,left,right ...

  4. Intellij IDEA添加项目依赖

    在idea的设置中,存在下面几个标签页 Libraies是向idea中添加的jar或者文件夹进入. module是添加具体的项目依赖,后面的选项为部署时是否忽略. artifacts配置打包方式,需要 ...

  5. 标准工作流（AWE）邮件通知

    今天遇到一个问题,UAT环境收不到流程待办,最终审批,最终拒绝等邮件. 检查了PT_WF_NOTIFICATION包的Notification类中的Send方法,发现如果app服务器在psappsrv ...

  6. 2018-10-19 00:13:35 ArrayList

    获取集合元素的长度用的是size方法. 传入Object类型的值,返回boolean值的remove方法,含义是判断是否删除成功. 传入索引值的remove方法,返回的是被删除的元素. 修改值得set ...

  7. Android Activity切换与Activity间数据交互

    在Android程序内部, startActivity借助Intent来启动一个子Activity(使用父子关系进行表述,只为表达清晰,Android中并未有父子Activity的概念).如下: In ...

  8. INNODB insert buffer 简单分析

    在mysql5.1 之前称为Insert Buffer, 优化2级非唯一索引上插入操作的读IO, 在5.5之后改名为Change Buffer, 功能也扩展为2级非唯一索引上的插入.删除.更新.pur ...

  9. Oracle Database 12c Preinstall Steps for Oracle Linux Simplified

    This post is a quick reminder that Oracle Linux includes a handy RPM to address pre-installation req ...

  10. sysdate()简单用法

    环境: create table rq (xm varchar2(10),age number,zw varchar(10),rzrq date);insert into rq values ('小崔 ...