HTML知识概述 - 技术栈

参考资料

哔哩哔哩：3小时前端入门教程（HTML+CSS+JS）。

HTML简介

HTML叫做超文本标记语言，通过一系列的标签（也称为元素），来定义文本、图像、链接等。HTML是由尖括号包围的关键字。标签通常成对出现，包括开始和结束标签，内容位于两个标签之间。

HTML可以双标签，也可以单标签，单标签用于没有内容的元素。

<!DOCTYPE html>开头，作用是告诉浏览器这是html文件。

<html>标签对，这是文档的起始点。

html 复制代码

<html>
    <head>
    </head>
    <body>
    </body>
</html>

<head>标签对里面通常可以放文档的title标题，文档的编码格式<meta charset="UTF-8">。

此外一般还会设置<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是让网页的宽度跟随设备的屏幕宽度，并且初始缩放比例设为1。

常用文本标签

h1-h6：一级标题标签到六级标题标签。

p：段落标签。

b(bold):加粗。 i(ltalic):斜体。 u(underline):下划线。 s(strikethrough):删除线。

ul(unorder list):无序列表元素。 ol(order list):有序列表元素。

<table>标签:建表。 tr(table row):表行。 th(table head):表头。 td(table data):表的数据。

a(anchor)：链接标签 href(hypertext reference)是标签属性，定义链接位置。 target控制行为。

br(break)：分列。

标签属性

<开始标签 属性名="属性值">

每个HTML可以有不同属性。属性名不区分大小写，属性值对大小写敏感。

class：提供多个类名。

id：定义元素唯一的id。

style：规定元素的行内样式。

例：<img src="log.jpg" alt="该图片无法显示">，会弹出一个一零年代风格的熟悉的神秘小图标。

HTML区块

块元素block：通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。

常见块级元素包括<div> <p> <h1-h6> <ul> <table> <form>等。

<div>(division)标签通常没有任何语意，仅用于组织内容。创建页面的布局结构。

<span>可以理解为没有特殊元素的a标签/img标签，以便于使用样式。

HTML表单

<form>标签

<form>

<label>用户名：</label>

<input type="text" placeholder="请输入文本">

</form>

这一段全是演示。

html 复制代码

<form>
        <label for="pwd>密码：</label>
        <input type="password" id="pwd" placeholder="请输入密码">

        <label>性别：</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其它
        
        <label>爱好：</label>
        <input type="checkbox" name="hobby">唱歌
        <input type="checkbox" name="hobby">跳舞
        <input type="checkbox" name="hobby">RAP
        <input type="checkbox" name="hobby">篮球
        
        <input type="submit">
</form>