今日内容：

　　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. 一起来看看JavaScript中==和===有何不同

    '; // => true 如果其中一个值是true,则将其转换为1再进行比较.如果其中一个值是false,则将其转换为0再进行比较: true == 0; // => false fal ...

  2. 【读书笔记】iOS-网络-优化请求性能

    一,度量网络性能 1,网络带宽 用于描述无线网络性能的最常见度量指标就是带宽.在数字无线通信中,网络带宽可以描述为两个端点之间的通信通道每秒钟可以传输的位数.现代无线网络所能提供的理论带宽是很高的.不 ...

  3. SD从零开始13-14

    SD从零开始13 使用条件记录(Working with Condition Records) 定价报表—客户特定价格Pricing Reports-customer-specific prices ...

  4. 修复vs2012出现 “无法找到包源”的错误

    出现以上问题,需要去“控制面板”添加程序,找到vs2012右键“修改” 用来安装 web Developer 如下图所示: 点击继续

  5. Android 通过adb shell命令查看内存，CPU，启动时间，电量等信息

    Android 通过adb shell命令查看内存,CPU,启动时间,电量等信息   by:授客 QQ:1033553122 1.  查看内存信息 1)查看所有内存信息 命令: dumpsys mem ...

  6. 容器监控—阿里云&容器内部服务监控

    目前Docker的使用越来越离不开对容器的监控,阿里云最近上线了容器服务,不但提供了核心的容器和宿主机监控能力,而且支持集成 Cloud Insight 监控,下面会介绍如何集成. 首先介绍一下阿里云 ...

  7. Oracle EBS AP 发票放弃行

    -- purpose: 应付发票放弃发票行 -- 12.2.6 环境 -- author:jenrry create_date: 2017-06-07 declare l_dummy_msg VARC ...

  8. vs 2012/2013 等工具中，使用正则表达式，查找、替换

    有这样一个需求,就是一个文本中,需要找出指定格式的字符串进行指定的替换,当前我的真实需求是,一个sql创建触发器的文本,我需要将所有的 包含 TB_SYS 的表名后面添加一个 “_NEW”字符串! 例 ...

  9. CameraAPI中的 自定义照相功能

    前几天的项目需要使用CameraAPI自己定义照相机,之前用过的二维码也要自己写底层代码,于是总结一下使用CameraAPI的几点事项.现在由于JDK7.0及其以上版本的官方文档已经不再推荐使用cam ...

  10. IIS 部署SSL证书

    1.导入证书 打开IIS服务管理器,点击计算机名称,双击‘服务器证书 双击打开服务器证书后,点击右则的导入 选择证书文件,点击确定 2.站点开启SSL 选择证书文件,点击确定 点击网站下的站点名称,点 ...