html基本（01-HTML基础）
导读：HTML基础 1、HTML的概念和作用 概念 HTML（Hyper Text Markup Language）：超文本标记语言 超文本：不仅包含普通文本，还可以包含图片、视频、音频、超链接、表格等内容 标记语言：由标签构成的语言...
HTML基础
1 、HTML的概念和作用
概念 HTML（Hyper Text Markup Language）：超文本标记语言 超文本：不仅包含普通文本 ，还可以包含图片 、视频 、音频 、超链接 、表格等内容 标记语言：由标签构成的语言 HTML的作用 编写网页2 、W3C标准
网页主要由三部分组成 HTML：用于制作网页基础内容和基本结构 CSS：用于网页样式美化效果 JavaScript：用来制作数据验证 、交互行为效果 ，可以动态 操作网页的元素增删改查3 、HTML的组成
标签 标签可以用于设置文本样式 、图片样式 、超链接样式等等 。用<>表示 例如：<h1>标签 ，代表一级标签 。我们可以使用开始标签和结束标签包围文字 ，这些文字就以标题形式显示 属性 标签中还可以拥有属性 ，属性可以位标签提供更多的信息 属性只能添加到开始标签中 。格式为：属性名=属性值 例如：align属性 ，表示对齐方式 。我们可以在开始标签中添加该属性 ，就能让内容显示在不同位置 eg4 、初始HTML页面属性说明
<!DOCTYPE.html>：HTML的文档声明 <html lang="en">: 根标签 ，一个文件中只能有一个根标签 ，lang属性表示网页使用的语言 ，默认是en ，可以修改成zh <head>：头部标签 <meta charset="UTF-8">：设置字符集 ，建议使用UTF-8 <title>：文档标题 ，显示在浏览器标签上 <body>：身体标签 ，包含所有的文档内容5 、HTML基础语法
5.1 、文本标签
h1~h6 用于文章标题 ，一共有6级 1级最大 ，6级最小 这是块级标签 ，自带换行的功能 常用属性 align：标签对齐的方式 center居中 、right右对齐 、left左对齐 hr 水平线 ，即可在此画一条水平线 <hr size="5"> 常用属性 width：设置水平线的宽度（长度） size：大小（粗细） color：线的颜色 font 设置字体 、颜色 、字号等 PS 在HTML5中已经不推荐使用 内联标签 ，没有换行功能 常用属性 color：字体颜色 size：字体大小 face：字体 ，如：宋体 b bold加粗 ，与strong功能一样 i italic斜体 br 换行 p 每个p标签代表一个自然段 paragraph ，前后有一定间隔 ，首行没有缩进 常用属性 title：用于鼠标移上去显示提示文字信息5.2 、有序列表和无序列表
ol-li（有序列表） type属性 1：数字列表 ，默认值 a ，A：字母列表 ，包含大小写 i ，I：罗马数字编号 ul-li（无序列表） type属性 disc：黑心圆 ，默认样式 circle：空白圆 square：黑色正方体5.3 、特殊字符
什么是特殊字符 在HTML中 ，像<> “ ’ 空格 & 都是特殊字符 ，它们是语法本身的一部分 。 常用特殊字符 特殊字符格式 以&开头 ，以分号结尾 ，如 表示空格5.4 、div和span
标签 作用 特点 span 容器 ，可以包裹其他内容 是内联标签 ，不带换行功能 ，用于小范围的内容划分 div 容器 ，可以包裹其他内容 是块标签 ，不带换行功能 ，用于小范围的内容的划分 ，通常网页布局使用div将网页分成不同块5.5 、HTML案例-公司介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司简介</title> </head> <body> <!-- 需求分析： - 1.将文本素材内容放入其中 - 2.使用<h1>标签设置标题 ，修饰“公司介绍 ” - 3.使用<hr>标签加入水平线 - 4.使用4个<p>标签加入水平线 - 5.使用 设置第一个段落首行文本缩进6个空格 - 6.使用<font>标签 ，设置第一段“黑马程序员 ”字体颜色为红色 - 7.使用<i> <b>标签 ，设置第一段“传智教育“斜体与加粗 - 8.使用<span>标签 ，设置其他段 ”黑马程序员“字体颜色为红色 - 9.价格部分使用无序列表：ul-li - 10.使用<br>标签实现换行 ，在最后一段公司与版权中间实现 - 11.设置最后一段样式：文本居中 ，字体大小14px ，颜色gray - 12.使用版权特殊字符实现©显示 --> <div> <h1>公司介绍</h1> <hr size="5"/> <p> <font>黑马程序员</font> 是<i><b>传智教育旗</b></i> 下的高端IT教育品牌 ，现已开设JavaEE 、产品经理 、HTML&JS+前端 、C/C++ 、 新媒体+短视频直播运营 、Python+人工智能 、大数据 、UI/UE设计 、软件测试 、Linux云计算+运维开发 、 拍摄剪辑+短视频制作 、智能机器人软件开发 、电商视觉运营设计等培训学科 ，直营分校遍布北京 、 上海 、广州 、深圳 、武汉 、郑州 、西安 、长沙 、济南 、重庆 、南京 、杭州 、成都 、石家庄 、合肥 、 太原 、厦门 、沈阳 、天津等城市 。 </p> <p> <span>黑马程序员</span> 是传智教育旗下高端IT教育品牌 ，致力于服务各大软件企业 ，解决当前软件开发技术飞速发展 ，而企业招不到优秀人才的困扰 。我们的价值观: <ul> <li>责任 ，对教学质量精益求精全心全意教授好每一位学生 。</li> <li>务实 ，诚信待人 ，高效做事 ，不弄虚作假脚踏实地做好本职工作 。</li> <li>创新 ，勇于创新 ，在工作中不断突破 ，为学生提供更优质的教学资源与服务 。</li> <li>育人 ，在传授学生知识和技能的同时 ，言传身教 ，正面引导学生实现人生应有的价值追求 。</li> </ul> </p> <p><span>黑马程序员</span> 不仅着重培养学员的基础理论知识 ，更注重培养项目实施管理能力 ，并密切关注技术革新 ，不断引入先进的技术 ，研发更新技术课程 ， 确保学员进入企业后不仅能独立从事开发工作 ，更能给企业带来新的技术体系和理念 。 </p> <hr/> <center><font size="2">江苏传智播客教育科技股份有限公司版权所有Copyright©2006-至今, All Rights Reserved 苏ICP备16007882 </font></center> </div> </body> </html>5.6 、图像标签
img标签的作用
在网页中显示图片img标签格式
<img src="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84"/>常用属性
img标签显示图片 作用 src 图片地址 width 宽度 ，如果只指定宽度 ，高度会按等比例缩放 height 高度 alt 如果图片丢失 ，出现的替代文字PS：src不能写绝对路径
audio：定义音频 。（MP3 、WAV 、OGG）
src：规定音频的URL controls：显示播放控件video：定义音频格式：如MP4 、WebM 、OGG
src：规定视频的URL controls：显示播放控件5.7 、链接标签
链接标签的作用
跳转到其他页面链接标签的格式
<a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E7%9A%84%E7%9B%AE%E7%9A%84%E5%9C%B0">内容</a> 标签名 作用 备注 a 超链接跳转页面功能 1.href属性 ，表示超链接跳转指向的url地址；2.target属性 ，页面打开方式 ，_self表示当前页 ，_blank表示新标签页小结
超链接标签跳转页面的功能 <a href="https://www.cnblogs.com/OnlyOnYourself-lzw/p/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%E5%9C%B0%E5%9D%80">...</a> 超链接属性target的含义 表示设置跳转页面的打开方式 target="_self"表示在当前页面跳转 target="_blank"表示在新建标签页跳转5.8 、表格标签
表格标签的作用
用来显示多条数据 用于一些页面的布局 ，后期会使用div布局表格布局其他标签与属性
标签名 作用 table 表格容器 ，包含其他元素 tr 表示一行 ， table row th 列标题 ，加粗 ，居中 ，table head td 普通单元格 caption 表格的标题 thead 在逻辑上将表格层分为三个部分：表格头部 tbody 在逻辑上将表格层分为三个部分：表格的主题（PS：如果没有写tbody ，浏览器运行时会自动加上tbody） tfoot 在逻辑上将表格层分为三个部分：表格尾部 属性名 作用 width 表格宽度 border 外边框的粗细 align 对齐方式：用在table标签上是表示整个表格在父容器标签中居中；用在tr标签上表示表格这一行内容居中；用在td标签上表示这个单元格内容居中 rowspan 跨几行（将某几行融合为一行） colspan 跨几列（将某几列融合为一列） cellspacing 单元格之间的间距 cellpadding 单元格边框与内容之间的间距5.9 、表单标签
表单的作用
接收用户输入数据 ，并提交数据给服务器form表单格式
<form method="提交数据的方式" action="数据提交的目的地"> 手机数据标签 </form>常用属性
form常用属性 作用 action 提交给服务器的地址 method 提交的方式提交方法
提交方法 特点 GET 默认值 ，参数在地址栏显示 POST 参数不会显示 ，更加安全注意事项
action 规定当提交表单的时候向何处发送表单数据 ， URL method：规定用于发送表单数据的方式 GET：浏览器会将数据直接附在表单的action URL 之后 。大小有限制 POST：浏览器会将数据放到http请求消息体中 ，大小没有限制 。 表单数据要想提交必须满足两个要求 1.必须使用form标签将表单项标签包起来 2.表单项标签必须要有name属性6 、用户注册案例
用户注册案例显示效果 实现细节创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！