前端——html（基础）

Posted 2022-12-06 老赖的小弟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端——html（基础）相关的知识，希望对你有一定的参考价值。

双标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是一级标题</h1>
</body>
</html>

单标签

/在后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <!-- 单标签 -->
    <hr/>
</body>
</html>

标签的级别

J3 -
容器级别、文本级别

文本级别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <p>我是p标签58+*/--==；嚄435%%￥#@%……</p>
    <span>我是span标签</span>
</body>
</html>

J3 -
a、p、span、img、表单元素
只能插入文字或者其他级别的文本标签（不要同一标签嵌套）否则将来学习样式的时候网页的布局会受到影响

容器级别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签</title>
</head>
<body>
    <h1>
        我是文字
        <p>
            这是文字
        </p>
    </h1>
</body>
</html>

J3 -
div、hl、dl、dt、dd、ul、ol、li等
网页显示内容部分，可以插入任意内容（文字、文本级别的标签、其他级别的容器标签），或其他级别的标签

标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <!-- 属性   属性值 -->
    <h1 class="box1">
    </h1>
</body>
</html>

J3 -
属性由属性名和属性值两部分组成，标签的属性可能对于整个网页有影响，也可能对一个标签有影响
注意：标签名字和属性之间有一个空格、一个属性可以有多个属性值、一个标签可以有多个属性（属性与属性之间得有空格）
标签与标签之间对于换行和空格是不敏感的，但是为了美观，我们尽量换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

p标签

J3 -
paragraph 段落文本标签只能放文本级别的标签，不能放容器标签，以及自己嵌套（容易出错）

img标签

J3 -
单标签
image 图片、图像可以在网页中显示图片，把他当做本文标签使用即可
属性
src：source 资源，设置图片显示的文件路径
width 宽
height 高
title 标题主要的作用是当用户的鼠标移动到图片上的提示文字
border 边框主要设置图片的外层宽度
alt 当图片没有图像的时候，用文字进行替代

a标签

J3 -
双标签文本标签
anchor 锚
俗称超链接，可以实现不用网页的跳转，或同一网页中不同位置进行跳转
属性
href：路径
title：鼠标移上去提示的文字

列表

J3 -
有一个黑色容器，容器中有一项一项小表展示网页内容
列表会将结构相同、内容相关、样式类似的结构，可以用列表来搭建
web领域：无序列表，有序列表，定义列表

无序列表

J3 -
在网页中搭建一个没有顺序的列表
两个标签结合使用ul和li，li标签不能脱离ul、单独使用
ul：UNorder list 表示一个列表的容器（大结构）
li：list item item（项）

有序列表

J3 -
在网页中搭建一个有顺序的列表
两个标签结合使用ol和li，li标签不能脱离ul、单独使用
ol order list

定义列表

J3 -
自定义标题和列表
有时候需要三个标签一起使用dl、dt、dd
dl：definition list 定义最外层的大结构
dt：definition item 拜师列表主题或者术语
dd：definition description 对于主题术语的描述
dl标签和dt、dd标签嵌套使用（父子关系） dt和dd（兄弟关系）

布局标签

J3 -
div和span
俗称盒子，双标签，容器标签
div：division 区域，跨度、分割
划分页面区域，辅助布局（可以将一些内容相识）
span：小区域，小跨度文本标签
可以用于局部调整

表格

J3 -
至少需要三个标签能弄成一个表格
table：表格 ——最外成的大框架
tr table row 表格的行定义表格内部的行
td table dock 表格单元格，每一行中的单元格
嵌套关系
table——tr——td

表单元素

可以让用户输入文字的一个小控件

form

J3 - 白起
双闭合标签
不是一个结构性的标签，是一个功能性的标签，可以将表单元素收集到的数据提供给服务器（后台），所有的表单元素都得书写在form标签的里面
作用：可以设置收集到的数据提交给谁，设置提交数据的方式
这个标签有两个重要属性
method：方法设置提交数据的方式（get post）
action：动作设置收集到的表单数据提交给谁（路径）
form 表单

input

J3 - 白起
单标签（只有开始没有结束）相当于一个特殊的文字
input有一个非常重要的属性type，根据不同的type值，去创建不同类型的表单元素
如果表单元素type的属性值为text，会创建一个文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
</head>
<body>
<form>
    <input type="text">
</form>
</body>
</html>