NTT Front-end Navigation

HTML基础

HTML（HyperText Markup Language），中文叫做超文本标记语言，是编写网页最基础的标记语言

比较具体的教程

Online Playground

HTML与C++等语言不同，它是声明式的。也就是说你只需要根据语法描述它是个什么东西，具体实现浏览器会自行处理。同时，它也是一种标记语言，基本的单位称为标签，基本格式如下：

<TagName properties> content </TagName>

WARNING

不要忘了闭合标签

基本结构

在vscode中新建一个html文件，输入html，选择html:5，vscode会为你自动补全html文档的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

我们根据上面的代码简单地介绍一下HTML文档的结构：

  • <!DOCTYPE html>：说明文档是一个HTML文档，必需
  • <html>：HTML根标签，必需
  • <head>：包含了文档的元(meta)数据，比如<title>等
  • <body>：包含了可见的页面内容

HTML属性

属性是HTML标签提供的附加信息，一般位于开始标签

例子：

<a href="xxxxx">link</a>

上面的a标签中包含了一个href属性，表示一个指向xxxxx的链接

属性的值应该被包括在引号内，如果属性本身有双引号，那就要用单引号包括

HTML基本标签

因为是简单教程，所以我们只介绍一些基本的标签

标题

根据字号大小，HTML有<h1> - <h6>六种标题

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

段落

使用<p>标签可以将文字划分为段落

<p>这是一个段落</p>
<p>这是另一个段落</p>

链接

使用<a>标签可以设置超文本链接

<a href="url"> content </a>
<a href="https://www.runoob.com/">访问菜鸟教程</a>

显示为：访问菜鸟教程

另外，我们也可以把链接链接到文档中的id，跳转到页面中的指定位置，如：

<a href="#基本结构">跳转</a>

跳转

id属性

可以在<body>中的任何标签指定id="xxx"，这样就给这个标签添加了一个唯一标识符，可以通过选择器#xxx来获取这个元素

图片

使用<img>标签可以插入图片

<img src="xxx" alt="xxx">

example_image

其中，src属性指定图片的链接，alt属性指定了改图片的预备可替换文本

表格

表格用<table>来定义，每行使用<tr>定义，列使用<td>定义

<table>
    <tr>
    	<td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

显示如下：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

另外，我们还可以用<th>标签来定义表头，<th>内的文字会加粗显示

列表

列表用<ul>（无序）和 <ol> （有序）来定义，列表元素用<li>定义

<!-- 无序列表 -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>one</li>
    <li>two</li>
</ol>
  • first
  • second
  1. one
  2. two

表单

一般来说，表单是用来处理用户输入的地方，使用<form>标签定义。而表单中有许多种输入元素，我们依次列举：

<!-- 文本输入框 -->
<input type="text" placeholder="input here" />

<!-- 密码输入 -->
<input type="password" />

<!-- 单选框 -->
<input type="radio" name="number" value="1">one
<br />
<input type="radio" name="number" value="2">two

one
two

<!-- 复选框 -->
<input type="checkbox" name="number" value="1">one
<br />
<input type="checkbox" name="number" value="2">two

one
two

<!-- 下拉单选 -->
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>

<head>中的一些标签

<link>标签一般用于引入外部资源（大多是CSS）：

<link rel="stylesheet" type="text/css" href="xxx">

<script>标签用来引入外部Javascript或者直接在其中编写Javascript脚本：

<script src="xxx"></script>

<script>
	console.log("hello world");
</script>

<style>标签用来编写内联CSS：

<style>
    .p{
        margin: 0px;
    }
</style>

<meta>标签用来定义一些网页的基本元数据（搜索引擎会抓取这些数据）：

<meta name="description" content="免费 Web & 编程 教程">

分组标签

这里主要是<div>和<span>，它们没有特定的含义，但是它们提供了把内容分块的功能，便于使用CSS把它们排版


到这里，常用的HTML元素就介绍完毕了，关于HTML5新增的一些元素，请自行访问完整教程

← CSS基础 →