HTML标签全解

最新推荐文章于 2024-08-15 18:19:19 发布

小唐同学爱学习

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量653

点赞数 7

分类专栏： Java 文章标签：前端 html html5

本文链接：https://blog.csdn.net/m0_61469860/article/details/127296946

版权

Java 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

作者简介：大家好我是小唐同学(๑>؂<๑），为梦想而努力的小唐，让我们一起加油！！！

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

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

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>