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. apache OS 10013 问题

    问题描述 (OS 10013)通常每个套接字地址 (协议/网络地址/端口) 只允许使用一次: make_sock: could not bind to address 0.0.0.0:80 解决方法 ...

  2. 国产化之路-麒麟V10操作系统安装.net core 3.1 sdk

    随着芯片国产化,操作系统国产化,软件国产化的声浪越来越高,公司也已经把开发项目国产化提上了日程,最近搞来了台长城的国产化电脑主机,用来搞试验,安装的是麒麟V10的操作系统,国产化折腾之路就此开始,用的 ...

  3. Redis基础知识补充及持久化、备份介绍

    Redis知识补充 在上一篇博客<Redis基础认识及常用命令使用(一)–技术流ken>中已经介绍了redis的一些基础知识,以及常用命令的使用,本篇博客将补充一些基础知识以及redis持 ...

  4. 栈帧的内部结构--局部变量表(Local Variables)

    每个栈帧中包含: 局部变量表(Local Variables) 操作数栈(Opreand Stack) 或表达式栈 动态链接 (Dynamic Linking) (或指向运行时常量的方法引用) 动态返 ...

  5. PHP绕过disable_function

    PHP绕过disable_function 常规绕过 exec exec执行command命令,但是不会输出全部结果,而是返回结果的最后一行. 想得到全部的结果,可以使用第二个参数,让其输出到一个数组 ...

  6. springboot maven项目运行常见报错 及ajax请求报错

    如图所示 tomcat运行后直接停止,也不报错 原因:我的原因是controller路径配置重名或者service没有配置@Service 遇见这错找了好久问题,网上也搜不到,特此记录一下 问题2 a ...

  7. java经典算法40题-附带解决代码

    前一段时间工作比较闲,每天没有代码敲的日子有点无聊,于是为了保证自己的编程逻辑力的日常清醒,故百度了一些经典的java算法,然后自己思考编程解决问题,虽然那些东西比较基础了,但是有些题目小编看到了也是 ...

  8. C++雾中风景15:聊聊让人抓狂的Name Mangling

    Name Mangling,直接翻译过来为名字改写 .它是深入理解 C++ 编译链接模型的必由之路. 笔者近期进行数据库开发工作时,涉及到MySQL客户端的编译链接的问题,通过重新厘清了之前理解一知半 ...

  9. Centos-yum软件包安装-yum

    yum 自动安装相关软件依赖,可以同时配置多个yum源,初始启动yum时候首先会缓存资源包到 /var/cache/yum目录下 yum确认 -y yum安装和卸载 install 安装,自动安装软件 ...

  10. Centos-zip压缩-文件或目录-zip unzip

    zip uzip 将一般文件或者目录进行压缩或者解压,默认以 .zip为后缀名 zip 相关选项 -r 递归压缩目录 -d 从压缩包中删除指定文件 -i  压缩指定文件列表文件 -x 压缩排除指定文件 ...