HTML基础笔记 | 青训营

62 阅读2分钟

HTML

有序列表

 <ol>
     <li>阿凡达</li>
     <li>泰坦尼克号</li>
 </ol>

效果:

  1. 阿凡达
  2. 泰坦尼克号

无序列表

 <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>