前端--HTML入门

Guozz_

已于 2022-10-30 21:59:15 修改

阅读量430

点赞数 1

分类专栏：前端文章标签：前端 html javascript

于 2022-10-25 16:57:07 首次发布

本文链接：https://blog.csdn.net/guozz_/article/details/127281101

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介

1.什么是HTML

HTML叫做超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2.什么是CSS

CSS是层叠样式表，是一种表示HTML文件样式的计算机语言，CSS 使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性

3.什么是JavaScript

JavaScript简称JS，是一种***解释型脚本***语言，在HTML主要用于添加交互动作

二、HTML基础内容

1.基本标签

(1)html标签

<html>标签告知浏览器这是一个 HTML 文档，<html>标签是 HTML 文档中最外层的元素

(2)head标签

<head>标签式所有头部元素的容器，必须包含文档的标题（title），可以包含脚本（script）、样式（css）、meta 信息

内部标签	说明
meta	提供了 HTML 文档的元数据
title	定义文档的标题，在所有 HTML 文档中是必需的
style	内部样式，定义 HTML 文档的样式信息。
link	外部样式，链接样式表。
script	包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。

对此只需要了解就可，前期只需要用到<style>和<link>标签

2.标题、段落及文本标签

(1)标题标签

<h1> 定义最大的标题。 <h6> 定义最小的标题。
下面展示 h1~h6标签代码。

<!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>标题</title>
</head>

<body>
    <h1>这是第一标题</h1>
    <h2>这是第二标题</h2>
    <h3>这是第三标题</h3>
    <h4>这是第四标题</h4>
    <h5>这是第五标题</h5>
    <h6>这是第六标题</h6>
</body>

</html>

在这里插入图片描述

(2)段落标签

<p>是块级元素，显示一个段落
下面展示段落标签代码

<!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>标题</title>
</head>

<body>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <p>这是第四个段落</p>
    <p>这是第五个段落</p>
</body>

</html>

在这里插入图片描述

(3)文本标签

标签	说明
b	定义粗体文本
em	定义着重文字
i	定义斜体字
samll	定义小号字
strong	定义加重语气
sub	定义下标字
suq	定义上标字
del	定义删除字

下面展示 文本标签代码

<!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>标题</title>
</head>

<body>
    <p>
        <b>这是一段粗体文本</b>
    </p>
    <p>
        <em>这是着重文字</em>
    </p>
    <p>
        <i>这是一段斜体字</i>
    </p>
    <p>
        <small>这是一段小号字</small>
    </p>
    <p>
        <strong>这是一段加重语气</strong>
    </p>
    <p>
        这是一段<sub>下标字</sub>
    </p>
    <p>
        这是一段<sup>上标字</sup>
    </p>
    <p>
        <del>这是一段删除字</del>
    </p>
</body>

</html>

在这里插入图片描述

3.常用块元素和行内元素

(1).块状元素

块级元素会独占一行，其宽度自动填满其父元素宽度
块级元素可以设置 width, height属性
块级元素即使设置了宽度，仍然是独占一行的
常见的块级元素

标签	描述
div	定义文档中的节
p	定义段落
h1-h6	定义HTML标题
form	定义供用户输入的 HTML 表单
table	定义表格
li	定义列表的项目
ol	定义有序列表

(2).行内/内联元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行,其宽度随元素的内容而变化
行内元素设置width, height无效
常见的行内元素

标签	描述
span	定义文档中的节
lable	定义 input 元素的标注
a	定义锚
input	定义输入控件
img	定义图像

4.列表

（1）常见的三种列表

有序列表

标签	描述
ol	定义有序列表
li	定义列表项

代码如下

<!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>列表</title>
</head>
<body>
    <ol>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
    </ol>
</body>
</html>

在这里插入图片描述

无序列表

标签	描述
ul	定义无序列表
li	定义列表项

<!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>列表</title>
</head>
<body>
    <ul>
      <li>这是一个无序列表</li>
      <li>这是一个无序列表</li>
      <li>这是一个无序列表</li>
    </ul>
</body>
</html>

在这里插入图片描述

自定义列表

标签	描述
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

代码如下

<!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>列表</title>
</head>
<body>
    <dl>
        <dt>我的电脑</dt>
        <dd>C盘</dd>
        <dd>D盘</dd>
        <dd>E盘</dd>
        <dt>控制面板</dt>
        <dd>防火墙</dd>
        <dd>管理工具</dd>
        <dd>默认程序</dd>
        </dl>
</body>
</html>

在这里插入图片描述

5.表格

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性

代码如下

<!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>表格</title>
</head>
<body>
    
    <table border="2">
        <caption >表格标题</caption>
            <th>表头1</th>
            <th>表头2</th>
            <tr>
                <td>行1，列1</td>
                <td>行2，列2</td>
            </tr>
            <tr>
                <td>行2，列1</td>
                <td>行2，列2</td>
            </tr>
    </table>
</body>
</html>

在这里插入图片描述

6.图像

图像标签img是一个自闭合标签，常用的有三个属性

属性	描述
src	规定显示图像的 URL，就是图像的文件地址
alt	规定图像的替代文本，就是图像不显示的时候显示的文字
title	鼠标移到图片上的提示文字

插入图片代码

<img src="图像文件地址" alt="图像显示不出来的文字"  title="鼠标移到图片上的文字">

图像地址有相对路径与绝对路径之分
请自行搜寻理解

7.链接

<a href="链接地址" target="链接窗口打开方式">链接文本</a>

target属性	描述
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

一般情况：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线

8.表单

常用表单标签：

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
select	定义了下拉选项列表
option	定义下拉列表中的选项(配合select 使用)

（1）input标签

input代码描述

     <input type="表单类型" value="值" name="命名">

属性	说明
text	单行文本框
password	密码文本框
button	按钮
submit	提交按钮
reset	重置按钮
image	图像提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

（2）textarea标签

<textarea rows="10" cols="30"></textarea>

属性	说明
cols	规定文本区域内可见的宽度
rows	规定文本区域内可见的行数
name	规定文本区域的名称
placeholder	规定一个简短的提示，文本区域期望的输入值
maxlength	规定文本区域允许的最大字符数

（3）select标签

select和option标签配合使用
select标签代码

<select>
    <option value="">选项1</option>
    <option value="">选项2</option>
    <option value="">选项3</option>
    <option value="">选项4</option>
</select>

属性	说明
autofocus	规定在页面加载时下拉列表自动获得焦点
disabled	当该属性为 true 时，会禁用下拉列表
multiple	当该属性为 true 时，可选择多个选项
name	定义下拉列表的名称
required	用户在提交表单前必须选择一个下拉列表中的选项
size	规定下拉列表中可见选项的数目