HTML学习笔记

最新推荐文章于 2025-12-23 22:02:32 发布

原创最新推荐文章于 2025-12-23 22:02:32 发布 · 270 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

学习类知识总结分享专栏收录该内容

7 篇文章

订阅专栏

HTML学习笔记（详细）

HTML元素	描述
<html></html>	超文本的开始和结束
<head>、</head>	超文本头部信息的开始和结束
<title>、</title>	超文本创口标题的开始和结束，它被显示在浏览器的标题栏中
<meta>	用来描述HTML文档的元信息，即文档自身的信息
<body>、</body>	网页主体部分，是HTML语言的核心部分
<h1></h1>~<h6></h6>	定义字体的大小
<b></b>或者<strong> </strong>	字体加粗
<i>、</i>或者<em></em>	字体变斜体
<u></u>	字体加下划线
<s></s>	字体加中划线
<sup></sup>	字体为上标
<sub></sub>	字体为下标
<font><font>	定义字体属性
<pre></pre>	使空格、回车有效
<p>、</p>	段落的开始和结束
<br/>	换行标签
<hr/>	加水平线
<img src=‘style/graphic.jpg’ alt=“text” title=“text” width=“x” height=“y”>	插入图片（alt表示图像替代的文字，title表示鼠标悬停显示的文字）
<video src="" controls autoplay></video>	插入视频(显示视频控件，打开网页自动播放）
<audio src="" controls autoplay></audio>	插入音频(显示视频控件，打开网页自动播放）
<ul>和<ol>	标题分级方式：UL表示无序，OL表示有序
<li>	子标题
<a href=“链接地址” target"目标打开窗口"></A>	超链接（_blank,_self)
<table></table>	显示表格
<tr>、</tr>	表格的行显示
colspan = “2”	表格的跨列显示（此处跨了两列）
rowspan ="2”	表格的跨行显示（此处跨了两行）
<td>、</td>	表格的列显示
<th>、</th>	表头
<dl></dl>	标签
<dt></dt>	列表名称
<dd>、</dd>	列表内容
<caption>、</caption>	表标题
src	设置Midi文件及路径
hidden	是否完全隐藏控制画面
&nbsp	空格
&copy	版权符号
gt	>
lt	<
<a name=“name” ></a> <a href="#name"> // 去到name所在的位置	锚链接（多用于返回顶部）
<a href=“mailto:邮箱地址”>点击联系我</a>	邮箱
<a target="_blank" href=“http://wpa.qq.com/msgrd?v=3&uin=2317496650&site=qq&menu=yes”>QQ交流</a>	qq可直接打开对话
<iframe src="" name=“lian” frameborder=“0” width=“1000px” height=“800px”></iframe> <a href=“index.html” target=“lian”>点击跳转</a>	点击联接打开内联框架的方法

HTML元素	描述
<FORM NAME="" ACTION=“URL” METHOD=“GET\|POST”>和</FORM>	显示表单
<INPUT TYPE=“TEXT”>	普通输入文本
<INPUT TYPE=“PASSWORD”>	密码输入框
<INPUT TYPE=“CHECKBOX”>	复选框
<INPUT TYPE=“RADIO”>	单选按钮
<INPUT TYPE=“email”>	自动验证是否为合法的EMAIL地址 (HTML5)
<INPUT TYPE=“url”>	自动验证是否为合法的URL地址(HTML5)
<INPUT TYPE=“number” min=“0” max=“120” step=“1” id=“age”>	自动验证其中内容是否为合法的数值(HTML5)
<INPUT TYPE=“range”>	滑块
<INPUT TYPE=“search”>	搜索框
Readonly	只读
Disabled	不可用
hidden	隐藏
<INPUT TYPE=“date”>month、week、time、datetime	日期选择器(HTML5)
<INPUT list=“abc”><datalist id=“abc”></datalist>	标签自动提示功能，与input标签配合使用(HTML5)
<SELECT></SELECT>	下拉列表框
<OPTION>、</OPTION>	设置下拉选项
<TEXTAREA COLS=“N” ROWS=“N”></TEXTAREA>	多行文本域
<INPUT TYPE=“SUBMIT”>	提交按钮
<INPUT TYPE=“RESET”>	重置按钮
<INPUT TYPE=“HIDDEN”>	隐藏域
<INPUT TYPE=“FILE” name=“files”>	文件选择
placeholder	输入框提示
required	非空判断
pattern	正则表达式

*多媒体:简单使用embed标签即可，如果要多首歌顺序播放、多页面背景音乐连续播放等功能，可以考虑使用jPlayer跨平台的音视频播放插件。

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标题脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于地址栏）
nav	导航类辅助内容

属性	说明
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时，指定按钮是否被选中

/*表单样例*/

<form method="post" action="result.html">
    <p>
        名字：<input name="name" type="text">
        密码：<input name="pass" type="password">
    </p>
    <p>
        <input type="submit" name="button" value="提交"/>
        <input type="reset" name="reset" value="重填"/>
    </p>
</form>

/*单选的写法*/
<p>
    性别：
    <input type="radio" value="boy" name="sex"/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

/*多选的写法*/
<p>
    爱好：
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby"/>敲代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
</p>

/*点击文字锁定到输入框*/
<p>
    <label for="mark">你点我试试</label>
    <input tpye="text">
</p>

/*下拉框的写法*/
<p>国家：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth">瑞士</option>
        <option value="yindu">印度</option>
    </select>
</p>