Blogger Information
Blog 16
fans 0
comment 0
visits 13950
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端入门基础列表/表格与表单标签
wen。
Original
732 people have browsed it

HTML基础入门标签

*HTML是一个超文本标签语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言
HTML运行在浏览器中,并且由浏览器中解析,使得我们是不会看到代码的源码标签

HTML列表

HTML的标列表签由无序和有序组成

无序列表,由<ul>标签定义,实例如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <mate charest="utf-8" />
  5. <meta name="keywords" content="" />
  6. <title>HTML标签</title>
  7. </head>
  8. <body>
  9. <ul>
  10. <li>列表一</li>
  11. <li>列表二</li>
  12. <li>列表三</li>
  13. </ul>
  14. </body>
  15. </html>

有序列表,由<ol>标签定义,实例如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <mate charest="utf-8" />
  5. <meta name="keywords" content="" />
  6. <title>HTML标签</title>
  7. </head>
  8. <body>
  9. <ol>
  10. <li>列表一</li>
  11. <li>列表二</li>
  12. <li>列表三</li>
  13. </ol>
  14. </body>
  15. </html>

自定义标签

自定义标签由<dl><dt>组成,实例如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <mate charest="utf-8" />
  5. <meta name="keywords" content="" />
  6. <title>HTML标签</title>
  7. </head>
  8. <body>
  9. <dl>
  10. <dt>列表的标题</dt>
  11. <dd>列表的描述</dd>
  12. </dl>
  13. </body>
  14. </html>

表单Form

表单在实际开发中是非常常用的,是收集用户填写的信息并将其提交给服务器

form表单有两个属性,action是表单提交地址,而method则是表单提交的方式

method提交方式有两种,getpost,两者的区别在于

提交的内容的长度:
(1)get不能超过2KB
(2)post无限制;

安全性:
(1)get将内容拼接到字符串后面,不够安全
(2)post是隐形的,所以我们基本比较重要的数据都是用post提交的

表单作业

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <mate charest="utf-8" />
  5. <meta name="keywords" content="" />
  6. <title>表单作业</title>
  7. </head>
  8. <body>
  9. <h3>用户注册</h3>
  10. <form action="" method="get">
  11. <label for="username">用户名</label>
  12. <input type="text" id="username" name="username" value="admin">
  13. <label for="email">邮箱</label>
  14. <input type="text" id="email" name="email" value="923617189@qq.com">
  15. <label for="password">密码</label>
  16. <input type="password" id="password" name="password" value="123456">
  17. <label for="">性别:</label>
  18. <input type="radio" name="gender" value="male" id="male" /><label for="male"></label>
  19. <input type="radio" name="gender" value="female" id="female" /><label for="female"></label>
  20. <input type="radio" name="gender" value="secret" id="secret" checked="" /><label for="secret">保密</label>
  21. <label for="">兴趣:</label>
  22. <input type="checkbox" name="hobby" value="game" id="game" /><label for="male">游戏</label>
  23. <input type="checkbox" name="hobby" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  24. <button type="sumbit">提交</button>
  25. </form>
  26. </body>
  27. </html>

后续

今天的课程知识点就在这,后续复习用iframe写一个简单的小后台; 理解css优先级,并实例图示演示元素样式的四个来源会在后面作业中深入探究

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post