一.前端

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 stress 命令

    stress 命令主要用来模拟系统负载较高时的场景,本文介绍其基本用法.文中 demo 的演示环境为 ubuntu 18.04. 基本语法 语法格式:stress <options> 常用 ...

  2. H5 56-还原字体和字号

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. kattis Programming Tutors 给游客与导游匹配（二分+二分图）

    题目来源:https://vjudge.net/problem/Kattis-programmingtutors 题意: 有n个游客,n个导游,给出他们的坐标,问你怎么匹配可以使他们最大距离最小 题解 ...

  4. Selenium库

    '''自动化测试工具,支持多种浏览器.爬虫中主要用来解决JavaScrip渲染的问题.''''''基本使用'''from selenium import webdriverfrom selenium. ...

  5. JoinPoint

    “JoinPoint对象封装了SpringAop中切面方法的信息,在切面方法中添加JoinPoint参数,就可以获取到封装了该方法信息的JoinPoint对象. ” JoinPoint适用于注解和Sc ...

  6. Spring Data Elasticsearch 和 x-pack 用户名/密码验证连接

    Elasticsearch Java API 客户端连接 一个是TransportClient,一个是NodeClient,还有一个XPackTransportClient TransportClie ...

  7. iOS上手指点击波纹效果的实现

    https://www.jianshu.com/p/35e6f53ca0fe 2016.10.19 22:00* 字数 135 阅读 2468评论 2喜欢 7 闲暇时间做了一个反馈手指点击屏幕的效果, ...

  8. Navicat 或者Java的JDBC通过SSH Tunnel连接MySQL数据库

    JDBC通过SSH Tunnel连接MySQL数据库 - 明明 - CSDN博客https://blog.csdn.net/a351945755/article/details/21782693 Na ...

  9. Java.lang.OutOfMemoryError：Metaspace

    Understand the OutOfMemoryError Exceptionhttps://docs.oracle.com/javase/8/docs/technotes/guides/trou ...

  10. 硬盘扩容9999T

    win+r运行创建命令:subst H: d:\123说明:H指的是想要创建的盘符,d:\123是文件路径 删除命令subst H: d/说明 :H指的是已创建的盘符,/d指的是删除的意思 注意新盘符 ...