HTML超文本标记语言

水手dsj

已于 2022-07-05 16:08:30 修改

阅读量363

点赞数 1

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

于 2022-07-05 14:46:50 首次发布

本文链接：https://blog.csdn.net/rotedsj/article/details/125619632

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html超文本标记语言，用来描述网页的一种语言。一个HTML文件有开始和结束标签，代码不区分大小写。

HTML文件包含两部分<head>和<body>。

<head>：用来设置头信息。

<body>：用来设置在页面上显示的内容。

一、Head标签：

<!DOCTYPE html>   <!-- HTML5版本-->
<html lang="zh-CN">  <!-- 文档语言 -->
<head>
    <title>网页标题</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Refresh" content="0;url=http://www.com"><!-- 多少秒刷新-->
    <meta http-equiv="Expires" content="">
    <meta http-equiv="Pragma" content="no-cache"><!-- 禁用缓存 -->
    <link rel="shorcut icon" href="xxx.ico"><!-- 网站小图标 -->
    <link rel="stylesheet" href="css/base.css">
</head>

二、Body标签：

1、表单

<form action="表单提交地址" method="get" name="表单名称" id="">
    <fieldset>
        <legend>表单分类说明</legend>
        <!--  点击标签内的文本时，浏览器会自动将焦点转到对应表单元素上-->
        <label for="username">用户名</label>
        <!-- 文本框 -->
        <input type="text" name="文本框名称" id="username" size="文本框宽度" maxlength="最多字符" value="初始值">
        <input type="text" list="address">
        <!-- 定义选项列表与input元素配合使用 -->
        <datalist id="address">
            <option value="江苏扬州">江苏扬州</option>
            <option value="江苏泰州">江苏泰州</option>
        </datalist>
        <!-- 密码框 -->
        <input type="password" name="文本框名称">
        <!-- 隐藏框 -->
        <input type="hidden" name="文本框名称">
        <!-- 复选框 -->
        <input type="checkbox" name="复选文本框名称" value="值">复选内容1
        <input type="checkbox" name="复选框名称必须一致" value="值">复选内容2
        <input type="checkbox" name="复选框名称必须一致" value="值">复选内容3
        <!-- 单选框 -->
        <input type="radio" name="单选文本框名称" value="值" checked="checked">单选内容1
        <input type="radio" name="单选文本框名称" value="值">单选内容2
        <!--下拉选择-->
        <select name="" size="">
            <option value="" selected>下拉列表内容1</option>
            <option value="">下拉列表内容2</option>
        </select>
        <!-- 文本域，禁止拖拽文本域：textarea{resize:none;} -->
        <textarea name="" id="" cols="列" rows="行" wrap="是否换行"></textarea>
        <!-- 提交按钮 -->
        <input type="submit" name="按钮名称" value="按钮文字">
        <!-- 重置按钮 -->
        <input type="reset" name="按钮名称" value="按钮文字">
        <!-- 普通按钮 -->
        <input type="button" name="按钮名称" value="按钮文字">
        <!-- 图片按钮 -->
        <input type="image" src="图片路径" alt="">
    </fieldset>
</form>

HTML5为input、textarea等标签增加了spellcheck属性，为true时，浏览器会对用户输入的文本内容执行输入检查，为表单新增form属性，用于定义该表单控件所属的表单，该属性值应为属表单的表单ID。

autofocus：自动获取焦点，当浏览器打开时，该组件自动获取焦点。

placeholder：文本域提示信息。

required：值为required，不能为空，为必填项。

autocomplete：是否显示之前输入过的值。

 <input type="text" name="username" autofocus="autofocus" required="required" autocomplete="true" placeholder="请输入用户名">

2、图像标签

<img src="图片路径" alt="提示内容" width="图像宽度" height="图像高度" border="边框宽度" title="图片提示符">

3、超链接

<a href="链接地址" target="目标打开方式"></a>

4、列表标签

（1）无序列表

<ul type="指定列表项目符号类型">
    <li>无序列表元素1</li>
    <li>无序列表元素2</li>
    <li>无序列表元素3</li>
</ul>
<!--disc：实心圆，circle：空心圆,square：实心方块-->

（2）有序列表

<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
</ol>

（3）自定义列表

<dl>
    <dt>定义标题列表项</dt>
    <dd>定义普通列表</dd>
</dl>

5、表格标签

<table border="边框宽度" bgcolor="背景颜色" align="表格对齐方式" cellpadding="" cellspacing="">
    <tr>
        <td>第1行第1单元格</td>
        <td>第1行第2单元格</td>
        <td>第1行第3单元格</td>
    </tr>
        <tr>
        <td>第2行第1单元格</td>
        <td>第2行第2单元格</td>
        <td>第2行第3单元格</td>
    </tr>
</table>
<!--
cellpadding：单元格与内容之间距离默认1像素。
cellspacing：单元格之间距离默认2像素。
rowspan：跨行显示。
colspan：跨列显示。
th：表头，会加粗，居中显示。
thead：表格的头部区域。
tbody：表格的主体区域。
-->

6、音频

<audio src="文件路径" controls="controls"></audio>
<!--
autoplay：值autoplay，是否自动播放。
controls：值controls，是否显示播放控件。
loop：值为loop，自动播放
muted：值为muted，表示静音。
-->

7、视频

<video src="文件路径" controls="controls"></video>
<!--
poster：加载等待的图片。
-->

三、常用标签

<div>：层元素，用来将页面内容分割成多个独立的部分，在默认情况下，<div>元素所包含的内容将在一行显示。

<span>：行元素，一行可以显示多个span。

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>：标题元素。

<p>：段落元素，用来定义一个段落，段落与段落之间有大的空隙。

<br/>：换行。

<blockquote>：缩进。

<pre>：保留格式。

<nobr>：取消换行元素。

<strong>：加粗。

<big>：放大元素。

<small>：缩小元素。

<del>：删除线。

<ins>：下划线。

<em>：斜体显示。

<sub>：下标元素。

<sup>：上标元素。

四、H5新增语义化标签

<header>：头部标签。

<nav>：导航标签。

<article>：内容。

<section>：定义某个文档区域。

<aside>：侧边栏。

<footer>：尾部。

水手dsj

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML超文本标记语言

Html超文本标记语言，用来描述网页的一种语言。一个HTML文件有开始和结束标签，代码不区分大小写。
复制链接

扫一扫

专栏目录