今日内容：

　　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. 【 js 基础 】【读书笔记】作用域和闭包

    一.编译过程 常见编译性语言,在程序代码执行之前会经历三个步骤,称为编译. 步骤一:分词或者词法分析 将由字符组成的字符串分解成有意义的代码块,这些代码块被称为词法单元. 例子:  var a = 2 ...

  2. Fedora16的双显卡切换问题

    症状:笔记本是Acer 4745G,安装了Fedora16+Win7 x64的双系统,每次开机后,独立显卡的风扇就开始狂转,同时笔记本的发热量极大,左侧出风口简直烫手.... 问题:Acer 4745 ...

  3. Apache,PHP,MySQL独立安装

    最近在工作中常常接触到PHP,自己也写过一些简单的PHP页面.我们知道PHP是在服务器端运行的脚本语言,因此我们需要配置服务器环境.之前为了省事直接使用的是wamp集成环境,但是突然某一天领导要求我们 ...

  4. sql求两表的并集、交集、非交集、差集、结果集排序

    create table A( id ,) Not null primary key, name ) not null default(''), ) INSERT INTO [A]([name]) V ...

  5. Oracle EBS 用户职责人员取值

    SELECT fu.user_name 用户名, fu.description 用户说明, fu.start_date 用户启用日期, fu.end_date 用户终止日期 --,fu.employe ...

  6. Lorem 占位符

    Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义. 为什么叫lorem ipsum text呢? 是因为lorem ipsum是古罗马西塞罗谚语 ...

  7. python给邮箱发送消息

    首先要用到两个模块  并且大同你的发送邮箱smtp 最开始测试没打通了好久 smtplib是提供邮箱smtp服务, email是提供你发送消息的格式之类服务 import smtplib from e ...

  8. Hadoop 命令 && Web UI

    0. 说明 Hadoop 命令合集 && Web UI 1. HDFS 命令 [1.0 启动所有 && 关闭所有进程] 相当于启动 HDFS 和 YARN # 启动所有 ...

  9. 第二次作业 单例模式的SessionFactory以及线程安全的session

    单例模式的SessionFactory 在这个工具类Hibernate.java中写一个通过静态代码块生成唯一的SessionFactory,通过一个方法返回一个SessionFactory impo ...

  10. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...