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 | 是否完全隐藏控制画面 |
  | 空格 |
© | 版权符号 |
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>