HTML标签全解

 作者简介:大家好我是小唐同学(๑>؂<๑),为梦想而努力的小唐,让我们一起加油!!!

编辑

个人主页:小唐同学(๑>؂<๑)的博客主页

初学者,不喜互喷,有错请指正

目录

HTML解释:

简易标签介绍:

列表标签:

表格标签:

布局标签:

表单标签:(登录窗口)

代码实现:


HTML解释:

HTML:超文本标记语言

HTML运行在浏览器上,标签由浏览器解析

网页有三部分组成:

结构:HTML

表现:CSS

行为:JavaScript

简易标签介绍:

<HTML>标签定义HTML文档

<head>标签定义文档信息

<title>定义文档标题

<body>定义文档主题

<font>定义属性(文本内容的字体,尺寸,颜色)

<font face="楷体"size="5"color="#ffc0cb">大哥666</font>

<h1>定义标签1-6(1最大,6最小)

<b>加粗

<i>斜体

<u>下划线

<hr>定义水平线

<br>定义换行

<p>定义段落

<center>定义文本居中

<img>定义图片

src:规定显示图像的URL(统一资源定位符--路径(可绝对路径,相对路径))

height:图片高度(单位:1.像素px 2.百分比)

width:定义图像宽度(单位:1.像素px  2.百分比)

<audio>定义音频

src:规定音频的URL

controls:显示播放控件

<video>定义视频

src:规定视频的URL

controls:显示播放控件

<a>:超链接标签--定义超链接,用于连接到另一个资源

href:指定访问资源的URL

target:指定打开资源的方式

       _self:默认值,在当前页面打开

        _blank:在空白页面打开

列表标签:

<ol>定义有序列表

<ul>定义无须列表

<li>定义列表项

type属性是修改标识符(1.-2.-3.)

      有序标签(order list):

           

<ol> <li>咖啡</li> <li></li> </ol>

无序列表(unorder list):

<ul> <li>咖啡</li> <li></li> </ul>

表格标签:

    table:定义表格

             border:规定表格边框的宽度

             width:规定表格宽度

             cellspacing:规定单元格之间的空白 

     tr:定义行

align:定义表格行的内容对齐方式(left左对齐,right右对齐,center居中)

     td:定义单元格

rowspan:规定单元格可横跨的行数

colspan:规定单元格可横跨的列数

<th>表头单元格(可加粗)

布局标签:

<div>:定义HTML文档中的区域部分,经常与CSS一起使用,用来布局网页(沾满一行)

<span>用于组合行内元素

表单标签:(登录窗口)

表单:在网页中主要负责数据的采集功能,使用<form>标签定义表单

表单项(元素):不同类型的input元素,下拉列表,文本域等

<form>:定义表单,是一个整体

        属性:

                action:规定当提交表单时向何处发送表单数据,URL(统一资源定位符--路径(可绝对路径,相对路径))(默认“#”--提交网页,后期可以提交服务器)

                method:规定用于发送表单数据的方式

                        1.get:浏览器会将数据直接附在表单的action URL之后,大小有限制(4KB)

                        2.post:浏览器会将数据放到http请求消息体中,大小无限制(会隐藏起来)

<input>:定义表单项,通过type属性控制输入形式

       type取值:

                text  :默认值,定义单行的输入字段

                password:定义密码字段

                radio:定义单选按钮

                checkbox:定义复选框(多选)

                file:定义文件上传按钮

                hidden:定义隐藏的输入字段(不会在页面显示,在开发者页面可显示)

                submit:定义提交按钮,提交按钮会把表单数据发送到服务器

                reset:定义重置按钮,重置按钮会清除表单中的所有数据

                button:定义可点击按钮(结合js产生效果)

<select>:定义下拉列表,<option>定义列表项

<textarea>:文本域(在表单中让你填意见改进)

代码实现:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" method="post"> 用户名:<input type ="text" name ="username"><br> 密码:<input type="password" name="userpassword"><br> <!--name 用于提交数据--> <br> <!--扩大按钮点击区域--> <label for="username">用户名:</label> <br> <input type ="text" name ="username" id="username"> <br> <input type="submit" value="免费注册"> <!-- value 给按钮设置文本显示内容--> <!-- 单选框--> <br> <input type="radio" name="gender"><input type="radio" name="gender"><br> <!-- 多选框--> 爱好: <input type="checkbox" name="hobby"value="1">旅游 <input type="checkbox"name="hobby"value="2">电影 <input type="checkbox"name="hobby"value="3">游戏 <!-- 文件--> <br> 头像: <input type="file"> <br> <!--下拉列表--> 城市: <select name="city"><!--name是指定属性,必须指定属性才能提交--> <option>上海</option> <option>北京</option> </select> <br> 意见 : <textarea></textarea> </form> </body> </html>


全部评论

相关推荐

不愿透露姓名的神秘牛友
07-15 17:09
点赞 评论 收藏
分享
06-26 15:33
青岛工学院 Java
积极的秋田犬要冲国企:他现在邀请我明天面试
点赞 评论 收藏
分享
05-29 22:11
门头沟学院 Java
Elastic90:抛开学历造假不谈,这公司的招聘需求也挺怪的,Java开发还要求你有图文识别、移动端开发和c++的经验,有点逆天了。
点赞 评论 收藏
分享
评论
1
2
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务