前端之常用HTML

最新推荐文章于 2024-07-13 09:19:02 发布

Violet永存

最新推荐文章于 2024-07-13 09:19:02 发布

阅读量643

点赞数 26

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

本文链接：https://blog.csdn.net/AWSDN/article/details/136112174

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括结构元素如、、和，以及常用的标签如水平线、标题、段落、超链接、图片、音频、视频、列表、表格、表单控件等。作者强调了实践的重要性，并提到了CSS和JS在Web开发中的重要性。

摘要由CSDN通过智能技术生成

一、前言

本文主要介绍基础的HTML知识以及常用的HTML标签

二、内容

1、HTML骨架元素

<!DOCTYPE html> <!-- 声明代码类型 -->
<html>
    <!-- 配置页面信息 -->
    <head>
        <!-- 配置html编码 -->
        <!-- 用notepad编写时先调整编码(一般UTF-8)-->
        <meta charest="utf-8">
        <!-- 配置html标题 -->
        <title>页面标题</title>
    </head>
    <!-- 配置页面主体 -->
    <body>
    </body>
</html>

这些就是基本的HTML框架，可以理解为语文作文里的格式，这些是写HTML文件必需的，head部分主要是对HTML进行配置，body部分则是要写的HTML的主要内容。

2、基本元素

（1）水平分割线

<hr>

（2）换行

<br>

换行时不带空隙

（3）标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

h1最大,h6最小

形成独立空间

（4）普通标签

<span>普通标签</span>

只形成独立空间，不受其他元素影响，不自动换行

（5）div标签

<div>div标签</div>

形成独立空间，自动换行，换行时带空隙，开头自带空格

（6）段落标签

<p>段落</p>

自动换行，换行时带空隙

（7）超链接（a)标签

跳转网址

<a href="http://101.42.16.64/" target="blank">打开新页面至href代表页面</a>

href="跳转网址" 设置资源路径
target="_self" 在原网页处打开超链接
target="_blank" 在新网页处打开超链接
target="_parent" 在上一级处打开超链接
target="_top" 在最上层处打开超链接

跳转锚点

<a name="aa">锚点（可写可不写）</a> <!-- 定义锚点名称与位置 -->
<a href="#aa">跳转到锚点aa所在位置</a>
<a href="#aa" style="position:fixed;color:red;right:50px;bottom:30px">
跳转到锚点aa所在位置
</a>

style属性调整锚点格式与位置

（8）窗口标签

<a href="" target="aaa">用户</a>
<a href="" target="aaa">资源</a>
<a href="" target="aaa">下载</a>
<iframe src="http://101.42.16.64/" width="300px" height="500px" frameborder="0"
name="aaa"></iframe>

width="300px" height="100px"或者style="width:300px;height:100px"（改变窗口大小） frameborder="0"代表边框粗细，0代表无
name代表窗口名称
target="aaa"在窗口aaa打开href指定网页

（9）图片标签

src="资源路径"
alt="图片标题" （文件无法正常显示时显示标题）
width="300px" height="100px"改变图片大小，一般只用一个，不改变原有比例

<img src="20230113.jpg" alt="图片标题" width="300px" height="100px">

（10）音频标签

controls代表手动播放

<audio src="C:\Users\HJT\Desktop\demo\20230113.mp3" controls></audio>

（11）视频标签

controls代表手动播放；autoplay代表自动播放；loop代表循环播放
width="300px" height="100px"或者style="width:300px;height:100px"（改变视频框大小）

<video src="" autoplay loop></video>

（12）列表标签

无序列表

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

有序列表

<ol type="A">
    <li value="3">1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ol>

type="A" start="3" 代表有序形式及开始序号

（13）表格标签

border="1"边框粗细
cellspacing="0px"表示每个单元格之间的距离，0即挨到一起不用写（默认） cellpadding="10px"表示单元格填充度即距单元格距离
width="300px" height="100px"或者style="width:300px;height:100px"（改变列表大小）
thead表示表格头（第一行），tbody表示表格中（中间位置），tfoot表示表格尾（最后一行） rowspan="2"代表两个单元格合并（行），colspan="2"代表两个单元格合并（列）
tr表示行，td表示列（th表示加粗且居中）

<table border="1" width="300px" height="100px" cellspacing="1px"cellpadding="10px">
    <tr>
        <td rowspan="2">0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <thead>
        <tr>
            <th>2</th>
            <th>2</th>
            <th colspan="2">2</th>
        </tr>
    </thead>
</table>

（14）收集用户信息标签

text表示单行文本框；password代表密码框；radio代表单选框实现单选要加name属性;checkbox代表复选框

<form action=""> <!-- 在form中可对form中编辑内容进行重置提交操作 -->
 单行文本框<input type="text"><br>
 密码框<input type="password"><br>
 单选：男<input type="radio" name="1">
 女<input type="radio" name="1"><br>
或<label for="nan">男</label><input type="radio" name="1" id="nan">
<label for="nv">nv</label><input type="radio" name="1" id="nv">
 复选：吃<input type="checkbox" name="2">
 喝<input type="checkbox" name="2">
 玩<input type="checkbox" name="2">
 乐<input type="checkbox" name="2"><br>
 文件选择器<input type="file"><br>
 颜色拾取器<input type="color"><br>
 日期选择器<input type="date"><br>
 时间选择器<input type="dateTime-local"><br>
 周选择器<input type="week"><br>
 滑块<input type="range" min="0" max="100" value="50"><br> <!-- value表示当前值
-->
 数字<input type="number" min="0" max="100" value="50" step="5"><br> <!-- step
代表步长 -->
 下拉框
 <select>
 <option value="">1</option>
 <option value="">2</option>
 <option value="">3</option>
 </select><br>
 多行文本域<textarea cols="30" rows="10"></textarea><br>
 普通按钮<input type="button" value="普通按钮"><br>
 重置按钮<input type="reset" value="重置按钮"><br>
 提交按钮<input type="submit" value="提交按钮"><br>
 </form>