一、HTML介绍
1.什么是HTML？
HTML中文名字是超文本标记语言。超文本：即超越了普通纯文本的功能，可以定义除文字外的音视频、图片等；标记语言：由标签构建的语言，标签都是预定义好的。HTML运行在浏览器上。
补充：W3C标准：网页由三部分组成（结构：HTML，表现：CSS，行为：Javascript）
2.快速入门：
2.1.创建一个名为hello world.html文件
2.2.打开文件，写入
<html>
<head>
<title>html快速入门</title>
</head>
<body>
<h1>hello world</h1>
<h1>乾坤未定，你我皆是黑马</>
</body>
</html>`
2.3.保存文件，改后缀名为.html,双击文件打开看效果。
3.小结：
3.1.html文本是以.htm或.html结尾。
3.2.html结构标签：<HTML>是定义html文档；<head>定义关于文档信息；<title>定义文档标题；<body>定义文档主体。
3.3.html标签不区分大小写。
3.4.html标签属性值，单双引号都可以。
3.5.html语法松散（注：但默认要正确语法，方便阅读）。
二、html基础标签：
1.基础标签介绍：
1.1.<h1>~<h6>:定义标题，设置文本大小
1.2.<font>：定义字体尺寸（size）、颜色（color：英文单词、rgb、#值1值2值3 这三种设置颜色，一般用#值1值2值3 ）、字体（face）
1.3.<b> ：设置加粗
1.4.<i> ：设置倾斜
1.5.<u>：设置下划线
1.6.<center>：设置居中
1.7. <p> ：设置为段落
1.8.<!--<br>--> ：设置换行
1.9.<hr> ：定义水平线
2.案例：
2.1.将下面这段文字通过在html中设置成如图所示的样子：
公司简介
xx教育(股票代码 003032)，隶属江苏xx教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦 著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。
探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“探索教育本源，开辟教育新生态”便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
江苏xx教育科技股份有限公司 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882
样式图：
3、我的代码示例：
三、图片音视频标签
注：height属性和width属性有两种设置方式：（1）像素：单位是px；（2）百分比；占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）
1、<img>图片标签，里面可以设置src（图片路径）、width（图片宽度）、height（图片高度）等属性；
2、<audio>音频标签，里面可以设置src（图片路径）、controls（显示播放控件），也可以设高度宽度等属性；支持的音频格式：MP3、WAV、OGG。
3、<viedio>视频标签，里面可以设置src（图片路径）、controls（显示播放控件），也可以设高度宽度等属性；支持的音频格式：MP4, WebM、OG。
4、效果示例：
补充：src属性的两个写法：
1、绝对路径：将引用的文件所在位置的完整路径全部写进去src中。
2、相对路径：相对位置关系（即引用的文件与当前html文件的位置关系）
2.1.若引用的文件与html文件在同级目录下写成 ./xxx.txt或者xxx.txt 因为./可以省略；
xxx/html/02-图片音频视频.html xxx/html/a.jpg
2.2.若引用的文件是下面这种关系写成 ./img/a.jpg或者img/a.jpg 因为./可以省略；
xxx/html/02-图片音频视频.html xxx/html/img/a.jpg
2.3.若引用的文件是下面这种关系写成（不在同一级目录中） ../img/a.jpg
在该页面找a.jpg，就需要先回到上一级目录，该级目录有img目录，进入该目录就可以找到 a.jpg图片。
xxx/html/02-图片音频视频.html xxx/img/a.jpg
四、超链接标签
1、<a>属性：
1.1 href：指定访问资源的URL
1.2 target：指定打开资源的方式
1.2.1 _self：默认值，在当前页面打开
1.2.2 _blank：在空白页面打开，即单开一个页面打开展示该超链接对应的界面。
代码演示：
五、列表标签
1、有序标签(type 属性用来指定标记的标号的类型（数字、字母、罗马数字等) )
<ol> <li></li> <li></li> ... </ol>
2、无序标签(type 属性用来指定标记的形状)
<ul> <li></li> <li></li> ... </ul>
2、代码演示：
六、表格标签
1、表格标签介绍
table ：定义表格
border：规定表格边框的宽度
width ：规定表格的宽度
cellspacing：规定单元格之间的空白
tr ：定义行
align：定义表格行的内容对齐方式
td ：定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
th：定义表头单元格
2、代码演示：
七、布局标签
1、<div>定义html文档中一个区域部分，常与css一起使用，用来布局网页（div标签 在浏览器上会有换行的效果）。
2、<span>用于组合行内元素（span 标签在浏览器上没有换行效果）。
3、代码演示：
八、表单标签
1、概念：
类似登陆页面、注册页面等都是表单。主要作用是采集用户输入的数据，将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。
表单：在网页中主要负责数据采集功能，使用 标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
2、标签介绍：
2.1 <form> 定义表单（form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果）
2.2<input> 定义表单项，通过type属性控制输入形式
2.3<label> 为表单项定义标注
2.4<select> 定义下拉列表
2.5<option> 定义下拉列表列表项
2.6<textarea>定义文本域
3.form标签属性
action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
method取值有如下两种：
get：默认值。如果不设置method属性则默认就是该值 请求参数会拼接在URL后边
url的长度有限制 4KB
post：
浏览器会将数据放到http请求消息体中
请求参数无限制的
4.代码演示（由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用input 这个表单项标签展示输入框效果）：
九、表单项标签
表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：
1、<input> ：表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样。
type属性：
（1）text：默认值。定义单行输入字段；
（2）password：定义密码字段；
（3）radio:定义单选按钮；
（4）checkbox：定义复选框；
（5）file：定义文本上传按钮；
(6) hidden：定义隐藏输入字段；
（7）submit：定义提交按钮，会将表单数据发送到服务器；
（8）reset：定义重置按钮，清除表单中所有数据；
（9）button：定义可以点击的按钮。
2.<select>:定义下拉列表，<option> 定义列表项。如图效果：
3.<textarea>：文本域，可以输入多行文本
注意： 以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。 单
选框、复选框、下拉列表需要使用 value 属性指定提交的值。
代码演示：
扫一扫
1465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
