HTML学习及总结

最新推荐文章于 2022-11-07 22:36:39 发布

LIKE_109

最新推荐文章于 2022-11-07 22:36:39 发布

阅读量588

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45999753/article/details/114597953

版权

HTML学习及总结

1. HTML简介
2.文档结构及元素
3. 总结

1. HTML简介

HTML（Hyper Text Markup Language）英文翻译即为超文本标记语言。HTML 不是编程语言，而是标记语言，是我们制作网页中的基础。

2.文档结构及元素

2.1 名称及结构

使用HTML来新建网页的时候需要新建一个后缀名为 .html的文件，并且在里面用相应语言编写就能完成一个很简单网页。
```
 本博客使用Visual Studio Code来完成练习
```
HTML 文档中由一个个的元素依次或者嵌套组成，并且元素均为小写。
这里介绍一下相关的概念：

开始标签（Opening tag）：包含元素的名称，被左、右角括号所包围。表示元素从这里开始或者开始起作用。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。
内容（Content）：元素的内容。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素还分为区块元素和内联元素。区别就是区块元素开始和结束都另起一行，内联元素一个接一个。
接下来我们将依次介绍使用常见的元素。

2.2 元素属性

属性包含元素的额外信息，可以让我们的对网页的各种需求得以实现
属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 “” 引起来。

2.3 元素使用介绍

2.3.1 空元素

只有开始标签而没有结束标签的元素，如：
<br>：换行
<hr>：分割线
<input>：输入框。其中属性type可以设置为文本输入框或者密码输入框
<img>：显示图片。其中属性src包含图片网址（路径），alt是获取图片出现问题时显示的文字，width和height就是图片的长度和宽度。

2.3.2 `<html>`元素

<html></html>: 这个元素就是整个HTML 文档的开始和结尾，所有的其他元素就要嵌套到这个元素当中。

2.3.3 `<head>`元素

<head></head>:这个元素包含的就是你的网页的关键字也就是页面标题，不出现到网页内但是却是网页的标签

2.3.4 `<title>`元素

<title></title>：其中包含了网页标题。
输入代码：

<head>
    <title>我是页面标题</title>
</head>

在这里插入图片描述

2.3.5 `<body>`元素

<body></body>：其中包含了网页上的内容。
输入代码：

<body>
    <h1>我是标题</h1>
    <p>我是内容</p>
</body>

在这里插入图片描述

2.3.6 `<h1>`元素

<h1></h1>：中间的内容就是标题名称。标题元素分为<h1> ~ <h6>一共六种。
输入代码：

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

在这里插入图片描述

2.3.7 `<a>`元素

<a> </a>：超链接元素也有对应的语法。其中属性href中包含跳转的网址，target可以设置在当前页面打开还是新的标签页打开。也可以在当前网页中其他元素设置一个id,然后在属性href中输入#id即可当作锚点使用（比如回到顶端）。
输入代码：

<a href="https://www.4399.com/" target="_blank">放松一下</a>

点击体验：放松一下

2.3.8 `<table>`元素

<table></table>：表格元素可以来创建表格。<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
输入代码：

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>50</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>94</td>
        </tr>
    </table>
</body>

在这里插入图片描述

2.3.9 `<ul><ol>`元素

<ul></ul><ol></ol>:分别为无序列表和有序列表。<li></li>代表每一行
输入代码：

<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</body>

在这里插入图片描述

2.3.10 `<pre>`元素

<pre></pre>:预设格式，在<p>元素下空格显示不出来，而预设格式就可以显示像诗句、歌词这样的格式。

3. 总结

<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>等等这些元素之间灵活的运用，就可以建立一个不错的网址，而在之后再运用CSS对网页进行美化，才能称为“真正”的网页

（本文参考棋哥的教学网站）

LIKE_109

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习及总结

HTML学习及总结1. HTML简介2.文档结构及元素2.1 名称及结构2.2 元素属性2.3 元素使用介绍2.3.1 空元素2.3.2 <html>元素2.3.3 <head>元素2.3.4 <title>元素2.3.5 <body>元素2.3.6 <h1>元素2.3.7 <a>元素2.3.8 <table>元素2.3.9 <ul><ol>元素2.3.10 <pre>元素3. 总结1
复制链接

扫一扫