本文介绍了HTML和CSS的基础知识，包括HTML的标签、元素、属性，CSS的选择器、样式和布局。讲解了如何通过HTML构建网页结构，利用CSS进行样式控制，如文本格式、颜色、字体和盒子模型。此外，还探讨了浏览器兼容性、编码问题和文档流等概念。
WEB介绍----前端常识
1.WEB：world wide web --> 广域网 —>万维网 —> 建立在internate上的一个网络服务
2.前端技术：
项目：前端+后台
前端技术：HTML +CSS +javascript
后台技术：Java，.net ,PHP …3.划分
初级前端的技术：HTML+CSS+JavaScript
中级前端的技术：HTML5+CSS3+JavaScript+移动端
高级前端的技术：Node，js,Vue.js，REct…各种框架4.定义
web : world wide web --> 广域网 —>万维网
HTML :Hyper Text Markup Language(超文本标记语言)
CSS ： Cascading Style Sheet s(层叠样式表)
JavaScript ：简称JS，一种脚本语言，动态类
xml : 用来存储数据
5.开发软件
Hbulider
VS Code
Sublime
WebStorm6.五大浏览器
CHrome、Firefox、IE（11,10,9,8,7,6）、 Opera、 Safari7.常见的浏览器内核4个
Tradent Blink Gecko Webkit
内核不同，网页的展示效果也就不同8.内核中种引擎
渲染引擎：获取页面，整理，计算，最终把效果展示给用户
JS引擎：获取js解析，实现动态交互的效果
9.浏览器对应的内核
谷歌和Opera ：Blink----V8引擎 ------谷歌浏览器以前用的也是webkit内核
IE：Trident
Safari :Webkit
Firefox : Gecko
B/S 技术 -------浏览器/服务器 -----浏览器联网可以
C/S技术 --------客户端/服务器 -----qq属于客户发端—需要发送服务器
PC端的软件
组织介绍
- W3C 万维网联盟 world wide web Consortium
- 专门定义网页相关的标准而成立的
- 定义了网页中的HTML,CSS,DOM,HTTP,XML等标准。
- WHATWG 网页超文本应用技术工作小组
- 是以推动网络HTML5标准为目的而成立的组织
- 在2004年由Opera/Mozilla基金会和苹果这些浏览器厂商组成。
W3C 标准学习的内容
- 根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。
- 结构—HTML ,用于描述页面结构
- 表现----CSS ，用于控制页面样式
- 行为----Javascript ，用于响应用户操作
HTML 和CSS介绍
HTML
- 定义：HTML （Hypertext Markuup Language）超文本标记语言。
- 负责网页三要素之中的结构
<!DOCTYPE html> H5的规范 html:xt 过渡版本 html: ! + tab
标签
- HTML中的标记指的就是标签
- HTML使用标记来描述网页
- 结构：<标签名> 标签内容</标签名>
元素
- 可以将一个完整的标签视为元素
- Html标签 === 元素 ----节点(包含文本，标签等)
属性
- 通过属性为HTML元素提供附加信息
- 属性名：属性值对应。
- 属性需要设置在开始标签或者自结束标签中。
- 属性总是以
名称/值对的形式出现
常见属性
id: id属性作为标签的唯一表示，在同一个网页中不能出现相同的id属性值。
class: class属性用来为标签 分组，拥有相同class属性的标签被认为就是一组，可以出现相同class属性，也可以为一个元素指定多个cass。
title:title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。
注释
- HTML注释中的内容不会在网页中显示
- 格式：
<!-- 注释的内容 --> - 注释不能嵌套！！！
- 合理使用注释可以磅数开发人员理解网页的代码。
doctype
- 文档类型
<!DOCTYPE html> 文档类型 <html> 根标签 <head> 头部标签 <meta charset='utf-8'> 配置标签 <title> 标题标签 <meta name='keyworlds' content=''> <meta name='description' content=''> <body> 主体标签
html4
- 过渡版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - 严格版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - 框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
xhtml1.0
- 过渡版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - 严格版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - 框架集
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
html5
<!DOCTYPE html> H5的文档声明
怪异模式
- 为了兼容一些旧的页面，浏览器中设置了两种解析模式：
- 标准模式（Standards Mode）
- 怪异模式（Quirks Mode）
- 怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出
现。- 避免的最好方式就是在页面中编写正确的doctype。
编码问题
- 在计算机的内部，文件都是以二进制编码保存的。
- 所谓的二进制编码就是指1和0，也就是我们的所有内容都需要转换为1和0。
- 中国两个字在计算机的底层保存的可能要转换为10100101这种二进制码，这一过程
称为编码。 - 计算机在读取文件时需要将10100101在转换为中国给我们显示这一过程称为解码
字符集
-
字符集规定了如何将文本转换为二进制编码。
-
常见的字符集：ASKII、ISO8859-1、GBK、GB2312(中文编码)、UTF-8（国际编码）。
-
解决乱码问题
- 这里为了页面有更好的使用性，我们一般使用utf-8。
-
告诉浏览器使用什么字符集去解析文件。在html5中只需要使用meta标签即可完成
这个任务：编码设置 charset<meta charset="utf-8" />
<meta>
<meta>标签可以提供页面的元信息，比如针对搜索引擎和更新频度的描述和关键词<meta>标签位于文档的头部，不包含任何内容<meta>标签的属性定义了与文档相关联的名称/值对<meta>的用法设置页面的字符集： <meta charset
最低0.47元/天 解锁文章
扫一扫
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
