首页 前端知识 HTML简单入门教程

HTML简单入门教程

2024-10-29 23:10:16 前端知识 前端哥 235 532 我要收藏

一、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 属性指定提交的值。

代码演示:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19532.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!