html学习笔记

FFZH00

已于 2023-04-08 13:22:41 修改

阅读量374

点赞数

文章标签： html Powered by 金山文档

于 2023-03-11 10:58:31 首次发布

本文链接：https://blog.csdn.net/FFZH00/article/details/129418809

版权

简介

html又叫做超文本标记语言，为网页提供了结构和内容。

示例1如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <p>hello world!</p>
</body>
</html>

<!DOCTYPE ***>为文档声明标签，用来指定所写代码为哪种html格式，一般可直接用<!DOCTYPE html>指定为html5格式；

<html lang="***">表明语言是什么，en为英文，zh-CN为中文；

<head> 标签用于定义文档的头部，它是所有头部元素的容器;

<meta charset="***">，用来指定字符集，例如ASCII码、汉文编码字符集GB2312，一般使用Unicode 万国码字符编码-UTF-8;

<title>标签用来显示网页的标题信息；

<body>用来显示网页内容。

其在浏览器显示结果如下：

html标签及用途

双标签：<标签属性="属性值"> </标签>;

单标签：<标签属性="属性值"/>。

标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

其在浏览器显示结果如下：

可见，标题独占一行，且都加粗，不同级别标题文字大小不同。

段落

双标签<p> </p>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>这是第一段文本，66666666666666666666666666666666666666</p>
    <p>这是第二段文本，888888888888888888888888888888888888888</p>
</body>
</html>

其在浏览器显示结果如下：

可见，不同段落具有一定间距。

换行

单标签<br>或<br/>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行</title>
</head>
<body>
    <p>这是第一段文本，<br>66666666666666666666666666666666666666</p>
    <p>这是第二段文本，<br>888888888888888888888888888888888888888</p>
</body>
</html>

其在浏览器显示结果如下：

可见，换行的间距比不同段落间距小。

水平线

单标签<hr>，其标签属性有size：大小、color：颜色、width：宽度、align：位置、noshade：不需要属性值，用来去除阴影。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
    <hr size="1" color="blue" width="900px" align="left">
    <hr size="10">
    <hr size="10" noshade="">
</body>
</html>

其在浏览器显示结果如下：

文本修饰标签

加粗

<b> </b>或<strong> </strong>，一般使用strong，其更突出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加粗</title>
</head>
<body>
    <b>这是一段文本，66666666666666666666666666666666666666</b>
    <br>
    <strong>这是一段文本，66666666666666666666666666666666666666</strong>
</body>
</html>

其在浏览器显示结果如下：

倾斜

<i> </i>或<em> </em>，一般用em，其更突出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倾斜</title>
</head>
<body>
    <i>这是一段文本，66666666666666666666666666666666666666</i>
    <br>
    <em>这是一段文本，66666666666666666666666666666666666666</em>
</body>
</html>

其在浏览器显示结果如下：

删除线

<s> </s>或<del> </del>，一般使用del。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除线</title>
</head>
<body>
    <p>不要<s>999</s>，不要<del>99</del>，9.9包邮带回家！</p>
</body>
</html>

其在浏览器显示结果如下：

下划线

<u> </u>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下划线</title>
</head>
<body>
    <p><u>9.9</u>包邮带回家！</p>
</body>
</html>

其在浏览器显示结果如下：

上下标

上标<sup> </sup>，下标<sub> </sub>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下标</title>
</head>
<body>
    <p>深度学习卷积神经网络-AlexNet<sup>[1]</sup>、残差神经网络-ResNet<sub>[2]</sub></p>
</body>
</html>

其在浏览器显示结果如下：

字体

<font> </font>，标签属性包括size：字体大小；color：字体颜色；face：字体样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
</head>
<body>
    <p><font size="10" color="blue" face="楷体">深度学习卷积神经网络</font></p>
</body>
</html>

其在浏览器显示结果如下：

div标签

用来划分页面区域，独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
</head>
<body>
    <div>6666666</div>
    <div>6666666</div>
    <div>6666666</div>
</body>
</html>

其在浏览器显示结果如下：

span标签

在对文本独立修饰时，内容多宽就占用多宽距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span</title>
</head>
<body>
    <h1><span style="color:blue">6666666</span><span style="color: aqua;">888</span></h1>
</body>
</html>

其在浏览器显示结果如下：

本例中加样式是为了做区分，以看出空间距离与内容宽度一样。

列表

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>昨天</li>
        <li>今天</li>
        <li>明天</li>
    </ul>
</body>
</html>

其在浏览器显示结果如下：

注意：

li里可以放标签，ul里只能放li。

默认为黑色实心圆点。

ul包括属性：

type：默认"disc"——实心圆点，square——实心方块，circle——空心圆，none——无。

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
    <ol type="I" start="2">
        <li>昨天</li>
        <li>今天</li>
        <li>明天</li>
    </ol>
</body>
</html>

其在浏览器显示结果如下：

可见，其序号为从2开始的罗马数字。

注意：

li里可以随意放标签，ol里只能放li。

当不填写属性及属性值时，默认序号从1开始。

ol包括属性：

type：若为1，则以1、2、3排序；若为a，则以a、b、c排序；若为Ⅰ，则以Ⅰ、Ⅱ、Ⅲ排序；若为A，则以A、B、C排序；若为i，则以i、ii、iii排序。

start:表示从哪个开始，取值只能为数字，若以小写字母排序，从27开始，则序号为aa、ab、ac，以此类推。

自定义列表

一般用于图文混合列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>昨天</dt>
        <dd>今天</dd>
    </dl>
    <dl>
        <dt>昨天</dt>
        <dd>今天</dd>
    </dl>
</body>
</html>

其在浏览器显示结果如下：

图片

单标签<img>

包括属性：

src:图片地址。

当图片与html文件在同级目录时:

src="1.jpg"；

src="./1.jpg"；

src="D:\前端\1\1.jpg"（绝对路径一般不会用，当换机器运行会出现错误）。

当html文件与图片所在文件夹为同一级：

src="img/2.jpg";

src="./img/2.jpg"

当html所在文件夹与图片所在文件夹为同一级：

src="../1/img1/3.jpg"(../表示到与当前所在文件夹同一级的位置）

alt:当图片加载失败时显示文字。

width:图片宽度。

height:图片高度。

当只设置宽度（高度）时，图片高度（宽度）会根据图片比例随之改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
</head>
<body>
    <img src="../img/1.jpg" width="100" alt="图片" title="宽度为100的图片">
    <img src="../img/2.jpg" height="50" alt="图片">
    <img src="../img1/3.jmg" alt="这是张图片">
</body>
</html>

其在浏览器显示结果如下：

超链接

实现不同页面跳转。

<a href="要跳转的页面路径" title="鼠标停上去显示信息" target="在何处跳转页面">内容</a>。

target:默认为"_self"，当前窗口跳转；"_blank"，新窗口打开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.baidu.com/" title="点击即可打开新窗口跳转百度" target="_blank">百度一下</a>
</body>
</html>

其在浏览器显示结果如下：

可见，点击“百度一下”，在浏览器新窗口打开了百度页面。

表格

<table> </table>。

<table> </table>中<th> </th>：定义表格的标题栏（文字加粗）。

<table> </table>中有几个<tr> </tr>表示表格中有几行，<tr> </tr>中有几个<td> </td>，表示这一行有几个单元格。

table包含属性：

width：表格宽度，属性值可为"**px"或"**%"，其中百分比相对于父元素宽度百分比，比如表格的父元素为<body>，则宽度占窗口**%；若表格父元素为<span >，则占span所占空间宽度**%。

height：表格高度，属性值可为"**px"或"**%"，但窗口默认高度为0。

border：外边框线宽度，属性值填数值即可。

bordercolor：外边框颜色。（不推荐，尽量不要使用，可在css完成）

bgcolor：表格背景颜色。（不推荐，尽量不要使用，可在css完成）

background：为整个表设置背景图像或仅为一个单元设置背景图像。（不推荐，尽量不要使用，可在css完成）

align：表格水平位置，为"left"时居左，"center"居中，"right"居右。

cellspacing：单元格与单元格间距。

cellpading：单元格与内容间距。

tr属性：

height：高度。

bgcolor：背景颜色。

align：文字水平对齐。

valign：文字垂直对齐，"top"文字在顶部，"middle"文字在垂直中部，"bottom"文字在垂直底部。

td属性：

width：宽度。（若一个单元格设置高度，影响整列；若一个单元格设置宽度，影响整行）

height：高度。

bgcolor：背景颜色。

align：文字水平对齐。

valign：文字垂直对齐，"top"文字在顶部，"middle"文字在垂直中部，"bottom"文字在垂直底部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="50%" height="500px" border="1" bordercolor="green" bgcolor="pink" align="center" cellspacing="3" cellpading="10">
        <tr height="200" bgcolor="blue" align="right" valign="center">
            <td width="200" bgcolor="red" align="center" valign="bottom">1</td>
            <td>2</td>
        </tr>
        <tr align="center" valign="center">
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

其在浏览器显示结果如下：

合并单元格

colspan：将两个或多个列合并为一个列。

rowspan：合并两行或更多行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并单元格</title>
</head>
<body>
    <table border="1" width="300" height="300">
        <tr>
            <td colspan="2">1</td>
            <!--<td>2</td>-->
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <!-- <td>9</td> -->
        </tr>9
    </table>
</body>
</html>

其在浏览器显示结果如下：

表单

用来收集用户信息。

<form>

<input>

</form>

form属性：

action：表示向何处发送表单数据

method："get"、"post"。

input属性：

type:

type="text" 文本框

type="password" 密码框

type="submit" 提交框，跟<button> </button>一样

type="button" 按钮框

type="reset" 重置框

placeholder：描述输入字段预期值的简短提示信息。

name:只有在name设置的情况下，提交表单，用户输入的数据才会发送到服务器。

value:显示文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="https://www.baidu.com" method="post">
        用户信息:<input type="text" placeholder="请输入用户信息" name="username">
        <br>
        密码：<input type="password" placeholder="请输入密码" name="mima">
        <br>
        <input type="submit" value="登录">
        <button type="reset">清空</button>
    </form>
</body>
</html>

其在浏览器显示结果如下：

<pre> </pre>预格式化标签，保留空格、tab、回车。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <pre>     xnuwffwhf
        xscsc
    </pre>
</body>
</html>

在浏览器显示如下：

表单进阶

单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>满意度如何</div>
    <div>
        <input type="radio" name="a" checked="checked">非常满意
    </div>
    <div>
        <input type="radio" name="a">满意
    </div>
    <div>
        <input type="radio" name="a">一般
    </div>
    <div>
        <input type="radio" name="a">不满意
    </div>
    <div>性别</div>
    <div>
        <input type="radio" name="b" id="man">
        <label for="man">男</label>
    </div>
    <div>
        <input type="radio" name="b" id="woman">
        <label for="woman">女</label>
    </div>
</body>
</html>

当checked="checked"或checked，默认选择该选项；

当name属性值一样，则为同一问题的选项；

当<label for="man">男</label>，则点击文字也可以选择选项。

多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>兴趣爱好</div>
    <div>
        <input type="checkbox" name="a">抽烟
        <input type="checkbox" name="a" checked="checked">喝酒
        <input type="checkbox" name="a" checked>烫头
    </div>
    <div>擅长技术</div>
    <div>
        <input type="checkbox" name="b" id="html">
        <label for="html">html</label>
        <input type="checkbox" name="b" id="css">
        <label for="css">css</label>
        <input type="checkbox" name="b" id="js">
        <label for="js">js</label>
    </div>
</body>
</html>

上传文件和隐藏字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <div>截图说明</div>
        <div>
            <input type="file" name="" id="">
        </div>
        <div>图片按钮</div>
        <form action="">
            <input type="image" src="submit.jpg">
        </form>
    </div>
    <div>
        <div>隐藏按钮</div>
        <input type="hidden" name="" id="" value="带给后端的个人信息">
    </div>
    <div>禁用，只读</div>
    <div>
        <button disabled="disabled">注册</button>
        <br>
        <input type="radio" disabled>不满意
        <br>
        <input type="text" disabled value="1111111">
        <input type="text" readonly value="22222">
    </div>
</body>
</html>

input type="file"表示上传文件；

form里input type="image"表示可以点击图片提交；

input type="hidden"表示隐藏

disabled="disabled"或disabled表示禁用

readonly表示只读。

下拉菜单

select属性：

size="3"表示显示3个选项（可以下拉看其他选项）；

multiple表示多选。

option属性：

value:提供给后端要用的value值；

select：默认选择，只能选择一个，不然会后边覆盖前边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <div>收货地址</div>
        <select size="3">
            <option value="bj">北京</option>
            <option value="tj">天津</option>
            <option value="hb" selected>河北</option>
            <option value="sd">山东</option>
            <option value="js">江苏</option>
        </select>
    </div>
    <div>
        <select size="3" multiple>
            <option>苹果</option>
            <option>香蕉</option>
            <option>橘子</option>
            <option>葡萄</option>
            <option>菠萝</option>
        </select>
    </div>
</body>
</html>

文本域

textarea

cols="10"输入显示列数

rows="10"输入显示行数

若对textarea设置宽和高则需要CSS。

placeholder=""里边为预置提示文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <textarea cols="10" rows="10" placeholder="请输入你的意见"></textarea> 
    </div>
    <div>
        <textarea cols="10" rows="10" placeholder="请输入你的意见">意见是：</textarea> 
    </div>
</body>
</html>

字段集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="a">男
        <br>
        <input type="radio" name="a">女
    </fieldset>
    <fieldset>
        <legend>爱好</legend>
        <input type="checkbox" name="b">抽烟
        <br>
        <input type="checkbox" name="b">喝酒
    </fieldset>
</body>
</html>

特殊符号的表示

尖角号

用<表示左尖角号，用>表示右尖角号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尖角号</title>
</head>
<body>
    <p>表示换行的方式是&lt;br&gt;</p>
</body>
</html>

其在浏览器显示结果如下：

空格

 受字体影响；

&emsp;不受字体影响，宽度为一个汉字宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空格</title>
</head>
<body>
    <p>我我我&nbsp;我我我<br>我我我&emsp;我我我</p>
</body>
</html>

其在浏览器显示结果如下：

版权

用©表示©。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>版权</title>
</head>
<body>
    <p>版权&copy;</p>
</body>
</html>

其在浏览器显示结果如下：

商标

™表示™；

®表示®。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商标</title>
</head>
<body>
    <p>商标&trade;<br>商标&reg;</p>
</body>
</html>

其在浏览器显示结果如下：