HTML学习笔记 | 青训营

58 阅读2分钟

HTML的基本结构:

文档声明:<!DOCTYPE html> 表示这是一个HTML页面。

html标签对:<html></html> 告知浏览器页面从<html>开始,到</html>结束。

head标签对:<head></head> 网页的头部,用于定义特殊的内容,如页面标题,定时刷新等。

body标签对:<body></body> 网页的身体,大部分代码编写在此处。

在HTML中,有六个标签可以放在head标签内部。

<title></title> 标签对:是head标签的内部标签,其中定义的内容是页面的标题。

<meta/>标签:用于定义页面的特殊信息,提供给浏览器引擎页面内的内容信息。

  • name属性:

    属性值:

    keywords:网页的关键字。

    description:网页的描述

    author:网页作者

    copyright:版权信息

  • http-equiv属性: 定义网页使用的编码,或是网页的自动跳转刷新。

    通常我们可以看到<meta charset='utf-8'/>,这条语句可以避免网页乱码。

<style></style>标签对:定义元素的CSS样式。

<script></script>标签对:定义页面的JavaScript代码,或是引入外部的JavaScript文件。

<link/>标签:引入外部样式表,CSS文件。

<base>标签

HTML注释:<!-- 注释的内容 -->

大多数静态页面由以下几种元素组成:文字,图片,超链接,音频和视频。静态页面和动态页面的主要区别在于是否与服务器有数据交互

<h></h>标题标签:共有六个级别,从h1到h6,其中h1的标签重要性最高,一个页面一般只能有一个h1标签,h2到h6的标签可以有多个。

<p></p>标签对:段落标签,用于定义一段文字。

<br/>标签:用于文字换行。

文本标签
斜体标签i, em, cite
粗体标签strong, b
上标标签sup
下标标签sub
中划线标签s
下划线标签u
大字号标签big
小字号标签small
水平线标签hr

<div></div>标签:用于划分出一块区域。

有序列表

    `<ol>
        <li>内容</li>
        <li>内容</li**>**
        <li>内容</li>
     </ol>`

无序列表

    ` <ul>
        <li>内容</li>
        <li>内容</li>
        <li>内容</li>
     </ul>`

表格

    `<table>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>内容</td>
            <td>内容</td>
        </tr>
     </table>`

图片标签:<img src='' alt='' title=''/>

alt属性用于图片描述,当图片无法显示的时候,页面会显示alt中的文字。

title属性也用于图片描述,当鼠标指针位于图片上时,会显示title中的文字。

超链接:<a href="链接地址" target="打开方式">文本或图片</a>

target属性值:

  • _self: 在原来的窗口中打开链接(默认)。
  • _blank: 在新窗口打开链接。
  • _parent: 在父窗口打开链接。
  • _top: 在顶层窗口打开链接。

表单:

<form> 表单标签 </form>

单行文本框: <input type="text"/>

密码文本框: <input type="password"/>

单选框: <input type="radio" name="组名" value="取值"/>

复选框: <input type="checkbox" name="组名" value="取值"/>

按钮: <input type="button" value="取值"/>

文件上传: <input type="file">

多行文本框: <textarea rows="行数" cols="列数" value="取值">内容</textarea>

下拉列表: <select> <option>选项1</option> ... <option>选项n</option> </select>

iframe框架:可以使用iframe标签来实现一个内嵌框架,在当前页面再嵌入一个网页。

<iframe src="链接地址" width="" height=""></iframe>