《html学习笔记-基础》由会员分享，可在线阅读，更多相关《html学习笔记-基础（11页珍藏版）》请在金锄头文库上搜索。
1、1.软件分类软件主要分为两大类：C/S 架构的软件 和 B/S 架构的软件（1）C/S 架构客户端（client） /服务器（server ） ；定义：桌面使用的软件都属于 C/S 架构，且用户需把客户端安装本地 PC 机使用，服务器则处理软件的业务逻辑； 软件如：qq、office 等C/S 架构特点：1. C/S 架构的软件使用前必须要安装, 一般使用图形化界面来作为客户端2. 软件更新时客户端和服务器必须都得更新3. C/S 架构的软件不能跨平台使用4. C/S 架构的软件客户端与服务器之间的通信是采用的自有协议，相对安全（2）B/S 架构浏览器（browsers ）/服务器（serve
2、r）定义:B/S 本质上也是一种 C/S， B/S 是通过浏览器访问网页来作为客户端;如：新浪网、淘宝网、百度B/S 架构特点：1.B/S 架构的软件不需要安装，直接通过浏览器使用2.软件更新时客户端不需要更新3.B/S 架构的软件可以跨平台使用4.B/S 架构的软件客户端和服务器间的通信采用的是公开的 HTTP 协议，安全性较差软件开发流程网页设计=前端、全栈= 后台HTMl 基础网页构成构成：结构+表现+ 行为结构通过 html 实现，描述页面结构；表现通过 css 实现，控制元素样式；Comment z1: Html文档声明，此处是 h5声明Comment z2: 根标签，告诉浏览器此网
3、页用 html编写Comment z3: 头标签Comment z4: Meta标签告诉浏览器使用哪个字符集去解析文件。一般使用 utf-8Comment z5: Title中是网页标题Comment z6: H1是 Body中是网页内容标签Comment z7: Body标签写网页内容行为通过 JavaScript实现，相应用户操作；简介HTML（Hypertext Markup Language）超文本标记语言。 （相当于增强版的文本） ；负责网页的三个要素之中的结构；HTML 使用标签的的形式来标识网页中的不同组成部分；所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页
4、面。基本的 HTML页面网页标题网页正文 Html族谱HTMLheadmeta title style、script 等bodyh1、p div等注释作用：编码说明，隐藏不想显示的内容HTML注释中的内容不会在网页中显示。格式: 注释要简单明了，注释不能嵌套例如：标签元素就是标签，标签就是元素HTML 中的标记指的就是标签。 HTML 使用标记标签来描述网页。结构：标签内容 或常用标签:网页根标签，一个页面有且只有一个根标，网页中的所有内容都需要写在 html 标签的内部签网页的头部, head 标签中的内容不会在网页中直接显示 , 该标签用于帮助浏览器解析页面是 head 的子标签，设置网页
5、的关键字设置网页的描述请求的重定向 ，refresh:更新是 head 的子标签；用来设置网页的标题，默认会在浏览器的标题栏中显示；作用：搜索引擎检索网页时，会主要检索 title 中的内容，它会影响到页面在搜索引擎中的排名，网页的主体; 网页中所有的可见部分都需要在 body 中编写设置字体的样式， color、size 等；从开始标签中添加。一个标签可以写多个属性，之Comment z8: 值用单引号或双引号都可以Comment z9: 加了 X表示 4DC1是十六进制，不用再进行转换二进制间用空格隔开即可你好 标题标签在 html中一共有六级标题六级标题中，h1 最重要， h6最不重要，
6、一般页面中只会使用 h1h3h1的重要性仅次于 title，浏览器也会主要检索 h1中的内容，以判断页面的主要内容一般一个页面中只能写一个 h1段落标签, 段落标签默认都是独占一行的，并且与其他内容都会有一个上下的间距:换行标签, 在 HTML中，多个空格和换行只会被解析成一个空格换行需要使用 标签:水平线标签实体：在 HTML中一些特殊符号是不能直接使用的，比如 如果需要使用可以使用实体（转义字符）来代替语法：䷁图片标签作用：标签是图片标签，可以用来向页面中引入一张外部的图片。语法属性：src:指向一个外部的图片的路径。alt:图片的描述，搜索引擎通过 alt 属性进行识别，如果
7、不写，搜索引擎不会收录网页例如：【拓展】width 用来设置图片的宽度 height 用来设置图片的高度设置图片的宽度和高度时，如果只设置一个，则另一个也会等比例缩放一般情况下做 pc 端开发时，尽量不要设置图片的宽度和高度相对路径这里 src 使用的路径是相对路径- 所谓相对路径指的是外部文件相对于当前资源所在目录的位置img src=hello/abc/1.jpg alt=这是一个很惨的人 /使用./ 返回一级目录 返回几级目录就使用几个 ./图片的选择常见的图片格式JPEG/JPG：支持的颜色多，适合显示颜色丰富的图片（照片） ，不支持透明效果GIF：支持的颜色少，支持简单的透明效果，支
8、持动态图，适合颜色简单、透明简单PNG：支持的颜色丰富，支持复杂的透明效果图片选取的原则：效果一致用小的，效果不一致用效果好的标签（重要）作用：标签是超链接标签，通过 a 标签，可以快速跳转到其他页面。属性href 指向一个链接地址target设置打开目标页面的位置，可选值：_blank 弹出新窗口、_self 当前窗口。_blank 在新窗口中打开被链接文档。_self 默认。在相同的框架中打开被链接文档。_parent 在父框架集中打开被链接文档。_top 在整个窗口中打开被链接文档。Framename 在指定的框架中打开被链接文档。例如：水花页面 _blank 使用 我是网页地址 元素元
9、素就是标签，标签就是元素一个完整的标签称为元素。可以将元素和标签认为是一个同义词。一级标题则 h1 称为元素body 也是一个元素。body 是 p 和 em 的祖先元素。p 和 em 是 body 的后代元素内容 文档声明用来标识当前页面的 html 的版本；该声明用来告诉浏览器，当前的页面是使用 HTML5 的标准编写的H5 的文档声明怪异模式 为了兼容一些旧的页面，浏览器中设置了两种解析模式： 标准模式（Standards Mode） 怪异模式（Quirks Mode）怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。避免的最好方式就是在页面中编写正确的 doc
10、type进制问题十进制我们日常生活中都是使用 10 进制，所谓 10 进制，满 10 进 1例子：0 1 2 3 4 5 6 7 8 910 11 12 13 14 15 .二进制在计算机中除了 10 进制也会用到 2 进制 8 进制 16 进制二进制，满 2 进 1例子 0 1 10 11 100 101 110 111 1000八进制八进制，满 8 进 1例子 0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17十六进制十六进制，满 16 进 1，所以在十六进制使用了几个特殊的符号来表示 10 11 12 13 14 15a(10) b(11) c(12) d(1
11、3) e(14) f(15)例子 0 1 2 3 4 5 6 7 8 9 a b c d e f10 11 12 13 . 1a 1b 1c 1d 1e 1f乱码问题乱码问题产生的原因：计算机底层实际上只认识 0 和 1，所以所有的内容在计算机中保存时都需要转换为二进制编码来保存比如：文字 01010 文字将字符转换为二进制编码的过程我们称为编码，将二进制编码转换为字符的过程我们为解码；编码和解码都需要遵循一定的规则，这个规则我们称为字符集（charset）常见的字符集：ASCIIISO-8859-1GB2312GBKUTF-8 万国码- 产生乱码的根本原因：编码和解码所采用的字符集不同网页：
12、编码：编辑器解码：浏览器- 解决乱码问题：统一编码和解码所采用的字符集为 UTF-8属性通过属性为 HTML 元素提供附加信息；属性需要设置在开始标签或自结束标签中。属性总是以名称/值对的形式出现；有些属性可以是任意值，有些则必须是指定值；属性设置网页标签的效果格式：XXXX常见属性Id： id 属性作为标签的唯一标识， 在同一个网页中不能出现相同的 id 属性值。Class：class 属性用来为标签分组，拥有相同 class 属性的标签我们认为就是一组，可以出现相同的 class 属性，可以为一个元素指定多个 class。Title：title 属性用来指定标签的标题，指定 title 以
13、后，鼠标移入到元素上方时，会出现提示文字。网页构成HTML 标签 如 html 是网页的根标签，一个页面中有且只有一个 html 标签，网页中的所有的内容都应该写在 html 标签内部Head 标签如 网页的头部， head 中的内容不会在网页中直接显示，它用来告诉浏览器如何解析网页Title 标签title 中的内容一般会在网页的标题栏中显示，搜索引擎在检索网页时，会主要依据 title 中的内容来识别网页title 中的内容会影响到网页在搜索引擎中的排名例如：网页标题Body 标签网页的主体，网页中所有的可见的内容都应该写在 body 中例如：Font 标签font 标签专门用来设置字体的
14、样式的（标签中属性实际上是一组一组的名值对结构，一个属性名对应一个属性值，属性名和标签名之间需要空格隔开，属性值需要使用引号引起来，在一个标签中可以写多个属性，属性之间使用空格隔开）例如我的网页内容 (说明：size 最大值为 7；1-7)列表 ul ol dl有序列表、无需列表、定义列表1. 无序列表，使用 ol 和 li 来创建,使用符号作为序号; 开发中一般使用无序列表ul 创建无序列表，li 创建列表项结构：2. 有序列表，使用 ol 创建，li 表项，使用序号作为符号结构：3. 定义列表，通过定义列表对内容定义或描述使用 dl 创建定义列表，dt 创建内容标题 dd 对内容描述结构：Comment z10: 当设置 href=”#”时，点击默认回到页面顶部位置三种列表可以嵌套使用无序列表 ul和有序列表 ol和定义列表 dl的嵌套使用购物车水果 干货 粮食 菜篮子 萝卜辣椒洋葱超链接（具体见 a标签的使用）通过超链接可以使我们的浏览器跳转到其他的页面使用 a 标签来创建一个超链接属性：href 指定超链接要跳转到的目标页面target 设置在哪里打开超链接的页面- 可选值_self 默认值 在当前窗口打开链接_blank 在一个新的窗口打开链接例如：新闻我是一个超链接去 demo01设置 id进行跳转去底部回到顶部
