一.前端

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. CentOS 6.5下RPM方式(重新)安装MySQL 5.7.21从头到尾篇

    强烈推荐参阅这一篇教程  https://www.cnblogs.com/kevingrace/p/8340690.html 下面我写的仅供参考 今天把Mysql5.1升级到了5.7,浪费了一天为了避 ...

  2. JS 异步系列 —— Promise 札记

    Promise 研究 Promise 的动机大体有以下几点: 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的,那么要了解这些库的前置条件得先熟悉 ...

  3. Comet OJ 热身赛（K题）principal（括号匹配问题+stack模拟）

    principal 已经提交 已经通过 23.66% Total Submission:131 Total Accepted:31 题目描述 阿尔比恩王国潜伏着代号白鸽队''的一群间谍.在没有任务的时 ...

  4. Mysql数据库中索引的概念总结

    1.索引的目的是什么 1.快速访问数据表中的特定信息,提高检索速度 2.创建唯一性索引,保证数据库表中每一行数据的唯一性. 3.加速表和表之间的连接 4.使用分组和排序子句进行数据检索时,可以显著减少 ...

  5. echarts图片保存

    一.js: function updateChart(versionList,rateList) { option = { title: { text: '拖动频次' }, tooltip : { t ...

  6. Centos 6.x 升级到 7.x

    Centos6.5跨越大版本升级到Centos7.4 - Linux学习与应用 - CSDN博客https://blog.csdn.net/whbttst/article/details/805348 ...

  7. SQL Server中JOIN的使用方法总结

    JOIN 分为:内连接(INNER JOIN).外连接(OUTER JOIN).其中,外连接分为:左外连接(LEFT OUTER JOIN).右外连接(RIGHT OUTER JOIN).全外连接(F ...

  8. C#复习笔记（3）--C#2：解决C#1的问题（泛型）

    这一章会描述在C#2中所做的主要的变化 泛型 泛型的概念中包含类型参数和类型实参,类型参数相当于类型实参的蓝图. 泛型类型分为未绑定泛型类型和已构造泛型类型.已构造泛型类型又分为开放的泛型类型和封闭的 ...

  9. [转帖]OS/2 兴 衰 史

    OS/2 兴 衰 史 https://zhidao.baidu.com/question/12076254.html 最近在看windows的版本 感觉自己接触电脑太晚 知道的也是很少 不明白 之前有 ...

  10. js 判断字符串中是否包含某个字符串的方法实例

    String对象的方法 方法一: indexOf()   (推荐) var str = "123"; console.log(str.indexOf("3") ...