## Web的基本概念 **什么是Web?** 中文翻译“网页”，它是一些列技术的总称，（包括网站的前台布局、后台程序、美工、数据库开发等），我们称它为网页。 ## Web标准 ### 结构标准（HTML） 网页的结构网页该有什么，（就像一辆车的基本框架结构这辆车该有什么） ### 表现标准(CSS) 设计网页的版式、颜色、大小外观。主要用CSS实现（就像一辆车的外观和内饰要什么颜色款式，现有的零件拼装成你想要的车） ### 行为标准（JavaScript） 网页的交互反馈以及动画效果，主要用JavaScript实现。现在的CSS3也能实现简单的动画效果。（框架外观都有了要让车跑起来不然就只能摆着看了） ### WWW www(world wide web, 万维网)不是网络，也不代表Internet,它只提供网页浏览服务 ### URL URL(Uniform Resource Locator,统一资源定位符)其实就是Web地址，俗称”网址”比如*www.baidu.com*就是百度的网址。万维网上的所有文件（HTML、CSS、图片、音乐、视频等）都有唯一的URL。URL可以是“本地磁盘”，也可以是局域网上的计算机。只要知道URL就能访问。 ### DNS DNS(domain Name System,域名解析服务)，域名与IP地址是一一对应的。域名（例如www.baidu.com）虽然方便记忆，但是计算机只认识IP地址，将域名转换成为IP就是DNS域名解析。 ### HTTP HTTP(Hypertext transfer protocol,超文本传输协议)。规定了浏览器和万维网服务器之间的通信规则。 HTTPS(安全超文本传输协议)。简单来说是HTTP的安全版，是使用TLS/SSL加密的HTTP协议 [http和https的区别详细介绍](https://zhinan.sogou.com/article/i5611182.htm?ch=zn.wap.kepu) ## HTML的基本认识 **什么是HTML？** HTML(Hyper Text Markup Language,超文本标记语言)，主要用来对网页中的文本、图片、声音等内容进行描述。它可包含“超级链接”，通过超链接将网站与网页以及各种网页元素链接起来，构成丰富的Web页面 ### HTML文档的基本格式 HTML文档基本格式：使用Dreamweaver 2020 新建默认文档会自带一些源代码 ```html 无标题文档 ``` - `` 文档类型声明，向浏览器说明当前文档的html版本和xhtm标准规范。 - `` 根标记，用于告知浏览器自身是一个html文档，``标志着html文档的开始，``标记着HTML文档的结束。 - `` 头部标记，用于封装其他位于文档头部的标记，例如`、、、`等，用来描述文档的标题、作者以及和其他文档的关系等。 1. ``标签用于定义HTML页面的标题，即给网页取名字，必须位于``标记内。一个HTML文档只能有一对``标记 2. ``标记用于定义页面的元信息，可重复出现在``头部标记中，在HTML中是一个单标记。``标记本身 不包含任何内容，通过“名称/值”的形式成对的使用其属性可定义页面的相关参数，例如为搜索引擎提供网页的关键字、作者姓名、内容描述，以及定义网页的刷新时间等。还有些用法不太理解有机会在回去看,等理解了再补全笔记（手动滑稽) 3. ``一个页面往往需要多个外部文件的配合，在``标记可引用外部文件，一个页面允许使用多个``标记引用多个外部文件。 4. ``标记用于为HTML文档定义样式信息，位于``头部标签中。在HTML中使用``标记时，常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式。 - `` 主体标记 浏览器中显示的所有文本、图像、音频和视频等信息都必须位于``标签内，并且``标记必须在``标记内，位于``头部标记之后。 ### HTML 标记 在HTML页面中，带有“”符号的元素被称为HTML标记。所谓标记就是放在“”标记符中表示某个功能的编码命令，也被称为HTML标签或HTML元素。 #### 单标记和双标签 - 双标记由开始和结束两个标记符组成，基本语法格式如下： ```html 内容 ``` - 单标记也称为空间标记，是指用一个标记符号即可以完整地描述某个功能的标记基本语法格式如下： ```html ``` #### 注释标记; 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码是就可以看到。语法格式如下： ### 标记的属性 如果想让html标记提供更多的信息例如设置文本的字体大小颜色等，仅靠html标记的默认显示样式已经不能满足了，这时可以添加html的属性加以设置。基本语法格式如下：可以拥有多个属性，属性之间空格隔开。 ```html ``` ## HTML文本控制标记 在一个网页中文字往往占有较大的篇幅，为了让文字能够排版整齐、结构清晰，HTML提供了一系列的文本控制标记。 ### 标题标记`

` HTML提供了6个等级标签，从``到``重要性依次递减。基本语法格式如下： ```html 标题文本

``` ### 段落标记`

` 在HTML中通过``标记来定义段落，其基本语法格式如下： ```html 段落文本

``` ### 水平线标记`` ``就是创建水平线的标记，其基本语法格式如下： ```html ``` **标记的常用属性（同样适用于文本属性）** 属性名 含义 属性值 -------- ---------------------- -------------------------------------------------------- align 设置水平线的对齐方式 可选择left、right、center、三种值，默认居中 size 设置水平线的粗细 以像素为单位，默认为2像素 color 设置水平线的颜色 可用颜色名称、十六进制\#RGB/rgb(r,g,b) width 设置水平线的长度 可以是确定的像素值也可以是浏览器的窗口百分比，默认100% 例： ```html ``` 效果：  ### 换行标记`
` 一个段落中的文字会一直从左排到最右边才会自动换行，如果想要在某个片段进行换行显示，就需要换行标记`
`(**就相当于一个回车键**)。 ### 文本样式标记`` HTML中提供了文本样式标记``,用来控制网页中文本的字体、字号和颜色。其基本语法如下： ```html 文本内容 ``` **``标记的常用属性** 属性名 含义 -------- -------------------------------------------- face 设置文字的字体，例如微软雅黑、宋体、黑体等 size 设置字体的大小，可以取1到7之间的整数 color 设置文字的颜色 例： ```html

我是蓝色5号，字体是微软雅黑

``` 效果：

我是蓝色5号，字体是微软雅黑

 ### 文本格式化标记 网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示，常用的文本格式化标记如下： **常用文本格式化标记** 标记 显示效果 ---------------------------------------------------- -------------------------------------------- ``和`` 文字以粗体方式显示（XHTML推荐使用strong） ``和`` 文字以倾斜方式显示（XHTML推荐使用em） ``和`` 文字以加删除线方式显示（XHTML推荐使用del） ``和`` 文字以加下划线方式显示（XHTML推荐使用ins） 例： ```html

我是正常显示文本

我是用b标记加粗的文本，我是使用strong加粗的文本

我是使用i标记倾斜的文本，我是使用em倾斜的文本

我是使用u带下划线的文本，我是使用ins带下划线的文本

我是使用s带删除线的文本，我是使用del带删除线的文本

``` 效果：

我是正常显示文本

我是用b标记加粗的文本，我是使用strong加粗的文本

我是使用i标记倾斜的文本，我是使用em倾斜的文本

我是使用u带下划线的文本，我是使用ins带下划线的文本

我是使用s带删除线的文本，我是使用del带删除线的文本

 ### 特殊字符标记 HTML为类似“ GIF最突出的地方是它支持动画，同时也是一种无损图像格式，也就是说修改图片后，图片质量几乎没有损失。但GIG只能处理256中颜色。 1. **PNG格式** > PNG最大的优势是体积更小，对颜色过渡更平滑，但PNG不支持动画。 1. **JPG格式** > JPG所能显示的颜色比GIF和PNG要多得多，但是JPG是一种有损压缩的图像格式，意味着每一次修改图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式。 > > **在网页设计中三种图像格式混合使用各取所长** ### 图像标记 在HTML中使用``标记来定义图像，其基本语法如下： ```html ``` #### 图像的宽度、高度属性width、height width和height属性用来定义图片的宽度和高度，通常我们只设置其中一个，另一个会按原图比例显示。如果同时设置两个属性，图像的显示就可能会变形或失真。 ```html ``` 2.图像文件位于HTML的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如 ```html ``` ### 站点 **什么是站点？** **站点就是定义一个存放网站中零散的文件的文件夹，方便网站上传维护，内容扩充，对网站移植也有重要作用。** ### 新建站点 点击“站点”-“新建 站点 ”   ## HTML标签描述 ### ``下标`` 上标 例： ```html

This text contains subscript

This text contains superscript

``` 效果：

This text contains subscript

This text contains superscript

 ### ``超级链接 基本语法格式： ```html 文本或者图像 ``` - **href**用于指定链接目标 的url地址。 - **target**用于指定链接页面的打开方式，其值有\_self和\_blank两种 ，其中\_self为默认值，就是在原窗口打开，\_blank为在新窗口中打开。 - **title**”鼠标经过时显示的内容” ### 锚点链接 相当于一个跳转，标记一个锚点后可以通过链接跳转到标记这个点，常用在一些网页的返回顶部。 暂时没有确定链接目标时，通常将``标记中的href属性值定义为“\#”（即href = “\#”），表示回到最顶上。 创建连接文本：使用相应的id名标注跳转到目标的位置。 ```html 连接文本 ``` ### 列表标记 #### 无序列表ul + li 无需列表与各个列表之间没有顺序级别之分，通常是并列的。 基本语法格式： ```html

• 列表项1
• 列表项2

``` #### 有序列表 ol + li 有排列顺序的列表，各个列表项按照一定的顺序排列，例如网页中常见的排行榜等。 基本语法格式： ```html

1. 列表项1
2. 列表项2

``` #### 自定义列表dl + dt + dd 通常用于对术语或名词进行解释和描述， 基本语法格式： ```html

名词1

解释1

解释2

………

名词2

解释1

解释2

** ``` ## HTML表格相关标记 ### 创建表格 表格的开始元素是``,结束元素是``,即所有的表格内容都要位于这两个元素之间。想要创建完整的表格，除了要有表格元素外，还需要有行元素`和单元格元素``。创建表格的语法如下: ```html 单元格内的文字 ... ... ``` - ``：用于定义一个表格 - ``：用于定义表格中的一行，必须嵌套在``标记中，有几对``就表示有几行 - ``：用于定义表格中的单元格，必须嵌套在``标记中，有几对``就表示有该行中有多少列 例： ```html

第一行第一列	第一行第二列
第二行第一列	第二行第二列

``` 效果：

第一行第一列	第一行第二列
第二行第一列	第二行第二列

 ### `