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.特殊符号：

大于：&gt;小于：&lt;空格：&nbsp;引号：&quot;版权符号：&copy;

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：值是正则表达式

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/323809.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！