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. java安全编码指南之:堆污染Heap pollution

    目录 简介 产生堆污染的例子 更通用的例子 可变参数 简介 什么是堆污染呢?堆污染是指当参数化类型变量引用的对象不是该参数化类型的对象时而发生的. 我们知道在JDK5中,引入了泛型的概念,我们可以在创 ...

  2. Shell学习（一）认识Shell

    一.啥是Shell Shell : 一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell脚本 :  一种为 shell 编写的 ...

  3. 手写：javascript中的关键字new

    简单介绍一下new new再熟悉不过了,new后面跟着构造函数,可以创建对象,这个对象的原型指向构造函数的原型对象,说起来可能有点绕,直接看代码吧 function Person(name, age) ...

  4. JavaScript创建对象的方式汇总

    1.Object构造函数创建 // 1.Object构造函数创建 var Obj = new Object(); Obj.name='saoge'; Obj.say=function(){ conso ...

  5. 生命周期（初始化、销毁方法、BeanPostProcessor后处理Bean）

    1.初始化和销毁 在目标方法执行前后进行初始化或销毁 (1)在Service方法的实现类里面创建初始化方法和销毁方法: public class StudentServiceImpl implemen ...

  6. Python-为元组中每个元素命名

    学生信息系统: (名字,年龄,性别,邮箱地址) 为了减少存储开支,每个学生的信息都以一个元组形式存放 如: ('tom', 18,'male','tom@qq.com' ) ('jom', 18,'m ...

  7. 061 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 08 一维数组总结

    061 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 08 一维数组总结 本文知识点:一维数组总结 总结 注意点

  8. I2C总线的Arduino库函数

    I2C总线的Arduino库函数 I2C即Inter-Integrated Circuit串行总线的缩写,是PHILIPS公司推出的芯片间串行传输总线.它以1根串行数据线(SDA)和1根串行时钟线(S ...

  9. DES加解密算法（C语言实现）

    DES加密和解密算法的实现(C语言) 主要是做个记录,害怕以后代码丢了,先放到这里了. DES再不进行介绍了,可以看上一篇的 DES 的python实现 转载请注明出处:https://www.cnb ...

  10. 用< 100行代码向EPUB或Web服务器添加视频回放

    下载source - 32.3 KB 下载latest version from GituHub 介绍 在我 在关于CodeProject的前一篇文章中,我展示了一个简单的EPUB查看器 Androi ...