HTML基础学习

复制粘贴机QAQ

已于 2022-11-30 18:20:28 修改

阅读量92

点赞数

分类专栏： HTML&CSS 文章标签： html servlet 前端

于 2022-09-20 09:39:58 首次发布

本文链接：https://blog.csdn.net/weixin_44399428/article/details/126583515

版权

HTML&CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.简介

只有在body内的内容才会显示。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面的标题</title>
</head>
<body>
<h1>此处为标题，数字代表几级标题</h1>
<p>此处为段落</p>
</body>
</html>

2.基础

1）标题（Heading）是通过<h1> - <h6> 标签来定义的。

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>

2）段落是通过标签 <p> 来定义的。

<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>

3）链接是通过标签 <a> 来定义的。

<body>
<a href="http://www.csdn.net">这是一个链接使用了 href 属性</a>
</body>

4）图像是通过标签 <img> 来定义的。

<body>
<img src="/images/logo.png" width="258" height="39" />
</body>

3.元素


<!-- <p>元素 -->
<p>这是第一个段落。</p>
<!-- <body>元素 -->
<body>
<p>这是第一个段落。</p>
</body> 
<!-- <html>元素 -->
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>

4.属性

HTML 属性

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

常用的属性：class、id、style

5.标题

1）<hr> 标签在 HTML 页面中创建水平线。

<br>标签在 HTML 页面中换行，<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

2）注释

<!-- 这是一个注释 -->

6.文本格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>这个文本是加粗的</b>
<!-- 换行 -->
<br />

<strong>这个文本是加粗的</strong>

<br />

<big>这个文本字体放大</big>

<br />

<em>这个文本是斜体的</em>

<br />

<i>这个文本是斜体的</i>

<br />

<small>这个文本是缩小的</small>

<br />
这个文本包含
<sub>下标</sub>
<br />

这个文本包含
<sup>上标</sup>

</body>
</html>

7.链接

1）链接语法

<!DOCTYPE html>
<html>
    <head>
        <title>链接</title>       
    </head>
    <body>
        <a href="https://mp.csdn.net/mp_blog/manage/column/allColumnList">这是我的专栏</a>
    </body>
</html>

2）链接 - target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：target="_blank"，默认为目前窗口

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

3）链接- id 属性

id 属性可用于创建一个 HTML 文档书签。

8.头部

1）<head>元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

2）<base> 元素

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

3）<link> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

4）<style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

</head>

5）<meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

标签- 使用实例：

为搜索引擎定义关键词:

<!-- 为搜索引擎定义关键词 -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为网页定义描述内容 -->
<meta name="description" content="免费 Web & 编程 教程">
<!-- 定义网页作者 -->
<meta name="author" content="Runoob">
<!-- 每30秒钟刷新当前页面 -->
<meta http-equiv="refresh" content="30">

6）<script> 元素

7）head 元素

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件