HTML基础（一）

最新推荐文章于 2024-09-24 10:17:01 发布

AquilaEAG

最新推荐文章于 2024-09-24 10:17:01 发布

阅读量135

点赞数

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

本文链接：https://blog.csdn.net/weixin_43202635/article/details/121879652

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的基本构造，包括元素结构（如<!DOCTYPE>, <html>, <head>, <title>, <body>等），以及关键元素如<h1>、<p>和空元素<br>。讲解了HTML属性的使用，并区分了块级和内联元素，如<div>和<span>在布局中的作用。还涉及了CSS的应用，表单元素和JavaScript脚本的基础知识，适合初学者了解HTML核心概念。

摘要由CSDN通过智能技术生成

1.HTML实例

HTML 指的是超文本标记语言: HyperText Markup Language
在这里插入图片描述

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

在这里插入图片描述

2.HTML元素

在这里插入图片描述

注意：
（1）<br> 就是没有关闭标签的空元素（<br> 标签定义换行）；
（2）HTML 标签对大小写不敏感：<P> 等同于 <p>。

3.HTML属性

HTML 元素可以设置属性：

属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

Remark提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

在这里插入图片描述
查看完整的HTML属性列表: https://www.runoob.com/tags/html-reference.html

4.HTMLCSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 是在 HTML 4 开始使用的，是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

CSS详细教程：https://www.runoob.com/css/css-tutorial.html

5.HTML区块

HTML 可以通过<div> 和<span>将元素组合起来。

在这里插入图片描述

**HTML 区块元素**
大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

**HTML 内联元素**
内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

**HTML <div> 元素**
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

**HTML <span> 元素**
HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

6.HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

在这里插入图片描述

7.HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件

HTML <noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

只有在浏览器不支持脚本或者禁用脚本时，才会显示元素中的内容：

HTML<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：