一.前端

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. Linux下快速配置Java开发环境

    1.下载 jdk8官网下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  2. 单点登录SSO：可一键运行的完整代码

    单点登录方案不同于一个普通站点,它的部署比较繁琐:涉及到好几个站点,要改host.安装证书.配置HTTPS. 看到的不少这方面示例都是基于HTTP的,不认同这种简化: 1. 它体现不出混合HTTP/H ...

  3. Typescript 发布到npm

    https://blog.csdn.net/yiershan1314/article/details/79999726 https://cloud.tencent.com/developer/arti ...

  4. [故障公告]阿里云“华东1地域部分负载均衡https访问异常“引起部分站点无法访问

    今天上午 9:40 - 11:06 左右,由于阿里云“华东1地域部分负载均衡https访问异常”,造成我们的部分站点(尤其是博客后台)无法正常访问,给您带来了很大的麻烦,请您谅解. 现已恢复正常,如果 ...

  5. itoa函数实现

    1.      整数字符转化为字符串数 // 将整数转换成字符串数,不用函数itoa // 思路:采用加'0',然后在逆序的方法 #include <iostream> using nam ...

  6. Choosing The Commander CodeForces - 817E （01字典树+思维）

    As you might remember from the previous round, Vova is currently playing a strategic game known as R ...

  7. Booth乘法

    先看一个例子,结合疑问看算法. 1.已知X=+0.0011 Y=-0.1011 求[XY]补 解:[x]补 =0.0011 , [-x]补 =1.1101,[y]补 =1.0101 部分积      ...

  8. 【转帖】介绍 .NET Standard

    [译]介绍 .NET Standard https://zhuanlan.zhihu.com/p/24267356 跟开发争执过 自己不会写代码 的确不好. 若有任何对翻译的建议,烦请指正 有任何问题 ...

  9. Laravel渴求式加载（比较容易理解理解load与with关系）

    渴求式加载 当以属性方式访问 Eloquent关联关系的时候,关联关系数据是「懒惰式加载」的,这意味着关联关系数据直到第一次访问的时候才被加载.不过,Eloquent 还可以在查询父级模型的同时「渴求 ...

  10. 剑指offer(14)

    题目: 操作给定的二叉树,将其变换为源二叉树的镜像. 思路: 这里有个细节,我们发现,6节点的子节点在操作之后并没有发生变化,所以等会我们在交换的时候,交换的不是节点的数值,而是整个节点. 另外我们进 ...