一.前端

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. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  2. JMX,Jstatd做好JVM应用上线的最后一层保障

    目录 我理解的监控 代码异常监控 远程主机配置jmx 修改要启动的java程序启动参数(JVM_OPTS). 修改文件权限 启动jvisualvm 监控服务器上的java程序 jstatd 连接到远程 ...

  3. vertical-align和图片下方空白问题

    <style> .box1,.box2{ display: inline-block; background-color:#f0f3f9; width:150px; height: 150 ...

  4. 学习用Node.js和Elasticsearch构建搜索引擎（2）：一些检索命令

    1.Elasticsearch搜索数据有两种方式. 一种方式是通过REST请求URI,发送搜索参数: 另一种是通过REST请求体,发送搜索参数.而请求体允许你包含更容易表达和可阅读的JSON格式.这个 ...

  5. koa2实现session的两种方式（基于Redis 和MySQL）

    一.基于MySQL的实现方式 这种方式需要安装koa-session-minimal和koa-mysql-session两个依赖. 执行 npm install koa-session-minimal ...

  6. iOS中的截屏（屏幕截屏及scrollView或tableView的全部截屏）

    iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏) 2017.03.16 12:18* 字数 52 阅读 563评论 4喜欢 2 1. 截取屏幕尺寸大小的图片并保存至相册 ...

  7. CentOS的el5, el6, el7代表什么

    https://www.cnblogs.com/EasonJim/p/9051851.html el: enterprise linux?

  8. Alibaba Cloud Toolkit for Eclipse & ECS、EDAS 或容器服务 Kubernetes

    UserGuide_V2.1.0http://toolkit.aliyun.com/eclipse/?spm=5176.2020520130.105.3.3c3b697bOHma9f&msct ...

  9. React Native之通知栏消息提示(android)

    React Native之通知栏消息提示(android) 一,需求分析与概述 1.1,推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用 ...

  10. Eclipse打开java文件繁体字

    右键-->properties-->Resource-->Text file encoding, 改成utf-8 .