跳至主要內容

HTML

棋大约 11 分钟约 3409 字

HTML文档结构

<!DOCTYPE html>  DOCTYPE声明
<html lang="en"> 根元素，代表文档的开始与结束
<head>  头标签，用于说明与文档有关的信息
    <meta charset="UTF-8">  用于定义html元数据
    <title>html基本结构</title>  标题
    <link rel="stylesheet" href="xxx.css">  引入外部标签，如CSS
</head>
<body>  html文档的主体部分
<p id="hello">你好！</p>
</body>
</html>

meta标签

最常用的meta标签如下。

<meta name="keywords" content="关键字1,关键字2,关键字3"> 定义网页的关键词
<meta name="description" content="网页的描述"> 告诉搜索引擎网站的主要内容
<meta name="author" content="作者"> 介绍作者的信息

列表

无序列表

无序列表使用标签ul代表一整个列表，其中的元素用标签li罗列。

在CSS3中使用list-style-type定义无序列表前面的符号，值中disc表示实心圆，circle表示空心圆，square表示实心方块，none表示无。

<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>
<hr>
<ul style="list-style-type: square">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

有序列表

有序列表使用标签ol，其他和无序列表相同。

若要改变前面的样式，同样是通过改变list-style-type更改 其中lower-roman代表小写罗马数字，upper-roman代表大写罗马数字。

lower-alpha代表小写英文字母，upper-roman代表大写英文字母，decimal是数字家圆点，none代表无。

<ol>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>
<hr>
<ol style="list-style-type: lower-roman">
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ol>

自定义列表

以dl标签开始，每个自定义列表项以dt开始，每个自定义列表项的具体内容以dd开始

<dl>
    <dt>项目一</dt>
    <dd>我们应该xxx，争取在xx前做到xxx。</dd>
    <dd>补充一点，我们还要在xx里面完成xx。</dd>
    <dt>项目二</dt>
    <dd>细节一</dd>
    <dd>细节二</dd>
</dl>

图片

在网页中插入图片使用img标签。

img标签还有一些属性，alt代表图片的替代文本、src代表图片的路径、height、width代表图片的高和宽。

图片的title属性代表鼠标悬停在图片上时显示的文本。

<img src="/HTML/assets/img.png" alt="图片">
<img src="/HTML/png.png" alt="当图片加载失败时显示此文字">
<img src="/HTML/assets/img.png" title="图片">

标题

h1代表一级标题，h2代表二级标题，后面以此类推。

align属性用于设置标题的对齐方式。

<h1 align="left">一级标题：左对齐</h1>
<h1 align="center">一级标题：居中对齐</h1>
<h1 align="right">一级标题：右对齐对齐</h1>

超链接

a标签代表超链接，href属性代表目标地址，可以是某个网址，可以是某个文件。

<a href="https://www.baidu.com">跳转到百度</a>
<a href="html基本结构.html">跳转到《html基本结构.html》</a>

a标签的target属性表示在哪里显示页面，_self代表在此窗口打开新页面，_blank代表在新窗口打开新页面。

<a href="https://www.baidu.com" target="_self">在此窗口打开百度</a>
<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>

定义热点区域

如点击图片的不同位置时进入不同的页面 即一个图片有多个超链接 使用map和area标签实现。

map标签只有一个属性name，其作用是为区域命名，其值必须和img标签的usemap属性对应 area有三个属性分别是shape、coords和href。

<img src="/HTML/assets/02.jpg" alt="" usemap="#Map">
<map name="Map">
    <area shape="rect" coords="20,20,150,150" href="/HTML/assets/03.jpg" alt="矩形">
    <area shape="circle" coords="320,320,150" href="/HTML/assets/03.jpg" alt="圆形">
</map>

定义锚点超链接，只需要给目标添加id或name属性，然后在href属性的值前添加#号加id或者name的值即可，如下面的代码。

<a href="#div"></a>
<div id="div"></div>
如超链接同一个页面的锚点。
<a href="#h1">跳转到一号标题</a>
如链接到其他页面中的锚点。
<a href="html基本结构.html#hello">跳转到其他页面</a>

表单

使用form标签定义表单，表单通常有两个不可缺少的属性action和name，action属性用于指定表单数据提交到哪个地址进行处理。
name属性用于给表单命名，表单里的标签有以下几种，其中input标签用于指定输入方式，它的属性type用于指定输入的方式。
其中text代表单行文本框，password代表密码输入框，hidden代表隐藏域，radio代表单选按钮，checkbox代表复选框。
label标签位input元素定义标注，label元素无效果，若在label元素内点击文本，焦点会自动转到此控件上，label的for属性应和相关元素的id相同。

使用button定义按钮

button按钮有以下属性：name定义名称，type定义按钮类型，只能为button、reset或submit，value定义初始值，disabled定义是否禁用按钮。

<button>和<input type="button">相比，前者提供了更为强大的功能。

使用select和option标签

select用于创建单选或多选菜单，option用于定义列表中的可用选项，value属性规定表单被提交时被发送到服务器的值。

<select>
    <option value="1">
        选项1
    </option>
    <option value="2">
        选项2
    </option>
    <option value="3">
        选项3
    </option>
</select>

使用fieldset和legend标签

fieldset标签可以将表单内的相关元素分组，并且绘制边框，legend可以为fieldset标签定义标题。

fieldset具有以下属性：disabled代表设置某些元素被禁用，form代表定义fieldset所属的若干个表单，name定义fieldset的名称。

<form action="">
    <fieldset>
        <legend>注册</legend>
        姓名：<input
            type="text">
        <br>
        年龄：<input
            type="text">
    </fieldset>
</form>

使用textarea标签

textarea用于定义多行文本域，可以使用cols和rows定义尺寸，也可用height和width定义尺寸。

<textarea cols="30" rows="10">这是默认填充的文本内容</textarea>

其他表单元素

input元素有其他类型，其中email代表应包含E-mail地址的输入域，url代表应输入代表url地址的输入域，提交时会自动验证是否有效。

number数字输入域，range包含一定范围的数字输入域，date pickers日期选择器，search搜索域，color颜色选择器。

output元素

output标签作为计算结果显示，如执行脚本输出，它有以下属性，for描述计算中使用的元素和计算结果的关系，form代表输入字段所属的表单。

name定义对象的唯一名称，提交表单会用到。

<form oninput="a.value=parseInt(x.value)+parseInt(y.value)">
    <input type="number"
           id="x">+<input
        type="number" id="y"
        value="50">=
    <output name="a"
            for="x y"></output>
</form>

meter元素

meter标签用于定义度量衡，常用于静态比例显示，meter有以下几个属性：high定义被视作高的值的范围，low定义被视作低的值的范围。
max定义范围的最大值，min定义范围最小值，value定义度量衡。

<meter value="1"></meter>
<meter value="40" max="100" min="0"></meter>

progress元素

progress标签用于定义运行中的任务进度，进程和JavaScript中方法进程，progress有两个属性。

max属性定义要完成的值，value定义当前值。

<progress max="100" value="80"></progress>

HTML5新增的属性

假如页面中有一个需要填写信息的表单，用于注册和登录，程序需要这两个按钮提交给不同的处理逻辑，在H5之前需要用JS实现。

在H5中使用如下的两个标签就可以实现这个功能。

formmethod属性可以覆盖form表单的原有提交方式。

autofocus属性用于页面加载完成时自动将焦点置于某个表单，整个Web页面只能设置一个。

placeholder属性用于设置文本框未输入内容时的显示内容。

list属性需要结合datalist标签一起使用，形成下拉菜单的一个效果，list的属性值指定datalist的属性值。

autocomplete属性定义表单是否启用自动完成功能。

<form action="" method="get">   
    <input type="submit"
           formaction="login"
           value="登录">
    <input type="submit"
           formaction="register"
           value="注册">
    <input type="submit"
           value="提交"
           formmethod="post">
    <input type="text"
           autofocus="autofocus"
           value="获取焦点">
    <input type="text"
           placeholder="用户名">
</form>
<form action=""
      method="get">
    <input type="text"
           list="options">
</form>
<datalist id="options">
    <option value="选项1"></option>
    <option value="选项2"></option>
</datalist>
<form method="post">
姓名：<input type="text"
            name="fname">
    <input type="submit">
</form>
姓名：<input type="text"
            name="fname">
<input type="submit">
</form>

HTML5新增的客户端校验

常用的表单校验属性：required定义表单不能为空，属性值为required或者省略，pattern定义表单应满足值的正则表达式。

<form action="">
    <input type="text"
           required>
    <input type="text"
           pattern="[0-9]{3}">
    <input type="submit"
           value="提交">
</form>

关闭校验

给表单添加novalidate或给提交按钮加formnovalidate属性。

<form action="" novalidate>
    <input type="button"
           value="提交"
           formnovalidate>
</form>

表格

使用table标签定义表格，tr代表表格的每一行，th用于定义表格的表头，td用于定义单元格。

border属性用于定义表格的边线。

通过设置cellpadding改变文字与<td>的间距。

<table border="1" cellpadding="5">
    <caption>表格标题</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
</table>

在table标签中，可以使用colspan和rowspan属性创建跨列和跨行的单元格。

通过属性bordercolor改变边框的颜色。

<table border="1" bordercolor="red">
    <tr>
        <td colspan="3">三年级前三名学生</td>
    </tr>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>总分数</th>

    </tr>
    <tr>
        <td rowspan="2">三年级（2）班</td>
        <td>小明</td>
        <td>190分</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>188分</td>
    </tr>
    <tr>
        <td>三年级（1）班</td>
        <td>小华</td>
        <td>185分</td>
    </tr>
</table>

<table border="1" bordercolor="red">
    <tr>
        <td colspan="3">三年级前三名学生</td>
    </tr>
    <tr>
        <th>班级</th>
        <th>姓名</th>
        <th>总分数</th>

    </tr>
    <tr>
        <td rowspan="2">三年级（2）班</td>
        <td>小明</td>
        <td>190分</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>188分</td>
    </tr>
    <tr>
        <td>三年级（1）班</td>
        <td>小华</td>
        <td>185分</td>
    </tr>
</table>

可以在单元格td中定义其他标签，如图片。

通过属性cellspacing设置单元格间距。

<table border="1" cellspacing="5">
    <tr>
        <td><img src="/HTML/assets/img.png" alt=""></td>
        <td><img src="/HTML/assets/img.png" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" align="center">图片</td>
    </tr>
</table>

在<table>中设置bgcolor改变表格的背景颜色。

<table bgcolor="green" border="2">
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
    <tr>
        <td>单元格三</td>
        <td>单元格四</td>
    </tr>
</table>

background属性用于设置背景图。

<table background="/HTML/assets/img.png" border="2">
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
    <tr>
        <td>单元格三</td>
        <td>单元格四</td>
    </tr>
</table>

表格的行(tr)属性。

height属性可设置行高。

可用bordercolor设置边框的颜色。

bgcolor可设置行背景颜色。

align设置行文字的对齐方式。

valign用于设置文本的垂直对齐。

<table border="2">
    <tr height="50">
        <td>单元格一</td>
        <td>单元格二</td>
    </tr>
    <tr bordercolor="gold">
        <td>单元格三</td>
        <td>单元格四</td>
    </tr>
    <tr bgcolor="red">
        <td>单元格五</td>
        <td>单元格六</td>
    </tr>
    <tr align="left">
        <td>单元格七单元格七单元格七</td>
        <td>单元格八</td>
    </tr>
    <tr valign="top">
        <td>单元格九</td>
        <td>单元格十<br>单元格十</td>
    </tr>
</table>

width设置该单元格的宽度，整列会以这一列单元格的最大宽度作为列宽，height设置高度，行高同理。

align设置单元格的水平对齐，valign设置单元格的垂直对齐。

bgcolor设置单元格的背景色。

bordercolor设置单元格的边框颜色。

<table border="2">
    <tr>
        <td width="100" height="100">单元格一</td>
        <td align="left" valign="top">单元格二</td>
        <td bgcolor="red">单元格三</td>
        <td bordercolor="red">单元格四</td>
    </tr>
</table>

IFrame

通过框架，我们可以使网页嵌套显示，框架使用的标签是iframe。

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:。

iframe还有其他属性：

  • name：规定iframe的名称

  • sandbox：对iframe的内容定义一系列额外限制

  • src：规定在iframe中显示的文档的URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<body>
<iframe src="图像.html"></iframe>
<hr>
<iframe src="图像.html" height="100px" width="200px"></iframe>
<hr>
<iframe src="图像.html" frameborder="0"></iframe>
</body>
</html>

HTML5 自定义属性

HTML5支持自定义属性。自定义属性指原来没有规定的，我们自己定义并使用的属性。在HTML5中，自定义属性用data-开头，后面跟随我们要跟随的属性名称，然后用等于号加字符串的方式来定义属性值。

<div>
    <span data-id="1">第一个</span>
    <span data-id="2">第二个</span>
    <span data-id="3">第三个</span>
</div>

在JS中可以使用dataset对象来获取自定义属性值，请参考JavaScript获取自定义属性值。

上次编辑于:
贡献者: QI
2024 © ImQi1