HTML

  • html超文本标记语言
  • 前端三层
  • HTML结构层
  • css样式层
  • JavaScript行为层
  • 其他多媒体内容（图片，音频等等）

  • 互联网运行过程

    客     --http请求-->     服

户        http协议       务

端     <--http响应--     器
  • 互联网原理
  • 服务器server，一种特殊的计算器，包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性等方面要求较高。
  • 作用：对于WEB来讲，用于存储开发人员上传的网页数据，且需要响应服务请求，并进行处理。
  • 要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作
  • 云服务器
  • 简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。不用提前购买，即可徐速创建或释放任意多台云服务器。
  • 客户端Client
  • 用户端，普通用户使用的终端，客户端有多种形式，比如最常用的是浏览器、app等，而web开发最主要的客户端形式还是浏览器。
  • 浏览器
  • 用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页
      主流浏览器：                 内核（渲染引擎）:                   说明:

      微软的IE和Microsoft Edge   ---Trident                       IE内核

      Mozilla的Firefox          ---Gecko                         Firefox内核

      苹果的Safari               ---Webkit

      Google的chrome            ---Webkit-->Blink                统称为chrome内核

      Opera的Opera              ---Presto-->Webkit-->Blink
  • 浏览器功能：
  • 发送http请求
  • 接受服务器发回的http响应
  • 将接收的html进行解析并显示
  • HTTP协议

是客户端浏览器或其他程序与web服务器之间的应用层通信协议

  • http请求
  • request，浏览器根据网址向对应的服务器发送请求
  • 发起请求的方法：在浏览器地址栏中输入网址，或者点击网址链接
  • html页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求。
  • http响应
  • response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染。

HTML

  • 超文本标记语言，用来制作网页的一种标记语言；是一种纯文本格式的文件，但在网页中可以呈现包含文字以外的内容效果。
  • 功能：利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
  • html的语义化
  • 语义化网页的优势
  • 方便代码的阅读和后期的维护
  • 便于浏览器或是网络爬虫更好的解析网站内容
  • 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

HTML基本语法

HTML规范版本：HTML1.0---html5

  • HTML标签语法
  • 标签必须写在一堆尖括号<>内部
  • 标签分为单标签和双标签，双标签必须成对出现
  • 双标签包含开始标签和及结束标签，结束标签必须书写关闭符合/，单标签也需要进行自封闭书写。

HTML元素

  • html元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签

元素内容

  • 元素内容可以是纯文本，也可以是其他的html元素。当这种元素内容包含其他html元素的情况，称之为嵌套
  • 嵌套关系可以有多层
  • 单标签是不能添加元素内容的，称之为空元素

标签级别

根据标签内部可以存放的元素不同，可以将双标签划分为：

容器级：标签内部可以存放任意内容，包含容器级标签；

文本级：标签内部只能存放文字或类似文字的内容，如：图片，表单元素。

HTML元素的特性

  • 浏览器识别的是元素的开始和结束以及互相之间的嵌套关系
  • 空白折叠现象：当元素内容是文本，所有的文字（类似文字内容）之间有空格、换行、缩进等空白字符，在浏览器加载时，连接在一起的空白会折叠程一个空格显示

HTML属性规范

  • 书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
  • 属性包含：属性名（key）、属性值（value）；属性名和属性值之间的写法通常称为键值对写法，

    一个标签内可以设置多个不同的属性，属性与属性之间使用空格分隔

    部分标签属性k值可以设置多个属性值v，但是要写在同一对双引号内，值之间用空格分隔

HTML基本结构--基本骨架

<html>标签

  • 定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在<html>标签的内部

<head>标签

  • 用于存放<title>、<meta>、<base>、<style>、<script>、<link>，内部用于对网页的设置
  • 除了<title>内部的文字，其他标签都不显示在浏览器上。

    <title>标签
  • 作用：页面显示的标题，也作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化

<body>标签

  • 作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签，其内部的元素会显示在浏览器的窗口中

HTML基本结构--DTD

DTD

  • 完整的HTML文件的第一行内容叫做文档定义类型DocType Definition，简称DTD，也称文档声明类型
  • DocType Declaration。
  • 作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面

HTML基本结构--命名空间

命名空间xmlns

  • xml：可扩展标记语言，使用在传输过程中的规范，被设计用来传输和存储数据，是html的补充。
  • xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容
  • <html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，避免出现标签名冲突，
  • 这个标准使用的是一个固定网址https://www.w3.org/1999/xhtml中的规范

    语言
  • xml:lang="en"和lang="en" 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器都是有帮助的
  • lang="zh-cn" 表示中文（中国）

HTML基本结构--字符集

  • <head>标签内部的<meta>标签通过http-equiv属性定义了当前网页所使用的字符编码
  • char:character，字符。set：集合
  • XHTML1.0版本

    <meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
  • 字符集常见问题：

    若没有网页加载速度要求，或者制作的是外文网站，建议使用utf-8（包含世界所有国家需要的字符）

    若有使用大量中文汉字，且要求网页加载速度快的，建议使用gbk（国标码）

    注意！meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码

前端基础——HTML(一)的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. html css 前端基础 学习方法及经验分享

    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...

  3. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  4. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  5. 前端基础之DOM和BOM

    前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...

  6. tableview前端基础设计（初级版）

    tableView前端基础设计 实现的最终效果 操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  9. 前端基础进阶（五）：全方位解读this

    https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

  10. 前端基础之BOM和DOM day52

    前端基础之BOM和DOM   前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...

随机推荐

  1. linux学习（六）Linux yum 命令

    一.定义 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基于RPM包管理,能够从指定的服务器自动下 ...

  2. Excel文件内容无法显示解决方案

    问题描述: 双击打开一个excel文件,内容无显示,只能通过"打开"选项,选择文件,才能正常显示. 解决方法一: 1.[win+R]打开快速访问,输入"regedit&q ...

  3. zookeeper watch笔记

    ZK其核心原理满足CP, 实现的是最终一致性, 它只保证顺序一致性. zookeeper 基于 zxid 以及阻塞队列的方式来实现请求的顺序一致性.如果一个client连接到一个最新的 followe ...

  4. 项目里出现两个配置类继承WebMvcConfigurationSupport时，为什么只有一个会生效（源码分析）

    为什么我们的项目里出现两个配置类继承WebMvcConfigurationSupport时,只有一个会生效.我在网上找了半天都是说结果的,没有人分析源码到底是为啥,博主准备讲解一下,希望可以帮到大家! ...

  5. Python-反向迭代和实现反向迭代

    案例: 实现一个连续的浮点数发生器,FloatRange,根据给定范围(start, end) 和步进值,产生一些列的浮点数,例如:FloatRange(3,4,0.2),将产生下列序列: 正向:3. ...

  6. Python练习题 030：Project Euler 002：偶数斐波那契数之和

    本题来自 Project Euler 第2题:https://projecteuler.net/problem=2 # Each new term in the Fibonacci sequence ...

  7. CISCO交换机STP实验（生成树协议）

    目录 一.前言:生成树协议(STP) 二.CISCO交换机STP命令汇总 三.运用STP搭建简单拓扑 四.实战:STP综合实验 五.结语 一.前言:生成树协议(STP) 计算机网络中,我们为了减少网络 ...

  8. requests基本用法

    首先,确认一下:已安装 requests 从一些简单的示例开始吧. 发送请求 使用 Requests 发送网络请求非常简单. 一开始要导入 Requests 模块: >>> impo ...

  9. 轻松理解JVM的分代模型

    前言 上篇文章我们一起对jvm的内存模型有了比较清晰的认识,小伙伴们可以参考JVM内存模型不再是秘密这篇文章做一个复习. 本篇文章我们将针对jvm堆内存的分代模型做一个详细的解析,和大家一起轻松理解j ...

  10. Thinkphp中D方法和M方法的区别

    两者共同点都是实例化模型的,而两者不同点呢?一起来看一下: $User = D('User');括号中的参数User,对应的模型类文件的 \Home\Model\UserModel.class.php ...