今日内容：

　　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-网站导航栏标题之间的分隔符

    在一个网页上,尤其是导航栏文字与文字之间,大多数情况下都会有分隔符,也就是文字之间的一个小竖线,这个小小的分隔符,每个网站都有不同的样式,常用的写法就是用标签的边框,这个写法也比较简单,用起来也方便, ...

  2. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  3. JSTL核心标签库——重定向标签、URL处理标签、网页导入标签

    <c:redirect>重定向标签 相当于HttpServletResponse的sendRedirect()方法. <%@page contentType="text/h ...

  4. java基础知识文章汇总

    将之前的所有关于Java基础知识的随笔,整理成质量较高的十几篇随笔,几乎是好几篇比较零散的随笔合成现在的一篇,自认为还不错. java基础(一) 深入解析基本类型 java基础(二) 自增自减与贪心规 ...

  5. 浅尝Java（一）

    主题:数据类型,数值类型变量相互转化 Java是强类型的语言,与JavaScript(松散型)在数据类型上有很大的差异(1.所有变量必须先申明,后使用:2.指定类型的变量只接受与之匹配类型的值).这个 ...

  6. HDFS Lease Recovey 和 Block Recovery

    这篇分析一下Lease Recovery 和 Block Recovery hdfs支持hflush后,需要保证hflush的数据被读到,datanode重启不能简单的丢弃文件的最后一个block,而 ...

  7. sql 经典面试题及答案(选课表)

    SQL数据库面试题以及答案 Student(Sno,Sname,Sage,Ssex) 学生表       Sno:学号:Sname:学生姓名:Sage:学生年龄:Ssex:学生性别Course(Cno ...

  8. 64位的Sql Server使用OPENROWSET导入xlsx格式的excel数据的时候报错（转载）

    In the old times while all the CPUs were 32bit, we were happily using JET OLEDB Provider reaching Ex ...

  9. [POWERSHELL] [.net 3.5] [Windows Server] 在Windows Server上安装.NET3.5

    Install-WindowsFeature Net-Framework-Core -source \\network\share\sxs

  10. centos7 安装 jdk1.8

    首先是Linux的不同版本的额系统自带的配置是不一样的,比如centos6上有的自带的jdk环境的话要装1.8的就要进行卸载或者马上进行更改 jdk是java程序依赖的环境 首先查看你的系统下是否有j ...