HTML
有序列表
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
</ol>
效果:
- 阿凡达
- 泰坦尼克号
无序列表
<ul>
<li>阿凡达</li>
<li>泰坦尼克号</li>
</ul>
效果:
- 阿凡达
- 泰坦尼克号
定义列表
用于展示多个主体以及其对应的属性
<dl>
<dt>导演:</dt>
<dd>陈凯歌</dd>
<dt>主演</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
</dl>
效果:
-
导演:
陈凯歌
-
主演
- 张国荣
- 张丰毅
链接
<a href="网页地址" /> 默认替换原有页面
<a href="网页地址" target="_blank"/> 新空白页面打开
通过target属性,我们可以定义被链接的文档在何处显示。
多媒体
图片
<img src="图片地址" alt="" width="" />
音频
<audio src="音频地址" controls></audio> controls标签表示浏览器显示播放控件
视频
<video src="视频地址" controls></audio> //controls标签表示浏览器显示控件
输入
在所有表示输入的表单前,要先创建一个表单元素。
<form>
<input type="text">
</form>
基本的type属性:
<input placeholder="请输入用户名">
<input type="range">//表示拖拽的进度条
<input type="number" min="1" max="10">//表示输入数字
<input type="date" min="2018-02-10">//表示输入日期
<input type="password">//表示输入密码
<textarea>Hey</textarea>//文本输入框
选项及下拉菜单:
<input type="checkbox">//多选
<input type="checkbox checked">//默认选择
<input type="radio" name="xxx">//单选
<select>//下拉选择
<option>1</option>
</select>
//提示用户进行快捷输入
//给input添加list属性
<input list="countries">
<datalist id="countries">
<option>Greece</option>
<option>Greece</option>
</datalist>
提交按钮:
<input type="submit" value="Submit">
//实例
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
上面代码定义了一个提交按钮。当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性action定义了服务端的文件名。action属性会对接收到的用户输入数据进行相关的处理。
表示文本样式的标签
blockquote:引用
<blockquote cite="xxx">
<p>天才并不是...</p>
</blockquote>
示例:
天才并不是...
cite、q:短引用
<cite></cite>
<q></q>
code:表示代码
<code>hello world</code>
pre:表示多行代码
<pre>
<code></code>
<code></code>
</pre>
strong:加粗
em:倾斜
页面布局
header:
nav
main: aside
article aside
footer
框架
通过使用框架,我们可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
设置高度与宽度:
通过height和width属性设置iframe标签高度与宽度。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
移除边框:
frameborder用来定义边框,设置为“0”则为移除边框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>