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. 第一次软件工程与UML作业

    这个作业属于哪个课程 https://url.cn/IMQa18Jo 这个作业要求在哪里 https://edu.cnblogs.com/campus/fzzcxy/2018SE1/homework/ ...

  2. Node.js 从零开发 web server博客项目[项目介绍]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  3. 关于orm的个人测试——SqlSugar与FreeSql

    前言 转眼已经过了金九,光阴真的是似箭啊,周六日常加班,忙里抽闲就想鼓捣个啥看看,刚好最近想着有没有必要换个orm,从当时原生到Dapper,又到现在的Sqlsugar,因为经常听到几个不错的orm, ...

  4. ams入门了解

    另一篇介绍文  https://www.cnblogs.com/clds/p/4985893.html 转载自https://www.cnblogs.com/onlysun/p/4533798.htm ...

  5. 据说是面试题：由【if(a==1&&a==2&&a==3)】引发的思考探讨

    有一天,突然在一个微信群有个群友发了张图片抛出了一道题,如图: ​

  6. 遍历 Dictionary，你会几种方式？

    一:背景 1. 讲故事 昨天在 StackOverflow 上看到一个很有趣的问题,说: 你会几种遍历字典的方式,然后跟帖就是各种奇葩的回答,挺有意思,马上就要国庆了,娱乐娱乐吧,说说这种挺无聊的问题 ...

  7. 083 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 02 构造方法-带参构造方法

    083 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 02 构造方法-带参构造方法 本文知识点:构造方法-带参构造方法 说明:因为时间紧张, ...

  8. 04 ArcPython实战篇二

    1.删除Default.gdb中的所有要素类.表.栅格 2.空间随机抽取若干数 3.地震目录自动空间化 参考:esrichina易智瑞中国公开课

  9. 001 win10下安装linux子系统--Ubuntu及其图形界面

    首次启动图形界面关键步骤及相关命令: 步骤: 打开Xlunch 打开XLaunch,选择:"one large window",Display number设置成0,其它默认即可, ...

  10. ReverseFind的用法 ； 查找字符中最后一个字符

    转载:https://blog.csdn.net/frivolousinstant/article/details/52796922 ReverseFind CString::ReverseFind ...