一、HTML简介1. HTML是什么​ HTMLHyper Text Markup Language超文本标签语言​ 由各种标签组成用来制作网页告诉浏览器该如何显示页面2. 版本​ W3CWorld Wide Web Consortium万维网联盟制定Web技术相关标准和规范的组织HTML就是W3C制定的标准​ 版本HTML4.01、HTML53. 后缀名​ HTML文件以.html为后缀4. 开发工具​ 安装软件VS Code​ 安装插件Chinese、Live Server、VSCode Great Icons二、HTML文档结构1. 基本结构HTML标签是由尖括号包围的关键词如html通常都是成对出现如html /html以html为根标签包含head头部和body主体部分头部提供关于网页的相关信息如标题、字符编码等摘要信息主体部分提供网页的具体内容真正显示在页面中合理的进行缩进标签名不区分大小写但一般都习惯全小写2. 标签组成2.1 标签组成​ 一个完整的HTML标签的组成标签名属性名属性值内容/标签名​ 属性值要用引号引起来一般使用双引号2.2 标签分类根据标签是否关闭可以分为关闭型、非关闭型关闭型有结束标签title/titlebody/bodyh1/h1非关闭型没有结束标签hrmeta根据标签是否独占一行可以分为块级标签、行级标签块级标签显示为块状独自占一行h1/h1行级标签在行内显示可以与其他内容在同一行显示span/span3. 注释​ 注释在浏览器中不会显示!-- 注释内容 --4. 实体字符也称为特殊字符用于显示一些特殊符号如、、空格等语法实体字符名称;常用实体字符lt; 小于号 less thangt; 大于号 greater thannbsp;空格 space 对于连续的空白字符(包含空格、缩进、换行等)在浏览器中显示时只会显示为一个空格三、常用标签1. 基本标签标签含义说明br换行标签非关闭型p段落标签关闭型块级标签前后有明显的间隔h1、h2…h6标题标签按照h1到h6逐渐变小块级标签加粗显示div分区标签常作为容器来使用一般用在页面布局中块级标签span范围标签默认没有任何效果一般用来设置行内的特殊样式ol、li有序列表有顺序的项目列表ul、li无序列表无顺序的项目列表hr水平线标签非关闭型块级标签img图像标签非关闭型行级标签2. 开发者工具用来帮助开发人员查看和调试页面浏览器基本上都提供了类似的工具如何打开在页面中右击——检查/查看元素/审查元素按F12常用工具Console 控制台显示各种警告和错误信息Elements 元素从浏览器的角度查看页面浏览器渲染页面时的HTML、CSS、DOM等Network 网络查看网络请求信息浏览器向服务器请求了哪些资源、资源的大小以及加载资源花费的时间四、超链接1. 简介​ 使用超链接可以从一个页面跳转到另一个页面实现页面间的导航​ 当把鼠标移动到超链接上时鼠标箭头会变成一只小手​ 使用a标签来创建超链接2. 普通链接语法ahref链接地址target链接打开位置链接文本或图像/a常用属性href 链接地址/路径必须的target 链接打开的位置常用取值_self(自身、当前默认值)、_blank(空白、新的)3. 锚链接点击链接后跳转到指定的位置锚点anchor使用步骤定义锚点(标记)aname锚点名称目标位置/a链接锚点ahref#锚点名称当前位置/a4. URLUniform Resource Locator 统一资源定位符用来定位资源所在位置最常见的就是网址URL组成协议://域名:端口/路径/资源?参数#锚点示例http://www.baidu.com:8080/shop/product/add.html?nametomage21#abc协议 通信的协议如http、https、ftp、file域名服务器的地址一般开发中使用ip地址如192.168.1.8项目上线后使用域名如www.baidu.com端口通信时使用的端口号如http默认使用80、https默认使用443、ftp默认使用21如果使用的是默认端口则端口可以省略如果使用的不是默认端口则端口不能省略路径目标文件所在的路径结构如/shop/product资源要访问的目标文件如add.html参数也称为查询字符串以?开头参数名和参数值之间以隔开多个之间以隔开如?nametomage21锚点以#开头如#abc五、表格1. 简介​ 表格是一个规则的行列结构每个表格由若干行组成每行由若干单元格组成。​ table、row、column2. 基本结构2.1 table标签用来定义表格常用属性border 边框默认为0width/height 宽度/高度align 水平对齐取值left、center、rightbgcolor 背景颜色cellspacing 间距单元格与单元格之间的距离2.2 tr标签用来定义行table row常用属性align 水平对齐取值left、center、rightvalign 垂直对齐取值top、middle、bottombgcolor 背景颜色height 高度2.3 td标签​ 用来定义单元格table data​ 常用属性align、valign、bgcolor、width3. 合并单元格也称为表格的跨行跨列两个属性rowspan设置单元格所跨的行数如rowspan2表示跨越2行colspan设置单元格所跨的列数如 colspan4表示跨越4列步骤在跨越的单元格中设置rowspan/colspan属性将被跨越的单元格删除六、表单1. 简介​ 表单是一个包含若干表单元素的区域用于获取不同类型的用户信息​ 表单元素是允许用户在表单中输入信息的元素如文本框、密码框、单选按钮、复选框、下拉列表、按钮等2. 基本结构2.1 表单语法formaction表单提交的地址method表单提交的方式多个表单元素/form2.2 form标签用来定义表单可以包含多个表单元素用属性action 提交数据给谁处理默认为当前页面method 提交数据的方式取值get (默认值)、postget和post的区别​ get以查询字符串形式提交、地址栏能看到、长度有限制、不安全​ post以表单数据组形式提交(请求体)、地址栏中看不到、长度无限制、安全3. 普通表单元素​ 大多数表单元素都是使用input标签通过type属性设置表单元素的类型inputtype表单元素类型表单元素类型含义说明text单行文本框省略不时写默认就是textpassword密码框输入时以点号显示安全radio单选按钮只能选择其中的一个checkbox复选框可以同时选择多个file文件选择器选择要上传的文件submit提交按钮提交表单数据button普通按钮默认无功能3.1 单行文本框常用属性name 名称很重要如果没有name则该表单元素的数据不会被提交value 初始值placeholder 提示信息readonly 只读readonly“readonly”可简写为readonly即只写属性名disabled 禁用完全不能用3.2 单选按钮常用属性name 名称多个radio的name属性值必须相同才能实现单选互斥value 值checked 是否选中两种状态选中、未选中3.3 复选框​ 常用属性和radio类似4. 特殊表单元素表单元素含义说明select下拉列表option下拉列表的选项textarea文本域/多行文本框用来创建多行文本框4.1 下拉列表select常用属性name 名称option常用属性value 选项值selected 设置默认选中项4.2 文本域textarea常用属性name 名称rows 行数cols 宽度