一、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 属性指定提交的值。
代码演示: