当前位置：首页 > article >正文

【自用】HTML笔记

article 2024/11/15 0:42:57

看视频做的笔记：https://www.bilibili.com/video/BV1eb411n7AL?p=25&vd_source=774b01e6e991da71d49ca097f52b69ee

第一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    Hello World!
</body>
</html>

注：head标签里一般放一些引用文件。
body标签里放具体的内容。
在这里插入图片描述

一、常用标签

1.1段落标签

段落标签用<p>段落内容</p>
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
</body>
</html>

在这里插入图片描述

1.2 不同的标题标签

标题一标签用<h1>标题一</h1>
标题二标签用<h2>标题二</h2>
标题三标签用<h3>标题三</h3>
以此类推。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <h1>标题一</h1>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    <h2>标题二</h2>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    <h3>标题三</h3>
</body>
</html>

在这里插入图片描述

1.3 换行标签（单标签）

使用<br/>
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <h1>标题一</h1>
        <p>段落一</p>
        <br/>
        <br/>
        <p>段落二</p>
        <p>段落三</p>
    <h2>标题二</h2>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    <h3>标题三</h3>
</body>
</html>

在这里插入图片描述

1.4 分割线标签（单标签）

使用<hr/> 直接放在需要分隔开的地方，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <h1>标题一</h1>
        <p>段落一</p>
        <hr/>
        <p>段落二</p>
        <hr/>
        <p>段落三</p>
    <h2>标题二</h2>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
    <h3>标题三</h3>
</body>
</html>

在这里插入图片描述

1.5 a标签（可跳转）

使用<a></a>
例如，添加一个百度的可跳转链接

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

效果：
在这里插入图片描述
如果希望不跳转到任何地方，href中内容可替换为#，例如：

<a href="#">百度</a>

1.6 在其他标签中使用标签link

例如，希望标题一可以跳转到百度，则可以在h1标签中嵌入a标签以及将对应的href属性赋值为百度的网址。代码如下：

<h1><a href="https://www.baidu.com">标题一</a></h1>

在这里插入图片描述

1.7 网页的title标签

只需要在head标签中添加一个title标签即可。

<head>
    <meta charset="UTF-8">
    <title>网页的头标题</title>
</head>

在这里插入图片描述

1.8 添加注释

使用 例如：

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

1.9 显示图片

在body中使用标签imgs，例如：

<img src="123.jpg" alt="漩涡鸣人">

src表示源路径，此时为将123.jpg与该html代码放在同一目录下，alt为当把鼠标放到图片上时显示的内容，如果没有显示也不要奇怪，只是不同浏览器显示方式有所不同。
在这里插入图片描述
可以看到此时，图片过大，可以修改属性为：

<img src="123.jpg" alt="漩涡鸣人" width="400px" height="200px">

注：px为像素单位。
在这里插入图片描述

1.10 表格

使用table标签，tr表示行，td表示列，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <!--border为表边界的宽度-->
    <table border="2">
        <!--tr表示行,td表示列-->
        <tr>
            <td>id</td>
            <td>name</td>
            <td>job</td>
        </tr>

        <tr>
            <td>1</td>
            <td>张三</td>
            <td>医生</td>
        </tr>

        <tr>
            <td>2</td>
            <td>李四</td>
            <td>教师</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

1.11 有序列表和无序列表

无序列表使用标签ul，然后在列表里嵌入li标签。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <ul>
        <li>第一行无序列表</li>
        <li>第一行无序列表</li>
        <li>第一行无序列表</li>
    </ul>
</body>
</html>

在这里插入图片描述
有序列表，只需把ul改为ol。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <ul>
        <li>第一行无序列表</li>
        <li>第一行无序列表</li>
        <li>第一行无序列表</li>
    </ul>

    <ol>
        <li>第一行有序列表</li>
        <li>第一行有序列表</li>
        <li>第一行有序列表</li>
    </ol>
</body>
</html>

1.12 自定义列表

使用dl表示自定义标题，dt+dd为一组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <dl>
        <dt>标题一</dt>
        <dd>标题一下的内容</dd>

        <dt>标题二</dt>
        <dd>标题二下的内容</dd>

        <dt>标题三</dt>
        <dd>标题三下的内容</dd>
    </dl>
</body>
</html>

在这里插入图片描述

二、常用form表单元素

创建一个form标签，然后在标签内添加内容。

2.1 输入文本框（type=text）

创建一个可见输入文本框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=text为文本框-->
        <input type="text">
    </form>
</body>
</html>

可以在文本框里输入一些数据：
在这里插入图片描述
如果需要给文本框添加一个标签，则需要添加一个label标签。并在label标签里使用for绑定文本框的id，并且在label标签里写需要显示的内容，比如要显示成name：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=text为文本框-->
        <label for="name-input">name</label>
        <input id="name-input" type="text"/>
    </form>
</body>
</html>

在这里插入图片描述
如果需要输入文本框里的数据是不可见的，则需要将input的type改为“password”。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=text为文本框-->
        <label for="name-input">name</label>
        <input id="name-input" type="text"/>
        <br/>  <!--br为换行标签-->
        <label for="pwd-input">password</label>
        <input id="pwd-input" type="password"/>
    </form>
</body>
</html>

在这里插入图片描述

2.2 单选框（type=radio）

例如，选择男女性别时用到单选框。name相同表示他们为同一组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=radio为单选框-->
        <label for="h-male">男</label>
        <input id="h-male" type="radio" name="sex"/>
    
        <label for="h-female">女</label>
        <input id="h-female" type="radio" name="sex"/>
    </form>
</body>
</html>

在这里插入图片描述
如果需要隔开一定距离，可以在label中添加： 
一个  代表一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=radio为单选框-->
        <label for="h-male">&nbsp;&nbsp;男</label>
        <input id="h-male" type="radio" name="sex"/>
    
        <label for="h-female">&nbsp;&nbsp;女</label>
        <input id="h-female" type="radio" name="sex"/>
    </form>
</body>
</html>

在这里插入图片描述

2.3 多选框（type=checkbox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=radio为单选框-->
        <label for="h-football">&nbsp;&nbsp;足球</label>
        <input id="h-football" type="checkbox" name="hobbies"/>

        <label for="h-basketball">&nbsp;&nbsp;篮球</label>
        <input id="h-basketball" type="checkbox" name="hobbies"/>

        <label for="h-pingpong">&nbsp;&nbsp;乒乓球</label>
        <input id="h-pingpong" type="checkbox" name="hobbies"/>
    </form>
</body>
</html>

在这里插入图片描述

2.4 普通按钮和提交按钮

提交按钮可以是提交整个表单的内容，注意提交按钮的type=submit，可以这样写：

<input type="submit" value="提交">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=radio为单选框-->
        <label for="h-football">&nbsp;&nbsp;足球</label>
        <input id="h-football" type="checkbox" name="hobbies"/>

        <label for="h-basketball">&nbsp;&nbsp;篮球</label>
        <input id="h-basketball" type="checkbox" name="hobbies"/>

        <label for="h-pingpong">&nbsp;&nbsp;乒乓球</label>
        <input id="h-pingpong" type="checkbox" name="hobbies"/>

        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述
普通按钮可以写在表单外，例如创建一个普通按钮，并让其单击时跳转到百度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <!--id表示给其取一个唯一的名字，type=radio为单选框-->
        <label for="h-football">&nbsp;&nbsp;足球</label>
        <input id="h-football" type="checkbox" name="hobbies"/>

        <label for="h-basketball">&nbsp;&nbsp;篮球</label>
        <input id="h-basketball" type="checkbox" name="hobbies"/>

        <label for="h-pingpong">&nbsp;&nbsp;乒乓球</label>
        <input id="h-pingpong" type="checkbox" name="hobbies"/>

        <input type="submit" value="提交">

    </form>
    <button onclick="javascript:window.location='https://www.baidu.com'">普通按钮</button>
</body>
</html>

在这里插入图片描述

2.5 多行文本框（textarea）

创建一个3行10列的文本框，并用p标签分成不同的段落。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <p>
            <textarea  cols="10" rows="3"></textarea>
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

在这里插入图片描述

2.6 单选下拉框

使用select标签，选项使用option标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <p>
            <label for="province">省份&nbsp;&nbsp;</label>
            <select name="" id="province">
                <option value="">广东</option>
                <option value="">广西</option>
                <option value="">湖南</option>
                <option value="">湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

在这里插入图片描述
如果希望下拉列表有一个默认值，也就是初始时显示的省份，以默认显示湖北为例，可以在湖北所在的标签内添加一个“selected”，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <form action="">
        <p>
            <label for="province">省份&nbsp;&nbsp;</label>
            <select name="" id="province">
                <option value="">广东</option>
                <option value="">广西</option>
                <option value="">湖南</option>
                <option value="" selected>湖北</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
</body>
</html>

在这里插入图片描述

三、划分不同区块

例如，想要做成报纸一样，左右，垂直方向都要有布局，这时就需要使用div标签。

3.1 上下分段布局（div）

h1表示是标题，div划分为某一块，可以设置style属性来决定区块的宽和高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width: 400px;">
        <p>
            “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
            ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
            显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
        </p>
    </div>

    <div style="width: 400px;">
        <p>
            高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。
            党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，
            民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。
        </p>
    </div>
</body>
</html>

在这里插入图片描述

3.2 内联标签span

使用span标签可以让内容水平分布。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width: 400px;">
        <p>
            “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
            ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
            显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
        </p>
    </div>
    <span>
        第一部分
    </span>
    <span>
        第二部分
    </span>
</body>
</html>

在这里插入图片描述
由于span标签是一种内联标签，所以可以嵌入段落里，例如要将上面的一个段落里的“高质量发展”显示成红色，则可以这样修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width: 400px;">
        <p>
            “民营企业如何参与新发展格局建设，如何实现转型升级、<span style="color:red">高质量发展</span>，是新时代新征程上必须思考的问题。
            ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
            显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
        </p>
    </div>
    <span>
        第一部分
    </span>
    <span>
        第二部分
    </span>
</body>
</html>

在这里插入图片描述

3.3 float的使用

需要将div的区块里的style做一些修改。需要添加一个float属性，并且设置成靠左还是靠右布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width: 400px;float: left">
        <p>
            “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
            ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
            显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
        </p>
    </div>

    <div style="width: 400px;float: left">
        <p>
            高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。
            党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，
            民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。
        </p>
    </div>
</body>
</html>

在这里插入图片描述

3.3.1 float特性1

div之外可以再嵌套div，并且可以将不同区块设置不同的背景颜色便于观察。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width:900px;background-color: grey">
        <div style="width: 400px;float: left; background-color: green">
            <p>
                “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
                ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
                显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
            </p>
        </div>

        <div style="width: 400px;float: left; background-color: cadetblue">
            <p>
                高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。
                党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，
                民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。
            </p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

3.3.2 float特性2-采用百分比约束布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width:900px;height:500px;background-color: grey">
        <div style="width: 50%;float: left; background-color: green">
            <p>
                “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
                ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
                显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
            </p>
        </div>

        <div style="width: 49%;float: left; background-color: cadetblue">
            <p>
                高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。
                党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，
                民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。
            </p>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

3.4 图片也可以使用float方式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--这是一条注释-->
    <title>网页的头标题</title>
</head>
<body>
    <h1>民营企业要积极投身高质量发展</h1>
    <div style="width:900px;height:500px;background-color: grey">
        <img src="123.jpg" alt="旋涡鸣人" style="width:500px;height:300px;float: left">
        <div style="width: 50%;float: left; background-color: green">
            <p>
                “民营企业如何参与新发展格局建设，如何实现转型升级、高质量发展，是新时代新征程上必须思考的问题。
                ”一位民营企业家在近日举办的中国民营经济论坛上给出这样一道“思考题”。
                显然，民营经济已经成为推动我国发展不可或缺的力量，要引导民营经济积极投身高质量发展。
            </p>
        </div>

        <div style="width: 49%;float: left; background-color: cadetblue">
            <p>
                高质量发展是全面建设社会主义现代化国家的首要任务。民营企业家是我们“自己人”，民营企业投身高质量发展，是时代赋予的新使命。
                党中央高度重视民营经济发展，近年来出台了一系列扶持民营经济发展举措，全社会比以往任何时候都更加重视民营经济发展，
                民营企业迎来了更广阔的发展机遇，民营企业家应该有投身高质量发展的自觉。
            </p>
        </div>
    </div>
</body>
</html>