初识HTML-精简版

什么是HTML？

HTML：Hyper Text Markup Language(超文本标记语言)

HTML基本结构

image-20230802160043884

图中<body>、</body>等成对出现的标签分别叫开放标签和闭合标签。单独出现的标签（空元素），如<hr/>意为用/来关闭空元素。

注释方法：

<!-- 这是注释内容 -->

网页基本标签

标题标签

<h1>
    一级标签
</h1>
<h2>
    二级标签
</h2>
<!-- 以此类推 -->

段落标签

<p>
    段落标签可以分段
</p>

image-20230802161948871

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<!-- 粗体标签 -->
<strong>粗体</strong>
<!-- 斜体标签 -->
<em>斜体</em>

特殊符号

  • 空格符号

&nbsp;

  • 大于号

&gt;

  • 小于号

&lt;

  • 版权符号

&copy;

图像标签

<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度">

链接标签

<a href="链接路径" target="目标窗口位置">链接文本或图像</a>

target:

  • _blank在新标签页中打开

  • _self在当前页面打开

  • _parent：在父级窗口中打开链接。使用此属性，点击链接时会在当前窗口的父级窗口中加载链接的目标页面。通常在使用iframe嵌套页面时使用此属性。

  • _top：在顶层窗口中打开链接。使用此属性，点击链接时会在顶层窗口中加载链接的目标页面。如果当前窗口有嵌套的框架，则会跳出所有框架，加载在整个浏览器窗口中。

锚链接

<a name="标记名"></a>
<a href="#标记名">文本或图像</a>

先得用a标签标记一下，然后#表示是一个标记。该功能可以和链接标签一起使用。

<a href="链接地址#标记名">文本或图像</a>

表示跳转到指定链接的指定标记处。

邮件链接

<a href="mailto:xxx.com"></a>

列表

什么是列表？

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展现出来，以便浏览者能快速获取相应信息。

列表的分类

  • 无序列表

<ul>
    <li>html</li>
    <li>css</li>
</ul>

输出：

·html
·css

  • 有序列表

<ol>
    <li>html</li>
    <li>css</li>
</ol>

输出：

1.html
2.css

  • 定义列表

<dl>
    <dt>列表名称</dt>
    <dd>列表内容</dd>
</dl>

表格

  • 行：<tr></tr>

  • 列：<td></td>

  • 跨列：colspan=""

  • 跨行：rowspan=""

<table>
    <tr>
    	<td colspan="3"></td>
        <td rowspan="2"></td>
    </tr>
</table>

媒体文件

<video src="文件路径" controls autoplay></video>

  • controls：控制条

  • autoplay：自动播放

页面结构分析

元素名

描述

header

标题头部区域的内容（用于页面或页面中的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面的一块区域）

section

Web页面中的一块独立区域

article

独立的文章内容

aside

相关内容或应用

nav

导航类辅助内容

iframe内联框架

这个可以理解为在当前页面又打开了一个小页面

<iframe src="path" name="xxx" frameborder="0" width="" height="">
    <a herf="" target="">点击跳转</a>
</iframe>

  • src：小页面链接地址

  • frameborder：iframe内敛边框宽度

表单提交

一个简单的模板

<form method="post" action="index.html">
    <p>名称：<input name="" type="text"></p>
    <p>密码：<input name="" type="password"></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

表单元素格式

属性

说明

type

指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text

name

指定表单元素的名称

value

元素的初始值。type为radio时必须指定一个值

size

指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

maxlength

type为text或password时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否被选中

单选框

<input type="radio" value="xxx" name="xx"/>

当表单元素名称相同的时候只能选一个

多选框

<input type="checkbox" value="" name="xx" checked/>
<input type="checkbox" value="" name="xx"/>
<input type="checkbox" value="" name="xx"/>

  • checked表示默认

按钮

<!-- 
input type="button"  普通按钮
input type="image"   图像按钮
input type="submit"  提交按钮
input type="reset"   重置
-->
<input type="button" value="" name=""/>
<input type="" src="" />

下拉框

<p>
    <select name="下拉框的名称">
        <option value="xxx">选项名1</option>
        <option value="xxx" selected>选项名2</option>
    </select>
</p>

  • selected表示默认值

文本域

<textarea name="xxx" cols="" rows=""></textarea>

  • cols：行

  • rows：列

文件域

<input type="file" name="">

简单验证

<p>
    <p>
        <input type="email" name="email">
    </p>
    <p>
        <input type="url" name="url">
    </p>
</p>

这样在前端浏览器就会自动检查是否为email或url。

  • placeholder属性是HTML表单元素中常用的属性之一，它用于在输入字段中提供对用户的简短提示。当用户没有输入任何内容时，输入字段会显示该提示文本，一旦用户开始输入，该提示文本会自动隐藏。

  • required属性是HTML表单元素中的一个属性，用于指定用户在提交表单之前必须填写或选择该字段。当应用了 required 属性时，表单提交时，如果对应的表单字段为空或未选择，则浏览器会显示一个验证错误信息，并阻止表单的提交。

  • pattern属性是HTML表单元素中的一个属性，用于指定输入字段的正则表达式模式。

表单的应用

  • 隐藏：hidden

  • 禁用：disabled

  • 只读：readonly