今日内容：

　　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. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  2. js-ES6学习笔记-for...of循环

    1.一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员.也就是说,for...of循环内部调用的是数据结构的Symbo ...

  3. 【读书笔记】iOS-iOS6 Passbook应用开发

    Passbook 是iOS6的新功能,只能在iPhone和iPod touch设备中使用,它可以帮助管理商家发放的电子会员卡,积分卡,优惠券等. 一,Passbook 与 Pass. Passbook ...

  4. CSS3关于-webkit-tap-highlight-color属性

    最近在写手机端,发现了一个问题,就是javascript点击元素时,在安卓手机上会出现半透明的蓝色背景,(经百度,在苹果手机上会出现半透明的灰色背景),后来通过百度找到了解决方案,就是利用CSS3的- ...

  5. NodeJS配置TaoBao源

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  6. 禅道项目管理软件 为提交Bug页面添加“优先级”字段

    为提交Bug页面添加“优先级”字段 by:授客 QQ:1033553122 测试环境: 禅道项目管理软件7.1.stable版本 备注:仅适合windows版本,linux下,直接在页面管理后台安装官 ...

  7. Vue + Spring Boot从零开始搭建个人网站（一） 之 项目前端Vue.js环境搭建

    前言: 最近在考虑搭建个人网站,想了想决定采用前后端分离模式 前端使用Vue,负责接收数据 后端使用Spring Boot,负责提供前端需要的API 就这样开启了我边学习边实践之旅 Vue环境搭建步骤 ...

  8. JSP基本语法总结【1】（jsp工作原理，脚本元素，指令元素，动作元素）

    时隔半年,回头对jsp复习整理一下,温故而知新. jsp工作原理: jsp服务器管理jsp页面分两个阶段:转换阶段(translation phase)和执行阶段(execution phase). ...

  9. Unity Profiler连接Android真机调试

    Profiler在Editor模式就可以观看性能消耗,但是毕竟电脑配置高,跟手机真机环境还是有区别.实际开发中的优化还是推荐用真机测试. 因为IOS一般比Android手机的配置高,在Android平 ...

  10. 【转】使用windeployqt.exe进行依赖查找打包

    原文:https://blog.csdn.net/u011822862/article/details/52166940 Qt 官方开发环境使用的动态链接库方式,在发布生成的可执行程序时,需要复制可执 ...