html教程【简单好上手】

码字不易 感谢关注__

 哈喽各位,本期给大家做一期html的入门教程!


那么先让我们看看什么是html吧!百度百科是这样介绍的


HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 


什么意思呢? 简单粗暴的理解就是:让浏览器知道你在说什么!


那么html有哪些内容呢?


一、基本标签:

注:标签中的各个属性是用 空格 隔开!

1、标题标签:

给网页中的正文设置标题,同时可选择标签大小。

用法说明:

一级标题h1,二级标题则h2,后者同理。

例如:一级标签:


  格式: 

标题名字

2、段落标签:

给网页中的内容分段,但是不具有空格和换行功能。

用法说明:

段落标签用字符p表示

例如:

  格式: 

段落内容


3、换行标签:

给网页中内容进行换行,不具有分段和空格功能,且与段落标签相比,内容较显的紧凑。

用法说明:

换行标签用br表示,并且是单标签

  格式: 选择换行内容
(自闭合、建议使用) 或者 选择换行内容

4、水平线标签:

给网页中内容进行水平线分隔开。

用法说明:

水平线标签用Hr表示,也是单标签

  格式: 选择换行内容
(自闭合、建议使用) 或者 选择换行内容

5、字体样式标签:

设置字体样式,如粗体、斜体。

用法说明:

粗体:strong
斜体:em

  格式:  内容 
          内容 

6、注释和特殊符号:

网页中所表示实际上的中、英或者数字等注释和符号。

  格式: 空格:内容1   内容2  大于号:内容1 > 内容2 
        小于号:内容1 < 内容2   版权符号:© 内容



二、网页插入:

1、图像:

在网页中插入图片。

   格式  text
         其中 src: 图像地址 alt: 图像的替代文字(当图片不存在或者找不到时,就会用alt中内容来表示这个图片)
         title: 悬停在图片上的文字 width和height:设置图片大小

2、超链接

在网页中加入超链接,可以实现跳转功能。

锚链接:

1、需要一个锚标记
锚标记可以在本页面标记,在其他页面实现跳转; 也可以在其他页面标记,在本页面跳到标记的那个页面。
2、知道要跳转的页面的网页链接

  格式: 锚标记: 	 有的版本用的是这个:  
        锚链接: 回到锚标记对应的内容中

功能性链接:

如邮件链接:mailto

  格式: 邮件链接:  点击跳转 	


3、列表:

用来列举各种可能的事件或者种类等等。

有序列表:ol

无序列表:ul

自定义列表:dl

    ` 
  1. 内容
  • 内容
内容
`

4、表格:

用表格来显示各个事物的各种属性,简单明了。
使用:
表格:table
行:tr
列:td
跨行:rowspan
跨列:colspan


  ` 内容  
内容
`

多行多列则在表格里多写几个tr、td。具体事例如下代码:

点击查看代码

 
  

三、表单:

1、提交表单的形式:常用get/post (get方式提交,可以在url中看到用户提交的信息,不安全,但是这种方式高效;post相对较安全,但是要想信息不被泄露仍需后期加密)

  格式: 
表单内容

2、输入框:

输入框:input

比如输入框、密码框等等都用input标签 ,标签中的“type”的值决定了是输入框还是其他标签元素等等。并且尽量用“name”命名元素

type:

text(文本框),password(密码框),checkbox(多选框),radio(单选框),submit(提交),reset (重置),file(上传文件),hidden(隐藏区域),image(图片,点击该图片也可以提交表单),button(按钮)等

value:

表单组件的初始值。当type为radio或者checkbox时,必须指定一个值。

size:

指定表单组件的初始宽度。当type为text或password时,表单元素的大小以字符为单位。而其他组件类型,宽度以像素为单位。

maxlength:

type为text或password时,输入的最大字符数

checked:

type为radio或者checkbox时,表示指定按钮已被选中,不可更改。

注:同一类型的单选框,name名称必须一样,不一样则不为单选。

    格式:     文本框:  密码框:input type="password" name="名字" >
               多选框:  单选框:
               提交:  重置
               上传文件:  隐藏区域:
               图片:  按钮:

3、下拉框:

下拉框:select

   格式     

4、搜索框:

在网页中添加搜索,可快速找到网页中某个内容。

   格式: 

5、滑块:

类似音量调节的滑块,可用来调节大小。

   格式:   (滑块对应的值要在表单提交后的网页的网址上看到)

6、文件域:

上传文件:file

   格式: 

7、文本域:

多行文本:textarea

   格式: 

表单的提交和重置:

提交:submit
重置:reset

  格式  提交: 
  或者以图片形式提交:
        重置:

四、表单初级验证:

判断用户输入是否合理或者满足条件,验证失败时,给出提示信息。

1、邮箱验证:

  格式: 

2、URL验证:

  格式:  

3、数字验证:

  格式:  (可在此标签中加入max,min,step来设置数字范围以及步长大小)

4、表单验证之提示:

默认提示信息:placeholder(即在文本框中默认显示的信息)可用在所有输入框中,在单选、多选、下拉框中无意义。
必填选项:required (设置该项必填)
正则表达式:pattern (需要的可以在网上搜索)

五、表单其他功能:

隐藏某区域:hidden
设置只读模式:readonly
禁用模式:disabled
注:可在标签属性后添加这几个功能。如隐藏一个文本框:

  格式:  (表示该文本框已经隐藏)

鼠标定位:实现点击文字就能将鼠标定位到对应的框中。

   格式:  
           

表单相关代码:
`


用户名:

密码:

男: 女:

中国: 美国: 韩国: 印度:

搜素框:

滑块:

文件域:

邮箱验证:

URL验证:

数字验证:

此处文本框被隐藏:

只读模式:

禁用模式:

提示用户信息:

此处必填:

鼠标定位:

提交: 图片提交:

重置:

 最后:

当你看到这里的时候相信已经有所了解html了,如果我的教程有帮助到你欢迎订阅 加关注!也欢迎您在评论区指出我的不足!

你可能感兴趣的:(html,html,前端,css)