HTML 提供页面上的内容（结构和内容）

 

　　CSS 对网页进行美化（样式）

 

　　JavaScript对网页上的内容进行控制（控制）

 

　　常用开发工具：

 

　　轻量文本型：VSCode、Sublime

 

　　重量IDE型：WebStrom

 

　　下载VSCode 地址：

 

　　可以下载绿色版

 

　　汉化，安装中文控件

 

　　什么是HTML

 

　　HTML（英文 Hyper Text Markup Language 的缩写）中文译为超文本标记语言

 

　　通过HTML标签对网页中的文本、图片、声音等内容进行描述

 

　　打开网络上的一个页面，通过浏览器调试工具查看源代码

 

　　HTML的格式

 

　　基本格式

 

　　html标签：所有html标签的根节点

 

　　head标签：描述网页的一些信息，里面的内容不会被显示呈现

 

　　title标签：网页的标题

 

　　body标签：页面的主题部分，主要编写开发的内容

 

　　Tip:通过编辑器快速创建html的页面结构

 

　　在vscode中新建一个html文件后，输入！按tab键，可以快速生成一个HTML5标准的一个页面结构。

 

　　双标签

 

　　语法格式

 

　　<标签名> 在整个标签的最前面，称为“开始标签（start tag）”

 

　　</标签名> 在整个标签的最后面，称为“结束标签（end tag）”

 

　　结束标签只是比开始标签，在前面多了一个关闭符“/”。

 

　　单标签

 

　　语法格式

 

　　例如

 

　　UTF-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312

 

　　GB2312 简单中文  包括6763个汉字

 

　　BIG5   繁体中文 港澳台等用

 

　　GBK 包含全部中文字符    是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312

 

　　UTF-8 则包含全世界所有国家需要用到的字符

 

　　Tip：以后我们统一使用UTF-8字符集就可以了，避免出现字符集不统一而引起乱码的情况。

 

　　标题标签

 

　　语法

 

　　标题标签按1-6大小从大到小，如下图 默认提供1-6个标题标签，如果写h7则是普通文字

 

　　段落标签

 

　　单词缩写： paragraph  段落

 

　　使用段落标签，可以使网页中的文本文字，呈现出一个一个段落的格式。

 

　　语法：

 

　　水平线标签

 

　　换行标签

 

　　单词缩写：  break   打断 ,换行在HTML中，默认换行是需要在浏览器窗口的最右端才会自动换行，这样在每个设备中呈现的效果不一致。如果需要进行某段文本的强制换行，就需要使用到换行标签。

 

　　语法：

 

　　练习：实现一个简单新闻页面

 

　　div span标签

 

　　div   division  的缩写   分割， 分区的意思  其实有很多div 来组合网页。 块级元素

 

　　span  跨度，跨距；范围，行内元素

 

　　语法

 

　　标签属性

 

　　在使用HTML制作网页的时候，如果想让标签提供更多的信息，可以使用标签的一些属性进行设置。

 

　　语法

 

　　例

 

　　width  属性，值 200   控制宽度

 

　　align 属性，值 left     控制横向对其方式

 

　　默认hr标签占据了整行，设置以上属性以后宽度就只有设置的200

 

　　默认hr是居中对齐，设置左对齐

 

　　图片标签

 

　　单词缩写：image 图像（单标签）

 

　　语法

 

　　通过src属性，进行设置图像文件的路径和文件名。是img标签的必须属性。

 

　　图片标签属性

 

　　src可以是网络路径，可以的本地绝对路径或者相对路径，前提是路径存在图片有效，否则使用设置的文本代替

 

　　链接标签

 

　　单词缩写：anchor 锚

 

　　语法

 

　　示例

 

　　跳转 默认直接覆盖当前页面跳转，加target="_blank"新打开一个页面跳转

 

　　跳转需要加协议例如http否则会在当前目录绝对路径加跳转链接

 

　　特殊字符标签

 

　　html中一些标签，具有特殊含义，会被浏览器直接解析 ,如果需要输出这些标签，需要使用到转义、替代语法。

 

　　例如需要在页面显示：  <p>标签经常用于段落 直接写在html文本里面会把<p>当成标签解析，页面并不会显示

 

　　需要写成如下格式

 

　　注释标签

 

　　注释标签，可以给HTML文档中添加一些便于阅读和理解的文字，并且此标签中的内容，不会直接展示出来，只有通过源代码的方式才可以看到。

 

　　语法

 

　　也可以直接选中需要注释的语句 ctrl+/注释

 

　　列表标签

 

　　语法

 

　　①在<ul></ul>标签中，只能嵌套<li></li>标签，其他标签的直接嵌套是语法是不被允许的。

 

　　②<li></li>标签中作为一个容器，可以容纳其他的标签元素。

 

　　③无序列表具有默认样式，可以CSS进行修饰。

 

　　页面显示

 

　　ol有序标签

 

　　在前面加序号

 

　　页面显示

 

　　表格标签

 

　　语法

 

　　表格属性

 

　　①可以使用th标签设置表头 　　即把td改成th可以把表头设置成标题模式加粗

 

　　②之后可以使用CSS修饰表格的样式

 

　　示例：

 

　　一个主机列表表格

 

　　页面显示

 

　　修改设置

 

　　显示效果

 

　　表单

 

　　在HTML中，form标签用来定义一个表单。用来实现用户的相关信息的收集和传递，和后端进行交互。form中的所有内容都会被提交给服务器。

 

　　语法：

 

　　常用属性：

 

　　action  值为提交到后端接收的URL地址

 

　　method 设置表单的提交方式   值为get或者post

 

　　表单控件组成

 

　　表单中的提供了多种表单空间，单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

 

　　input控件

 

　　input控件为表单中，最常使用的，也是需要重点掌握的。基本标签属性为type属性

 

　　用来定义不同的控件类型。

 

　　其他常见属性

 

　　textarea控件（文本域）

 

　　当需要输入大量信息的时候，就可以使用textarea标签。实现多行文本的输入框。