整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「HTML4」HTML入门

  1. 标签:又称元素,是HTML的基本组成单位双标签(绝大多数都是双标签):<标签名>标签体</标签名>第一个标签叫起始标签,第二个标签叫结束标签例:<marquee>尚硅谷,让天下没有难学的技术!</marquee>单标签:<标签名/>/可以省略例:<input>
  2. 标签名不区分大小写,但推荐小写,因为小写更规范
  3. 标签之间的关系:并列关系、嵌套关系,可以使用 tab 键进行缩进
  4. 1
    2
    3
    4
    5
    <marquee>
    尚硅谷,让天下没有难学的技术!
    <input>
    </marquee>
    <input>

标签属性

  1. 用于给标签提供附加信息
  2. 可以写在起始标签或单标签中,形式如下:<标签名 属性名="属性值" 属性名="属性值">
  3. 1
    2
    <marquee loop="1" bgcolor="orange">尚硅谷,让天下没有难学的技术!</marquee>
    <input type="password">
  4. 有些特殊的属性,没有属性名,只有属性值,如:<input disabled>

不同的标签,有不同的属性;也有一些通用属性(在任何标签内都能写)属性名、属性值不能乱写,都是W3C规定好的属性名、属性值,都不区分大小写,但推荐小写双引号,也可以写成单引号,甚至不写,但推荐写双引号标签中不要出现同名属性,否则后写的会失效,例如:<input type="text" type="password">

基本结构

  1. 想要呈现在网页中的内容写在body标签中
  2. head标签中的内容不会出现在网页中
  3. head标签中的title标签可以指定网页的标题
  4. 1
    2
    3
    4
    5
    6
    7
    8
    <html>
    <head>
    <title>网页标题</title>
    </head>
    <body>
    ......
    </body>
    </html>

注释

  1. 特点:注释的内容会被浏览器所忽略,不会呈现到页面中,但源代码中依然可见
  2. 作用:对代码进行解释和说明
  3. 写法
  4. 1
    2
    3
    4
    <!-- 下面的文字只能滚动一次 -->
    <marquee loop="1">尚硅谷</marquee>
    <!-- 下面的文字可以无限滚动 -->
    <marquee>尚硅谷123</marquee>
  5. 注释不可以嵌套

文档声明

  1. 作用:告诉浏览器当前网页的版本
  2. 写法
    1. 旧写法:要依网页所用的HTML版本而定,写法有很多参考:W3C QA - 可在 Web 文档中使用的 Doctype 声明的推荐列表
    2. 新写法:W3C 推荐使用 HTML 5 的写法
    3. 1
      2
      3
      4
      5
      <!DOCTYPE html>

      <!DOCTYPE HTML>

      <!doctype html>
  3. 文档声明必须在网页的第一行,且在html标签的外侧

字符编码

  1. 计算机对数据的操作存储时,对数据进行:编码读取时,对数据进行:解码
  2. 编码、解码,会遵循一定的规范 —— 字符集
  3. 常见的字符集ASCII:大写字母、小写字母、数字、一些符号,共计128个ISO 8859-1:在 ASCII 基础上,扩充了一些希腊字符等,共计是256个GB2312:继续扩充,收录了 6763 个常用汉字、682个字符GBK:收录了的汉字和符号达到 20000+ ,支持繁体中文UTF-8 :包含世界上所有文字与符号
  4. 为了让浏览器在渲染html文件时,不犯错误,可以通过meta标签配合charset属性指定字符编码
  5. 1
    2
    3
    <head>
    <meta charset="UTF-8"/>
    </head>

设置语言

  1. 主要作用让浏览器显示对应的翻译提示有利于搜索引擎优化
  2. 具体写法:<html lang="zh-CN">
  3. lang属性的编写规则语言-国家/地区zh-CN :中文-中国大陆(简体中文)zh-TW :中文-中国台湾(繁体中文)zh :中文en-US :英语-美国en-GB :英语-英国语言—具体种类(已不推荐使用)zh-Hans :中文—简体zh-Hant :中文—繁体W3School 上的说明:《语言代码参考手册》 、《国家/地区代码参考手册》 W3C官网上的说明:《Language tags in HTML》

标准结构

  1. HTML标准结构如下
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="zh-CN">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>

    <body>

    </body>

    </html>

VSCode 删除行快捷键:Ctrl+Shift+K

  1. 输入!,随后回车即可快速生成标准结构
  2. 配置VScode 的内置插件 emmet ,可以对生成结构的属性进行定制
  3. 在存放代码的文件夹中,存放一个 favicon.ico 图片,可配置网站图标

级版HTML视频教程(全网原创首发!)

什么是HTML?HTML指的是超文本标记语言,它是从事网页设计工作的基础,也是网站开发者必须熟练掌握的一门标记语言。应广大学员的强烈要求,我爱自学网特推出《HTML基础教程》,希望能得到广大学员的支持。



学习交流

标 题

第一课:HTML语言框架和相关标签95 1-1 学习html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML语言的整体框架135783 1-4 HTML语言的整体框架231727 1-5 行标签和段标签29866 1-6 文字属性标签28853 1-7 文字格式化标签26888 1-8 body标签27570 1-9 标题标签25212

第二课:常用标签代码0 2-1 图片37992 2-2 超链接127213 2-3 超链接223253 2-4 iframe标签25784 2-5 横线22900 2-6 列表22740 2-7 无序列表20544 2-8 有序列表21073 2-9 滚动标签23217 2-10 转义字符22227

第三课:表格标签83 3-1 表格31370 3-2 表格属性123819 3-3 表格属性223066

您说说看 我发明的...是不是很牛逼呀[滑稽]

总 高级版学习资料文件高达10G!!!

总 高级版学习高清视频资料的高达35G!!!

需要的话我后期会更新,所以关注我,学到的好东西都是你自己的哦[滑稽]

那么大概内容就更新到这里

本教程后期会逐一更新高清视频学习资料+超详细的学习资料教程!

别忘了四连!!【点赞 收藏 关注 投币】

我怕你到时候想找我都找不到了~[鲜花]

注:本人原创首发,未经允许禁止转载/抄袭,如有违法,本人将有权追究法律责任!!!

单的工作过程

表单的信息发送与处理过程可以简单的进行图示,如下图。

以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。

这时浏览器会将这些信息发送给处理这些信息的服务器,服务器上有使用类似asp或php写成的相应的处理程序,处理完成后,生成一个反馈信息,也就是2到3的过程。

然后服务器将处理后的信息发送给个人电脑,个人电脑在浏览器上通过一个新页面来提示用户处理结果。

这里就涉及到一个问题,一个网站会有针对不同用户的信息注册表单以及相应的信息处理程序,比如我们注册头条号就有"个人"、"企业"、"媒体"和"国家机构"的区分。如何使不同的表单找到相应的处理程序呢?在<form>标签中,有一个action属性就是为这个表单信息指定处理程序的。

<form>中的action属性

调用程序

<form>的action属性实际上就是为表单提示处理程序所在的路径,如果程序和页面在一个服务器中存储,那使用相对路径即可,如果在其他服务器,则要使用绝对路径。示例代码如下:

<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p> 
<p>Last name: <input type="text" name="lname" /></p> 
<input type="submit" value="Submit" />
</form>

这段代码中的"form_action.asp"程序和这个表单页面在一个文件夹中,故直接写名称即可调用。

发送邮件

action属性除了调用程序外,也可以发送邮件,示例代码如下:

<form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
姓名:<br />
<input type="text" name="name" value="yourname" size="20"><br />
电邮:<br /><input type="text" name="mail" value="yourmail" size="20"><br />
内容:<br /><input type="text" name="comment" value="yourcomment" size="40"><br /><br />
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

这段代码中。发送邮件的写法是这样的:action="MAILTO:someone@w3school.com.cn",通过MAILTO:告诉浏览器,这里要发送邮件!然后输入相应的邮箱地址,这样就会把表单中的信息以邮件的形式发送到相应的邮箱中了。

大家可以把邮箱地址改成自己的邮箱试一下,浏览器会让大家选择发送邮件的程序。如图所示:

使用这个功能我们可以写一个简单的邮件发送页面,示例代码如下:

<form action="mailto:yourname@domain.com" method="post" enctype="text/plain">
主题:<input name="subject" type="text"><br>
抄送:<input name="cc" type="text"><br>
密送:<input name="bcc" type="text"><br>
正文:<textarea name="body"></textarea><br>
<input type="submit">
</form>

这样的写法大家可能会发现问题,即如果一个网站注册用户超过100人以后,靠这种手动输入用户邮箱的方法发送邮件简直就是折磨人啊!

实际上,在网站中,我们会把会员或注册用户的邮箱存在数据库中,通过调用数据库中的用户邮箱的程序语句来替换action中的具体邮箱地址即可,再通过程序,可以针对全部用户或部分用户进行群发信息。

其中,enctype属性是向服务器声明上传信息的形式,也就是向服务器说明发送的数据到底是数字还是英文还是中文还是编程语句。专业一些的说法是"规定在发送表单数据之前如何对其进行编码。"

全部属性值有三个,如图所示,大家可以简要理解一下。

除此之外,我们还发现一个属性叫做method(方法),通过上面的示例代码可知,method属性有两个属性值,一个是get一个是post,这是什么意思呢?

信息上传的两种方法

<form>中的method标签即为表单信息指定相应的发送方法。

方法有两种,一种叫get,这种方法通常用来发送简短的且低安全要求的信息,特点是速度比较快。

post经常用来发送体积较大的信息,如果发送一些对安全性要求高的信息,html的官方说明中建议使用post方法。

我个人认为,现阶段大家能记住这两个方法的主要特点即可。这一篇的内容实际上也是前端学习者对服务器端的运行的了解内容。

下面为大家附上更为专业的讲解,看不懂也没关系,尽量读,至少能被专业词汇洗礼一下!

method 属性

浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法。

如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method (方法)属性中指明表单处理服务器要用方法来处理数据,使 POST 还是 GET。

POST 还是 GET?

如果表单处理服务器既支持 POST 方法又支持 GET 方法,那么你该选择哪种方法呢?下面是有关这方面的一些规律:

如果希望获得最佳表单传输性能,可以采用 GET 方法发送只有少数简短字段的小表单。

一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时,会限制其数目和长度,在这种情况下,对那些有许多字段或是很长的文本域的表单来说,就应该采用 POST 方法来发送。

如果你在编写服务器端的表单处理应用程序方面经验不足,应该选择 GET 方法。如果采用 POST 方法,就要在读取和解码方法做些额外的工作,也许这并不很难,但是也许你不太愿意去处理这些问题。

如果安全性是个问题,那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中,这样网络窥探者可以很轻松地捕获它们,还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息,就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞,在将参数作为单独的事务传输给服务器进行处理时,至少还可以采用加密的方法。

如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程,就要采用 GET 方法,因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面,使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程,其中传输的内容不能作为传统 <a> 标签的内容。

以上内容来自W3school

今天的内容结束了,这一篇内容实践的东西比较少,主要是阅读与了解。

至此,HTML表单部分的讲解就算告于段落了,如果您有任何疑问请给我留言,如有问题或错误请予以斧正!

如果您喜欢我的教程请关注我,点赞也能让我充满动力!

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作