introduzir

HTML e CSS são as duas tecnologias mais básicas no desenvolvimento de front-end e são o núcleo da construção e do embelezamento de páginas da web. Se você é um iniciante em front-end, não se preocupe, este artigo fornecerá a você o conhecimento básico de HTML e CSS, permitindo que você comece facilmente com o desenvolvimento de front-end.

Parte 1: Noções básicas de HTML

1. O que é HTML? HTML, o nome completo de Hypertext Markup Language (HyperText Markup Language), é uma linguagem de marcação usada para descrever a estrutura de páginas da web. Ele usa tags para definir seções de uma página da web.

2. Estrutura do documento HTML
Um documento HTML simples consiste nas seguintes tags básicas:

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 在此处添加页面内容 -->
</body>
</html>

<!DOCTYPE html> : Declara o tipo de documento, indicando que HTML5 é usado para escrita.
<html> : O elemento raiz de todo o documento HTML.
<head> : Contém informações relacionadas ao documento, como título, conjunto de caracteres, etc.
<title> : Define o título da página da web, exibido na página da guia do navegador.
<body> : contém o conteúdo principal da página da web.

3. Tags HTML comumente usadas

<h1> a <h6> : tags de cabeçalho, usadas para definir diferentes níveis de cabeçalhos.
<p>: tags de parágrafo, usadas para definir o texto do parágrafo.
<ul> e <ol>: Lista não ordenada e tags de lista ordenada, usadas para criar uma lista de itens.
<li>: Marca de item de lista, usada dentro de <ul> ou <ol>, define cada item de lista.
4. Atributos HTML
As tags HTML podem usar atributos para fornecer mais informações. Por exemplo, a tag <img> é usada para inserir imagens:

<img src="图片地址" alt="图片描述">

srcAtributo: Especifique o endereço URL da imagem.
altAtributo: Exibir texto alternativo quando a imagem não puder ser exibida.

5. Hiperlinks e imagens

Criar hiperlinks:

<a href="链接地址">链接文本</a>

Inserir imagem:

<img src="图片地址" alt="图片描述">

Parte Dois: Noções Básicas de CSS

1. O que é CSS?
CSS, o nome completo de Cascading Style Sheets (Folhas de estilo em cascata), é uma linguagem de folha de estilo usada para controlar o estilo e o layout das páginas da web. Ele nos permite embelezar as páginas da web para torná-las mais atraentes.

2. Aplicação de estilos CSS

Introduzir folhas de estilo CSS em documentos HTML:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Escreva estilos CSS no arquivo styles.css.

3. Seletores CSS

Seletor de rótulo:

p {
    /* 在此处添加样式 */
}

seletor de classe:

.classname {
    /* 在此处添加样式 */
}

Seletor de ID:

#idname {
    /* 在此处添加样式 */
}

4. Estilos de texto

Definir fonte, tamanho e cor:

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

Alinhamento do texto:

h1 {
    text-align: center;
}

5. Modelo e layout da caixa

O modelo de caixa inclui uma área de conteúdo, preenchimento, bordas e margens:

div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

Elementos flutuantes:

.float-left {
    float: left;
}
.float-right {
    float: right;
}

epílogo

HTML e CSS são a base do desenvolvimento front-end.Este artigo apresenta a estrutura básica de documentos HTML, tags e atributos comuns, bem como a aplicação de estilos CSS e seletores comuns. Espero que este guia introdutório possa ajudá-lo a começar rapidamente com o desenvolvimento front-end e estabelecer uma base sólida para sua jornada de aprendizado.

apêndice

Ótimos recursos para aprender mais sobre HTML e CSS:

Documentação da Web do MDN
Tutoriais on-line do W3Schools
Editor online CodePen

Desejo a você um feliz aprendizado de front-end e progresso contínuo!

Tutorial básico de HTML/CSS: um guia para iniciantes

introduzir

Parte 1: Noções básicas de HTML

Parte Dois: Noções Básicas de CSS

epílogo

apêndice

Acho que você gosta