HTML—基础知识

最新推荐文章于 2024-10-04 06:11:34 发布

是小明同学啊

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量396

点赞数

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

本文链接：https://blog.csdn.net/qq_51399192/article/details/126014670

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

常用的文本标签

写了head那么就一定有title标签。

meta标签用来描述一个网页文档的属性

标题的位置设置

<h1 align="left"> 一级标签</h1>
<h1 align="center"> 一级标签</h1>
<h1 align="right"> 一级标签</h1>

<p>是段落标签</p>

<hr/>是水平线标签
width宽度的单位是px，像素。
size高度的单位是px
例：<hr color="red" width="300px" size="20px" align="right">

<br>换行

<img src="1.webp">
注意：如果要使用名称访问图片需要图片的保存地址要与html文件平行，在资源文件中打开现有项中选择图片打开
属性：	src路径，alt图片的代替文本（当图片无法显示时代替的文字），width规定图像的宽度，height规定图像的高度，title鼠标悬停在图片上给与的提示
例：<img src="1.jpg" alt="美丽的景色" width="200px" height="100px" title="景色">
路径：子级关系：/1.jpg   同级关系：./1.jpg   父级关系：../1.jpg


<a>超文本链接</a>
中间的内容可以是文字，也可以是图片
属性：href=要跳转的地址
例：<a href="https://www.baidu.com/"> baidu <a>

常用的文本标签：

有序列表

<ol>
    <li>苹果</li>
    <li>橘子</li>
</ol>

打印：
1，苹果
2，橘子

属于ol的属性：
type，有5种序号形式：1，a，A，i，I

支持嵌套：
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <ol>
        <li>蔬菜</li>
        <li>
            水果
            <ol>
                <li>苹果</li>
                <li>西瓜</li>
                <li>草莓</li>
            </ol>
        </li>
        <li>肉类</li>
</body>
</html>

无序列表

排名不分先后

<ul>
    <li>苹果</li>
    <li>橘子</li>
</ul>

属于ul的属性：
type，有4种序号形式：disc(实心圆)，circle(空心圆)，square(小方块)，none（不显示）
例：<ul type="none">
    
同样支持嵌套
    
快捷键：
快速创建5个li标签：ul>li*5

表格

例子：
table表示表格，tr表示列，td表示行。一般每一行中的列数都是相等的。
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>

快捷键：
table>tr*4>td*4{单元格} + 回车 。这样就生成了4行4列的单元格

表格的属性：
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度

例子：<table border="1" width="400" height="200">

表格的单元格合并

水平合并：colspan （保留左边，删除右边）
垂直合并：rowspan  （保留上边删除下边）

例：
<body>
   <table border="1" width="400" height="40">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
        </tr>
    </table>
</body>
合并单元格4，5
合并单元格6，9
<td colspan="2">单元格4和单元格5</td> 并删除单元格5的相关行
<td rowspan="2">单元格6和单元格9</td> 并删除单元格9的相关行

完整：
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <table border="1" width="400" height="40">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td colspan="2">单元格4和单元格5</td>
 
            <td rowspan="2">单元格6和单元格9</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8td>
            
        </tr>
    </table>
</body>
</html>


如果要删除四个单元格1，2，4，5，
那么：<td colspan="2" rowspan="2">单元格1,单元格2，单元格4，单元格5</td>

form表单

表单一般包括用户填写信息的输入框和按钮。表单就是容器，它能够容纳各种各样的控件（输入框和按钮）
form的属性：action服务器地址，name表单名称，method提交数据到服务器的方式（get和post）
get：提交的数据url可以看到，提交少量的数据
post：提交的数据url看不到，提交大量的数据

完整的表单包括三个基本部分：表单标签，表单域，表单按钮。
例：
<body>

    <form>
        账号：
        <input type="text">
        <br>
        密码：
        <input type="password">
        <input type="submit" value="登录"> <!-- 使用value将默认的提交改成登录 -->
    </form>
</body>
出现一个输入框和一个提交按钮，提交的内容传给服务器。