Hyper Text Markup Language 超文本标记语言

最新推荐文章于 2023-05-07 19:40:01 发布

DUCKRUN～

最新推荐文章于 2023-05-07 19:40:01 发布

阅读量503

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_46416772/article/details/125326799

版权

本文详细介绍了HTML的基础语法，包括链接、图像、表格、列表、块级和行内元素、布局、字符实体、URL、表单以及图形和媒体的使用。重点讲解了表单元素的各种类型及其属性，如输入框、单选按钮、复选框、文本域等，并探讨了表单数据的提交方式。此外，还涵盖了canvas和svg在图形绘制中的应用以及音频和视频的插入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5. 块级元素div & 行内元素span & 内联框架iframe & 框架frame

1. 链接

<a href="",target="">

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

2. 图像

<img src="url" alt="无法加载时信息显示" />

3. 表格

<table border="1" cellpadding="单元格边距" cellspacing="单元格间距">

<caption>标题</caption>

<tr>

<th colspan="跨列number" rowspan="跨行number">表头</th>

</tr>

<tr>行</tr>

<tr>

<td>列</td>

</tr>

</table>

4. 列表

（1）无序

<ul type="disc circle square">

<li></li>

</ul>

（2）有序

<ol type="A a I i">

<li></li>

<ol>

（3）定义列表

<dl>

<dt>项目</dt>

<dd>描述</dd>

</dl>

5. 块级元素div & 行内元素span & 内联框架iframe & 框架frame

<!DOCTYPE html>
<html>

<head>
    <meta>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style></style>
</head>

<body>
    <div></div>
    <span></span>
    <iframe src=""></iframe>

    <frameset cols="%,%" rows="%,%">
        <frame></frame>
    </frameset>
</body>

<script>
</script>
</html>

6. 布局

7. 字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
¥	元（yen）	¥	¥
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™

8. URL

协议scheme://域主机host.域名domain:端口号port/路径path/filename

http 超文本传输协议普通网页，不加密。
https 安全超文本传输协议安全网页，加密所有信息交换。
ftp 文件传输协议用于将文件下载或上传至网站。
file 个人计算机上的文件。

9. 表单

    <!-- action：提交表单时执行的动作
         GET：表单数据在页面地址栏中可见
         POST：表单数据在页面地址栏中不可见
     -->
    <form action="url" method="GET POST" target="_blank">
        <!-- 输入框 -->
        <input type="text" name="文本框" value="默认值" placeholder="默认显示内容">
        <input type="password" name="隐藏密码">
        <!-- 单选按钮 -->
        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="female">女
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 下拉列表 -->
        <select name="" id="">
            <option value="data" selected>data</option>
        </select>
        <!-- 复选框 -->
        <input type="checkbox" name="hobby" value="basketball">篮球
        <input type="checkbox" name="hobby" value="football">足球
        <!-- 文本域 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- 按钮 -->
        <button></button>
        <!-- 预定义选项列表 -->
        <datalist>
            <option value="data"></option>
        </datalist>
        <!-- 数字 -->
        <input type="number">
        <!-- 日期 -->
        <input type="date">
        <!-- 颜色 -->
        <input type="color">
        <!-- 滑块控件 -->
        <input type="range">
        <!-- 月份和年份 -->
        <input type="month">
        <!-- 周和年份 -->
        <input type="week">
        <!-- 时间 -->
        <input type="time">
        <!-- 邮件 -->
        <input type="email">
        <!-- 搜索 -->
        <input type="search">
    </form>

输入限制

disabled	规定输入字段应该被禁用。
max=“”	规定输入字段的最大值。
maxlength=“”	规定输入字段的最大字符数。
min=“”	规定输入字段的最小值。
pattern=“”	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size=“”	规定输入字段的宽度（以字符计）。
step=“”	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

10. 图形

（1）canvas画布：通过JavaScript绘制2D图形

（2）svg可伸缩矢量图形：使用 XML 描述 2D 图形的语言

11. 媒体

（1）视频格式：.avi .mp4 .wmv

（2）声音格式：.mp3 .wav

（3）插件：<object data=""></object> <embed src="">

（4）音频：<audio controls> <source src=""/> </audio>

（5）视频：<video controls> <source src=""/> </video>

_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

http	超文本传输协议	普通网页，不加密。
https	安全超文本传输协议	安全网页，加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		个人计算机上的文件。