前端 HTML （简单了解）

大白白白-

已于 2022-07-31 09:53:36 修改

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

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

于 2022-07-30 18:00:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_64121593/article/details/126072094

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML的基础知识，包括HTML的简介、基本骨架和常用标签。详细讲解了排版类型如标题、段落、链接、图像、换行和水平线，以及布局类型如div和span。此外，还涵盖了表单元素如输入框、单选、复选和提交，以及表格的结构。

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

按照我自己的理解写的，如果有错误可以评论哦~

HTML简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。（源于百度百科）

HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head>  <!--定义了文档的信息-->
    <meta charset="UTF-8">  <!--meta--定义了HTML文档中的元数据-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>  <!--定义了文档的标题-->
</head>
<body>
    
</body>
</html>

<!--
base--定义了页面链接标签的默认链接地址
link--定义了一个文档和外部资源之间的关系
script--定义了客户端的脚本文件
style--定义了HTML文档的样式文件
-->

大多都是两两配对（如<html></html>，<head></head>）

HTML常用标签

排版类型

标题(h)--head

<h1>  标题 （最大）</h1>
<h2>  标题 </h2>
<h3>  标题 </h3>
<h4>  标题 </h4>
<h5>  标题 </h5>
<h6>  标题 （最小）</h6>

段落(p)

<p>段落lalalaa</p>
<p>另一个lalala</p>

链接（a)

href--链接地址 target--链接页面的打开方式


<a href="https://www.baidu.com" target="_blank">这是一个链接</a>

图像（img)

只有一个，不是一对！！！单标签
src--路径
width--宽
height--高
alt--图片未显示展示的文字
title--鼠标悬停图标上显示的文字

<img src="zp/l.png" width="100" height="100" alt="未显示" title="显示" />

换行（br）

水平线（hr）

都是一个！！！单标签

<br>
<hr>

布局类型

文档区块（div）--块级

组合文档中的行内元素（span）

div --一行只能放一个div
span--一行上可以放好多个span

<div> 一个div </div>
<div> 两 个 div </div>
<span> 一个span </span>
<span> 两 个 span </span>

列表

有序列表

<ol>
<li>这是1</li>   //1.这是1
<li>这是2</li>   //2.这是2
</ol>

无序列表

<ul>
<li>这是1</li>  //这是1
<li>这是2</li>  //这是2
</ul>

框架

使用框架，可以在同一个浏览器窗口中显示不止一个页面

src--路径

height 和 width --高度与宽度（属性默认以像素为单位）

rameborder --是否显示边框（设为 0 移除iframe的边框）

<iframe src="iframe.html" width="200" height="200" ></iframe>
<iframe src="frame.html" frameborder="0"></iframe>

例

<iframe src="de.html" name="a"></iframe>
<a href="https://www.baidu.com" target="a" rel="noopener">点击</a>

表单

控件(input)

type--选择类型 value--默认的文本值 name主要作用就是用于区别不同的表单

可以使用 <form> 标签来创建表单

表单的动作属性 action 定义了服务端的文件名

action 属性会对接收到的用户输入数据进行相关的处理

输入框

一个普通输入框和一个秘密输入框

placeholder--显示描述文字，不用删除，在有文字输入时自动消失

<form action="">
Username: <input type="text" name="user" value="请输入用户名"><br> 
Password: <input type="password" name="password" placeholder="输入密码">
</form>

单选

<input type="radio"> 标签定义了表单的单选框选项

name一致的为一组

checked--表示默认选中状态

<form action="">
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<br>
<input type="radio" name="s" value="male" checked="checked">他
<input type="radio" name="s" value="female">她
</form>

复选

<input type="checkbox"> 定义了复选框

<form>
<input type="checkbox" name="1"> 白
<input type="checkbox" name="1" checked="checked"> 红
<input type="checkbox" name="1"> 蓝
<input type="checkbox" name="1"> 绿
</form>

提交

<input type="submit"> 定义了提交按钮

表单的动作属性 action 定义了服务端的文件名

action --对接收到的用户输入数据进行相关的处理

<form name="input" action="qd" method="get">
Username: <input type="text" name="user"> <br>
<input type="submit" value="Submit">
</form>

点击确认按钮，那么输入数据会传送到 qd 文件

method --用于定义表单数据的提交方式(post,get)

表格

表格（table）行（tr）列（td ）

border--边框（不定义边框属性，表格将不显示边框）

<th>--表头

<table border="1">
                    <tr>
                        <th>1</th>
                        <th>2</th>
                    </tr>
                    <tr>
                        <td>1  1  1</td>
                        <td>1  2  1</td>
                    </tr>
                    <tr>
                        <td>1  3  1</td>
                        <td>1  4  1</td>
                    </tr>
                </table>