转圈圈的max
转圈圈的max

HTML介绍

HTML介绍

文章目录

  • HTML介绍
    • CS架构&BS架构
    • Web前端技术体系
    • 开发工具选择
      • 文本编辑器
      • 集成开发环境
    • HTML概述
      • HTML结构
      • 基本语法
        • 元素(Element)
        • 标签(tag)
        • 属性
    • 常用HTML标签
      • 特殊字符
      • 全局属性
      • 格式标签
      • 文本标签
      • 超链接标签
        • 绝对路径(Absolute Path)和相对路径(Relative Path)
        • 图片标签
        • 媒体标签
        • 表格标签
        • 框架标签
        • 表单标签

CS架构&BS架构

​ CS即Client/Server（客户机/服务器）结构，C/S结构在技术上很成熟，它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是针对性开发，变更不够灵活，维护和管理的难度较大。通常只局限于小型局域网，不利于扩展。并且，由于该结构的每台客户机都需要安装相应的客户端程序，分布功能弱且兼容性差，不能实现快速部署安装和配置，并且每次客户端更新都需要重新安装，因此缺少通用性，具有较大的局限性。要求具有一定专业水准的技术人员去完成。

​ BS即Browser/Server（浏览器/服务器）结构，就是只安装维护一个服务器（Server），而客户端采用浏览器（Browse）运行软件。B/S结构应用程序相对于传统的C/S结构应用程序是一个非常大的进步。 B/S结构的主要特点是分布性强、维护方便、开发简单且共享性强、总体拥有成本低。但数据安全性问题、对服务器要求过高、数据传输速度慢、软件的个性化特点明显降低，这些缺点是有目共睹的，难以实现传统模式下的特殊功能要求。例如通过浏览器进行大量的数据输入或进行报表的应答、专用性打印输出都比较困难和不便。此外，实现复杂的应用构造有较大的困难。

Web前端技术体系

  • HTML：是一门标记型语言，用于实现网页的结构
  • CSS：是一门描述型语言，用于对网页结构进行美化装饰
  • JavaScript：是一门脚本语言，用于事项网页的动态效果(特效，表单验证等)
  • JQuery/zepto：JS库，内部包含很多工具函数
  • Bootstrap：UI框架
  • Vue/AngularJS/ReactJS：JS框架（MVVM）
  • Webpack：项目打包
  • 移动端/微信小程序：移动端技术
  • nodeJS：JS运行环境（服务端技术）

开发工具选择

文本编辑器

  • 记事本
  • Editplus
  • Notepad++
  • UEditor
  • SublimeText
  • VSCode
  • Vim
  • Atom

集成开发环境

  • Dreamweaver
  • Hbuilder/HbuilderX
  • Webstrom
  • Aptane
  • …

HTML概述

HTML (Hypertext Markup Language)超文本标记语言，构成网页文档的主要语言同时也是网络上应用最广泛的标记型语言

HTML结构


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body bgcolor="blue">
    
    hello
body>
html>

HTML是由一系列标签，属性以及文本构成，用于在浏览器中显示一个网页的结构，HTML是浏览器的母语。

基本语法

​ 一个HTML元素（Element），一般由开始标签（tag）和结束标签（tag）构成，并且标签之间可能包含其他的子标签，以及文本内容；另外开始标签中也可能包含一些属性。

元素(Element)

<开始标签 属性对>子元素<结束标签>


<div class="wrap" id="main">这是一段测文本div>

标签(tag)

标签通常包含开始标签和结束标签，开始标签内部可能会包含属性，结束标签跟开始标签同名，但是在标签前需要使用“/”表示为结束标签：

<a href="http://www.softeem.com">  开始标签
a> 结束标签

标签一般是成对出现，但是也有例外，比如单标签：meta、br、hr、img、input等，这些标签只有开始没有结束，另外html5也建议不要在单标签后面跟上“/”。

属性

属性一般包含于开始标签内部，由键值对结构组成，左边表示为属性名，右边为属性值：

<input type="text" name="username" id="username">

以上 type=“text”、name=“username”、id="username"都称之为属性

另外HTML标签中的属性也有没有属性值的属性，只有属性名称，属性值就是属性名自身，比如:

audio标签的autoplay属性、controls

input标签的readonly、selected，checked

注意事项

HTML5中的标签和属性不区分大小写(大小写不敏感，区别于XHTML)

常用HTML标签

特殊字符

某些情况需要在html页面中显示一些特殊的符号，比如版权，“<>”等符号，因此，html提供了一些用于表达特殊含义的实体:

HTML代码 页面显示描述
& &
" ＂
® ®
© ©
&trade ™
> < > <
  空格

以上html代码需要在末尾跟上“;”号

全局属性

HTML标签中包含一些全局属性,即所有的元素都支持的属性，具体如下:

  • id：设置元素的唯一标识
  • class：对元素归类，以便进行统一样式控制
  • style：内联的样式属性，用于设置元素的样式信息
  • title：给元素添加提示文本信息
  • data-*：htlm5新增的数据标签

格式标签

  • p
  • ul、ol、li、dl、dt、dd
  • blockquort
  • br
  • pre

文本标签

  • h1~h6
  • b、i、u、del、strong

超链接标签

a标签表示为超链接标签，一般用于进行页面跳转，页面内跳转(锚链接)，执行js脚本

绝对路径(Absolute Path)和相对路径(Relative Path)

图片标签

  • img

媒体标签

  • audio
  • video
  • canvas

表格标签

  • table
  • thead、tbody、tfoot
  • tr、td、th

框架标签

  • iframe

表单标签

  • form

  • input

    • text、date、time、week、month、email、url、number、color、range
    • password
    • hidden
    • checkbox、radio
    • button、submit、reset

  • select、option

  • textarea

  • button

    • button
    • submit

你可能感兴趣的:(web前端)