一.前端

1.什么是前端

　　前端即网站前台部分,运行在PC端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,

HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,

给用户带来极高的用户体验.

　　前端技术一般分为前端设计与前端开发,前端设计一般可以立即为网站的视觉设计,前端开发则

是网站的前提代码实现,包括基本的HTML和CSS以及JavaScript

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

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

二.前端开发技术栈

HTML

超文本标记语言 Hyper Text Markup Language

复杂完成页面的结构

文件后缀: .html  .htm

hint:"超文本"就是指页面内可以包含图片 连接 甚至音乐 程序等非文字元素

CSS

级联样式表:Casading Style Sheet

负责页面的风格设计,样式 美观

JaveScript

浏览器脚本语言,可以编写在浏览器的程序

负责编写页面特效 调用浏览器的API\(BOM\) 操作改变页面的内容\(DOM\)

,从后端获取数据\(Ajax|),渲染页面等

文件后缀:.js

2 第一个页面

一.基础模板

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>第一个页面</title>

    </head>

    <body>

    </body>

</html>

二.模板解读

DOCTYPE:指定文本类型,规定html标签语法

html:文本根标签,标签着问道(页面)的开始于结束

head:文档头标签,可以应用脚步文件、指定样式表、书写代码逻辑快、提供元信息

body：文档主题标签，包含文档所有文本与超文本内容

title:文档tag标题标签，设置文档tag的标签内容

hint:html标签lang属性值 en| zh(zh_cn)

三、其他核心模板标签

1、meta(元标签）

字符编码

<meta charset="utf-8">

<meta http-equiv="content-type" content="text/

html;charset=utf-8"/>

<meta name="keywords" content="8-12个以英文逗号隔开的单词或词语">
<meta name="description" content="80字以内的一段话，与网站内容相关">
移动适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2、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" />

3、style(样式标签）

内联样式表

<style></style>

4.script（脚本标签）

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

四 常用标签

1.无意义标签

<div></div> 单独行

<span></span>

2.常用语义标签

<hn></hn>标题

<p></p>段落

<pre></pre>原文本

<br/>换行

<hr />分割线

3.文本标签

<i></i> 斜体字

<em></em> 斜体字，表示强调

<b></b>粗体字

<strong></strong>粗体字，强调（语气更强）

<del></del>删除的文本

<ins></ins>插入的文本

<sub></sub>上标签

<sup></sup>下标签

<ruby>

　　拼音<rt>pingyin</rt>

4.其他标签

<section></section>块

<small></small>小号字体

五、标签分类

1、单|双标签

* 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
* 双标签：双标签有成对的结束标识，主要应用场景为内容性标签

2、行|块标签

* 行标签：又名内联标签，内联标签自身不具备宽高，通常同行显示
* 块标签：又名块级标签，块标签拥有自身宽高，通常独自占据一行

3、单一|组合标签

* 单一标签：单独出现，表示具体的功能或展示具体的内容
* 组合标签：配合使用，才能产生相应的内容与效果

html概念的更多相关文章

  1. 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  2. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  3. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）

    集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...

  4. 声音分贝的概念，dBSPL.dBm,dBu,dBV,dBFS

    需要做个音频的PPM表,看着一堆的音频术语真是懵了,苦苦在网上扒了几天的文档,终于有了点收获,下面关于声音的分贝做个总结. 分贝 Decibel 分贝(dB)是一个对数单位(logarithmic u ...

  5. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  6. 【Linux大系】Linux的概念与体系

    感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 我在这一系列文章中阐述Linux的基 本概念.Linux操作系统继承自UNIX.一个操作系统是一套控制和使用计算 ...

  7. KOTLIN开发语言文档（官方文档） -- 2.基本概念

    网页链接:https://kotlinlang.org/docs/reference/basic-types.html 2.   基本概念 2.1.  基本类型 从可以在任何变量处理调用成员函数和属性 ...

  8. .NET面试题系列[5] - 垃圾回收：概念与策略

    面试出现频率:经常出现,但通常不会问的十分深入.通常来说,看完我这篇文章就足够应付面试了.面试时主要考察垃圾回收的基本概念,标记-压缩算法,以及对于微软的垃圾回收模板的理解.知道什么时候需要继承IDi ...

  9. 《徐徐道来话Java》（1）：泛型的基本概念

    泛型是一种编程范式(Programming Paradigm),是为了效率和重用性产生的.由Alexander Stepanov(C++标准库主要设计师)和David Musser(伦斯勒理工学院CS ...

  10. 简述linux同步与异步、阻塞与非阻塞概念以及五种IO模型

    1.概念剖析 相信很多从事linux后台开发工作的都接触过同步&异步.阻塞&非阻塞这样的概念,也相信都曾经产生过误解,比如认为同步就是阻塞.异步就是非阻塞,下面我们先剖析下这几个概念分 ...

随机推荐

  1. Visual studio 2015 Community 安装过程中遇到问题的终极解决

    早就有给自己电脑升级VS的想法,可是安装过程并不顺利,一直拖到现在,昨天下定决心,把遇到的问题一个个解决,终于安装成功了,将安装过程中遇到的问题和解决方法记录一下. 需要说明一下的是,不同的电脑环境可 ...

  2. Python之Flask笔记

    在这里先说一下最开始所经历的一些错误app=Flask(_name_),当初拼写的时候怎么都报错后来发现此处是两个'_' 配置文件 app.config.from_object(__name__) 在 ...

  3. vue的高阶组件

    探索Vue高阶组件 探索Vue高阶组件的使用 Vue高阶组件的使用方法 高阶组件应用-组件重新实例化 深入理解React 高阶组件 探索Vue高阶组件 2018-01-05 探索Vue高阶组件 Vue ...

  4. 2018湘潭邀请赛C题（主席树+二分）

    题目地址:https://www.icpc.camp/contests/6CP5W4knRaIRgU 比赛的时候知道这题是用主席树+二分,可是当时没有学主席树,就连有模板都不敢套,因为代码实在是太长了 ...

  5. CentOS 7从Python 2.7升级至Python3.6.1

    引言: CentOS是目前最为流行的Linux服务器系统,其默认的Python 2.x,但是根据python社区的规划,在不久之后,整个社区将向Python3迁移,且将不在支持Python2, 那该如 ...

  6. ImageProcessor组件

    ImageProcessor组件 开源免费的.NET图像即时处理的组件ImageProcessor   承接以前的组件系列,这个组件系列旨在介绍.NET相关的组件,让大家可以在项目中有一个更好的选择, ...

  7. semantic-ui 模态窗口

    模态窗口即加了ui modal的class的div而已,会有点像是alert弹出框的形式,但是美观一点点.

  8. CodeForces Round #550 Div.3

    http://codeforces.com/contest/1144 A. Diverse Strings A string is called diverse if it contains cons ...

  9. Druid Monitor开启登录界面

    <!-- druid --> <filter> <filter-name>druidWebStatFilter</filter-name> <fi ...

  10. PHP的优化建议(仅借鉴)

    转载: https://www.awaimai.com/1050.html 1 字符串 1.1 少用正则表达式 能用PHP内部字符串操作函数的情况下,尽量用他们,不要用正则表达式, 因为其效率高于正则 ...