HTML中常用知识点整理
Posted 穆雄雄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML中常用知识点整理相关的知识，希望对你有一定的参考价值。
html复习
HTML
是一个超文本标记语言
w3c标准：结构标准，表现标准，行为标准。
基本结构
<!doctype html>
<html>
<head>
<title>网页的标题</title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>基本标签
1.段落标签：
<p></p>2.标题标签：
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>3.换行标签：
<br />4.水平线：
<hr/>5.字体样式标签：
<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>6.特殊符号：
大于：>
小于：<
空格：
引号："
版权符号：©7.图像标签：
<img src="图片路径" alt="图片显示不出来时显示的内容" title="鼠标悬浮显示的内容" width="宽度" height="l高度" />相对路径：相对于当前页面的路径，eg: ../img.jpg img/img.jpg
绝对路径：相对于本机的路径，eg:D:\\常用资料\\21IT技能大赛\\img.jpg
src:图片的地址（相对路径和绝对路径都可以）
alt：图片显示不出来时显示的替换文字内容，eg:alt="这是图书"
title：鼠标悬浮时显示的内容，eg:title="这是图书"
width:图片显示的宽度，eg:width="100"
height:图片显示的高度，eg:height="100"
8.超链接：
<a href="路径" target="是否在当前窗口中打开">百度一下</a>href:跳转页面的地址，相对路径和绝对路径都可以
target：有两个值，_self:当前窗口打开超链接 _blank:在新窗口中打开超链接
9.锚链接：
从页面的甲处跳转到乙处
语法：
甲处：<a href="#yi">去乙处</a>
乙处：<p id = "yi"></p>10.块级元素和行内元素：
块级元素：单独占一行，宽度是浏览器的宽度
行内元素：内容撑开宽度，内容多宽，元素就多宽。左右都是行内元素，自动排列在一行
列表、表格和媒体元素
1.无序列表：
<ul>
<li>No.1</li>
<li>No.2</li>
<li>No.3</li>
<li>No.4</li>
</ul>2.有序列表：
<ol>
<li>No.1</li>
<li>No.2</li>
<li>No.3</li>
<li>No.4</li>
</ol>3.定义列表：
<dl>
<dt>蔬菜</dt>
<dd>黄瓜</dd>
<dd>南瓜</dd>
<dd>冬瓜</dd>
<dd>北瓜</dd>
</dl>4.表格：
<table border="1" cellspacing="0" style="text-align: center;">
<tr>
<td colspan="3">第一列</td>
</tr>
<tr>
<td rowspan="2">第一列</td>
<td>第二列</td>
<td>最后一列</td>
</tr>
<tr>
<td>第二列</td>
<td>最后一列</td>
</tr>
</table>运行结果：
| 第一列 | ||
| 第一列 | 第二列 | 最后一列 |
| 第二列 | 最后一列 | |
5.音频元素：
<audio src="音频文件" autoplay="autoplay" controls="controls"></audio>6.视频元素：
<video src="视频文件" autoplay="autoplay" controls="controls"></video>**src：**音频或者视频的路径
**autoplay：**自动播放
**controls：**显示播放控件
7.网页结构元素：
<header>
<nav>导航</nav>
</header>
<section>中间</section>
<footer>底部</footer>表单元素
1.文本框 ：
<input type="text" name="name" value="mxx" size="20" maxlength="20" placeholder="请输入用户名" required="required" readonly="readonly" />type：表单的类型name：表单元素的名称value：默认值，初始值size：表单的初识宽度maxlength：最大输入的字符数placeholder：提示信息required：是否必填，不写的话不用必填readonly：是否只读
2.密码框：
<input type="password" name="pass" />3.单选按钮：
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女注意：name的值必须要一样，否则不能单选
4.复选框：
<input type="checkbox" checked="checked name="hob" />打篮球
<input type="checkbox" name="hob" />堆雪人
<input type="checkbox" name="hob" />打雪仗注意：checked是默认选中的意思，可适用于单选按钮和复选框
5.下拉列表：
<select>
<option>山东</option>
<option selected="selected">山西</option>
<option>河南</option>
<option>河北</option>
</select>注意：selected是默认选中
6.按钮：
<button disabled="disabled">普通按钮</button>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />注意：disabled：是禁用按钮
7.多行文本域：
<textarea cols="5" rows="20">欢迎关注微信公众号：雄雄的小课堂</textarea>cols：列rows：行
8.文件域：
<input type="file" name="files" />9.邮箱：
<input type="email" name="files" />10.数字框：
<input type="number" min="0" max="100" step="100"/>min：最小值max：最大值step：步幅
11.滑块：
<input type="range" min="0" max="100" step="1"/>12.日期表单：
<input type="date" name="borndate"/>13.隐藏域：
<input type="hidden" name="id"/>14.语义化标签：
<label>用户名</label>15.正则表达式验证：
<input type="text" name="phone" pattern="^1[3456789]\\d{9}" />pattern：值是正则表达式
以上是关于HTML中常用知识点整理的主要内容，如果未能解决你的问题，请参考以下文章