HTML入门

最新推荐文章于 2024-08-09 15:44:45 发布

Ting-yu

最新推荐文章于 2024-08-09 15:44:45 发布

阅读量524

点赞数 8

文章标签： html 前端

本文链接：https://blog.csdn.net/2303_78892316/article/details/136461237

版权

本文介绍了HTML的基础知识，包括HTML的定义、标签结构、文件基本结构，以及常用的标签如标题、段落、换行、图片、超链接、表格、表单元素（input、select、textarea）和div与span的使用。此外，还推荐了开发工具VisualStudioCode。

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

1. HTML基础

1.1 什么是HTML

HTML是超文本标记语言。

超文本：比文本更强大，可以包含图片，链接等。

标记语言：由标签构成的语言。所以我们学习HTML就是在学习标签。

1.2 认识HTML标签

HTML代码都是由标签组成的，例如：

<h1>一级标题</h1>

标签名（body）放在 “ <>” 中
大部分标签都是成对存在，<> 为开始标签，</>为结束标签。
少数标签只有开始标签，称为 “ 单标签 ”
开始标签和结束标签中填写标签的内容。
标签可以有多个属性

我们可以在记事本写HTML代码，写完后修改后缀为HTML，然后用浏览器打开即可运行：

1.3 HTML文件基本结构

<html>
    <head>
        <title>第一个页面<title>
    </head>
    <body>
        hello world
    </body>
</html>

html标签是整个html文件的根标签（最顶层标签）
head标签中写页面的属性
body标签中写页面上显示的内容
title标签中写页面的标题
head和body是html的子标签，title是head的子标签

2. HTML快速入门

2.1 开发工具

虽然可以使用记事本写HTML代码，但是非常不方便，这里推荐使用Visual Studio Code

我们打开VS Code创建一个html文件输入 ! + 回车即可快速生成html文件格式

HTLM的注释符号是 <! -- 要注释的内容 -->

2.2 HTML常见标签

2.2.1标题标签

h1到h6为标题标签，数字越大字体越小

2.2.2段落标签

在HTML中，换行符，空格都会失效，如果需要分成段落，需要使用专门的标签

p标签表示一个段落：

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

2.2.3 换行标签

换行标签 <br/> 是一个单标签 :

这是一个换行<br/>
这是一个换行<br/>
这是一个换行<br/>

注意<br/>标签换行后上下不会有空隙

2.2.4 图片标签

img标签必须带有 src 属性，表示图片上的路径，这个路径可以是文件路径也可以是网络上的路径：

<img src = "https://pic1.zhimg.com/50/v2-1c0dc06731a92e82e56e2357affd66a6_hd.jpg?source=1940ef5c">

注意：当图片路径是文件路径时，默认路径位于HTML文件所在的位置，例如我把上面图片保存到对应html文件的同级目录下：

此时代码就可以变成：

<img src = "dog.png">

也可以写作绝对路径。

img标签还可以添加其他属性来控制图片大小等：

width/height：控制宽度高度单位是px（像素），高度和宽度一般改一个就行，另一个会等比例缩小，否则图片会变形
border：边框，参数是宽度的像素。一般使用CSS来设定
```
<img src = "dog.png" width = "200px" border = "5px">
```

2.2.5 超链接标签

超链接标签<a></a>必须有href属性，表示点击后跳转到哪个页面：

<a href = "http://www.baidu.com">百度</a>

点击即可跳转到百度。

链接分为外部链接和内部链接，外部链接即跳转到其他网站，内不链接即网站内部页面之间的链接，例如再创建一个test1.html，在test1中写以下代码：

<a href = "test.html">跳转到test</a>

我们点击即可跳转到test页面

不过我们发现这个页面是在test1这个页面打开的，这是因为<a></a>标签有个属性为target,这个属性的默认值是 _self 如果把它改为 _blank 就会在一个新的页面打开：

<a href = "test.html" target = "_blank">跳转到test</a>

如果开发时还不知道要跳转到哪个页面，可以使用#作为href的值占位：

<a href="#">空链接</a>

此时跳转的页面是当前页面。

2.3 表格标签

table标签：代表整个表格
tr标签：代表表格的一行
td标签：代表一个单元格
table 包含 tr，tr包含td

我们可以使用快捷键快速生成表格：

table>tr*3>td*2

输入上述代码后点击回车即可生成一个3行两列的表格模板：

    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

一个<tr></tr>代表一行，一个<td></td>代表一个单元格，我们给表格中添加一些数据：

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

我们还可以使用border标签加上边框

    <table border = "5px">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

2.4 表单标签

表单标签是让用户输入信息的重要途经

2.4.1 input标签

input标签用于创建各种输入控件，单行文本框，按钮，单选框，多选框。

属性：

type：type必须有，代表创建的控件类型取值有很多，button，checkbox，text，file，image，password，radio等。
name：给input起了个名字。
value：input中的默认值。
checked：默认被选中，用于单选按钮和多选按钮。

下面介绍一些常用的类型：

1. 按钮：

<input type = "button" value = "我是一个按钮">

2. 文本框

<input type = "text" placeholder = "输入文本">

placeholder代表占位符，即输入框中的提示

3. 密码框

密码框的输入内容不会显示出来。

4. 单选按钮

    <input type = "radio">A.这是一个选项<br/>
    <input type = "radio">B.这是一个选项<br/>
    <input type = "radio">C.这是一个选项<br/>

由于这个三个选项并不知道他们之间是一组，所以并不能达到单选的目的，此时我们就需要使用name属性，name相同的单选标签就会视为一组：

    <input type = "radio" name = "name">A.这是一个选项<br/>
    <input type = "radio" name = "name">B.这是一个选项<br/>
    <input type = "radio" name = "name">C.这是一个选项<br/>

此时就能达到单选功能了。

5. 提交按钮

提交按钮必须放在form标签中，form标签描述了要把数据按照什么方式提交到哪个页面中，关于form需要结合后端代码来进一步了解，我们后续再继续介绍。

    <form action = "test.html">
        <input type = "button" value = "我是一个按钮">
        <input type = "text" name = "文本" placeholder = "输入文本">
        <input type = "password" name = "password"><br/>
        <input type = "radio" name = "sex" value = "1">A.男<br/>
        <input type = "radio" name = "sex" value = "2">B.女<br/>
        <input type = "radio" name = "sex" value = "0">C.其他<br/>
        <input type = "submit" value = "提交">
    </form>

action属性代表要提交到的页面，我们提交的内容是以键值对形式的 name和value属性的内容

点击提交：

我们发现提交的信息出现在了test页面的url中。

2.4.2 select标签

select标签用于生成下拉菜单，下拉菜单的选项需要放在option标签中：

        <select>
            <option>深圳</option>
            <option>杭州</option>
            <option selected = "selected">北京</option>
        </select>

option中定义 selected = "selected"表示默认选中。

2.4.3 textarea标签

textarea标签用于生成一个文本域：

<textarea rows = "3" clos = "100">文本域</textarea>

生成一个额3行100列的文本域

2.5 无语义标签 div span

div标签,division的缩写,含义是分割
span标签,含义是跨度

div和span都是用来标识一部分内容的，为了方便对这块内容做一个整体的美化等等，下期介绍css时会详细解释。

例如上述代码，如果我想对某句话进行修饰，我们需要先选中这句话，此时就需要一个标签来帮助我们选中，于是我们给他们加上标签，就可以通过标签来选中

div会独占一行，span不会独占一行，

Ting-yu

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫