1 O que é HTML
HTML é uma linguagem usada para descrever páginas da web. HTML é uma linguagem de marcação de uso geral usada na Web. O HTML permite formatar texto, adicionar imagens, criar links, inserir formulários, quadros e tabelas, etc., e salvá-lo como um arquivo de texto, que pode ser lido e exibido pelo navegador.
- HTML significa Linguagem de Marcação de Hipertexto: Linguagem de Marcação de Hipertexto
- HTML não é uma linguagem de programação, mas uma linguagem de marcação
- Uma linguagem de marcação é um conjunto de tags de marcação
- HTML usa tags de marcação para descrever páginas da web
- Documentos HTML contêm tags HTML e conteúdo de texto
- Documentos HTML também são chamados de páginas da web
# 2 Exemplo introdutório
Crie um novo arquivo test.html com o seguinte conteúdo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
em:
- declarado como um documento HTML5
- elemento é o elemento raiz de uma página HTML
- O elemento contém os metadados do documento, como definir o formato de codificação da página da Web como utf-8 (uma vez que a maioria dos navegadores exibem caracteres chineses de forma direta, os caracteres devem ser declarados como UTF-8 no cabeçalho)
-
元素描述了文档的标题 - elemento contém o conteúdo da página visível
-
elemento define um título grande
-
elemento define um parágrafo
Depois de salvar e executar, a seguinte interface pode ser aberta no navegador
3 Explicação detalhada de cada parte
3.1 Título
Cabeçalho HTML (Cabeçalho) é passado
-
marcas são definidas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
3.2 Parágrafo
Os parágrafos HTML são definidos pela tag
definir
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
</html>
3.3 Links
Links HTML são definidos por tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<a href="https://blog.csdn.net/zong596568821xp">这是一个链接使用了 href 属性</a>
</body>
</html>
3.4 Imagem
Imagens HTML são definidas por tags. Nota: O nome e as dimensões da imagem são fornecidos como atributos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<img src="zongxp.jpg" width="640" height="640" />
</body>
</html>
3.5 Formulário
formar por
rótulo para definir. Cada tabela tem um número de linhas (definidas por rótulos) e cada linha é dividida em um número de células (definidas por| definições de rótulo). As letras td referem-se aos dados da tabela, ou seja, ao conteúdo de uma célula de dados. As células de dados podem conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, tabelas e muito mais. Uso de cabeçalhos de tabela | Os rótulos são definidos. Se nenhuma propriedade de borda for definida, a tabela não exibirá uma borda. Às vezes isso é útil, mas na maioria das vezes queremos que a borda apareça. Use a propriedade border para exibir uma tabela com uma borda: |
|---|
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
4 Lista de referência rápida
4.1 Documentação Básica
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
4.2 Abas básicas
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
4.3 Formatação de texto
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
4.4 Links
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
4.5 fotos
<img src="URL" alt="替换文本" height="42" width="42">
4.6 Estilos/Blocos
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
4.7 Listas não ordenadas
<ul>
<li>项目</li>
<li>项目</li>
</ul>
4.8 Listas Ordenadas
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
4.9 Lista de definições
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
4.10 Formulários
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
4.11 Estrutura
<iframe src="demo_iframe.htm"></iframe>
4.12 Formulários
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
4.13 Entidades
< 等同于 <
> 等同于 >
© 等同于 ©