html基本知识

monster - r

已于 2023-08-24 17:43:17 修改

阅读量141

点赞数

文章标签：前端

于 2023-07-22 18:05:00 首次发布

本文链接：https://blog.csdn.net/rrl18215821889/article/details/131838519

版权

硬件：控制器、运算器、输入设海、输出设备、存储（内存（读写快存储空间小）硬盘（读写
候，存储空间大）)
软件：系统软件:windows、linux、mac
应用软件：微信、qq、元神、b站等

b/s架构: browser/server 浏览器跨平台、无需安装、不需要更新
c/s架构:client/server 客户端不跨平台、安装、更新
server:服务器大型专业应用、对安全要求比较高的(例如：导弹系统)

web标准：一系列标准集合w3c（万维网联盟）：国际最著名的标准化相织为三层分真
浏览播不同，显示负面以及排版会有差异
构成:主要包括:结构（网页元素进行整理和分类 html)、表现(外观样式，主要船css)、行为（网页模型的定义及交互的编写)

结构类似于身体

表现类似于外观装饰

行为类似于动作

html:超文本标记语言

超：超链接从一个页面跳转到另外一个页面
html-L结构

css - 表现

javascript ----- 行为

html 基础语法:

<起始标签>标签体(内容)</结束标签>-双标签
大小写不敏感--建议小写

<input /> ----- 单标签(推荐写法)

也可以写成<input>

html标签：可以相互嵌套

UTF-8：万国码，包含世界上所有文字与符号

使用vscode，可以用快捷键！+enter 快速生成。

UTF-8：万国码，默认生成。

按住Alt+/可以快速注释。

标题标签
<h1>标题</h1>
<h3>标题</h3>
<h6>标题</h6>
等等

段落标签

<p>段落</p>
文本格式化标签
<strong>需要加粗的文段</strong>//加粗
<b>需要加粗的文段</b>//加粗
<em>需要倾斜的文段</em>//倾斜
<i>需要倾斜的文段</i>//倾斜
<del>需要添加删除线的文段</del>//删除线
<s>需要添加删除线的文段</s>//删除线
X<sub>2</sub>//下标，结果如下：

X<sup>2</sup>//上标，结果如下：

<ins>需要添加下划线的文段</ins>//下划线
<u>需要添加下划线的文段</u>//下划线
换行标签
<br>

<hr>//换行后添加横线

图片标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- src  指向图片地址的  alt：图片地址发生错误时，用来对图片进行提示的  title：鼠标悬停时，显示的文字 align:设置图片与文字的对齐方式的-->
    <img src="../灰太狼.jpg" alt="我是灰太狼" title="我要去抓羊了" width="500px" border="20px" align="center">
</body>

</html>

src：文件路径。

../:当前文件的上一级文件。

/：文件下一级。

alt：当图片出现错误时，将用文段代替。

title：当鼠标悬停再图片上时，将显示文段。

width：控制图片宽度
height：控制高度。

注意：宽度与高度设置其中一个，另一个会自适应。

border：添加图片边框

align：设置图片旁边文字位置。

视频标签
<video src="../Html/video.mp4"controls loop autoplay muted></video>

src：视频路径。（必须）

controls：添加控制进度条。（必须）

loop：循环。

autoplay：自动播放。（一些浏览器，比如谷歌规定。若要自动播放，就必须静音。）

muted：静音。

音频标签
<audio src="./music.mp3" controls loop></audio>

src:音频路径。

controls：添加控制进度条。（必须）

loop：循环。

超链接
例如：

<a href="./视频超链接.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a>//中间加链接的入口文段

href:链接地址。可以放现有的，也可以放网络上的。

target：链接的打开方式。

target="_blank"：在新的窗口打开。

target="_self"：默认设置，在当前页面打开。

锚链接（类似于目录，便于快速找到想要找到的文段）

<a href="#id">锚链接入口</a>
注意：在同一个网页内。id不能重复，一个元素只能有一个id。

特殊字符

列表

有序列表
<ol>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ol>

默认按照数字排序

可选排列方式：

列表中可以放很多东西（例如：链接，图片）。

无序列表
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>

默认格式下前面是小圆点
前面的小圆点也可以进行修改。后面会使用css修饰。

自定义列表
<dl>
<dt>水果：</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dd>葡萄</dd>
<dt>蔬菜：</dt>
<dd>西红柿</dd>
<dd>茄子</dd>
<dd>土豆</dd>
</dl>

如图

dt：组名。

dd：组内元素。

页面嵌套
嵌套前：

嵌套后（淘宝页面）：

frameborder：是否添加边框。

也可以使用width和height两个指令去修改嵌入页面的大小。

该指令也可以嵌入自己的文件。

与target结合，以超链接嵌入页面
<body>
一个我的页面
<a href="https://www.taobao.com/" target="t">去csdn</a>
<iframe name="t" frameborder=0"></iframe>
</body>

点击 “去淘宝”

表单

<body>
    <form action="#">
        账户:
        <input type="text" name="usernamee" />
        <br>
        密码:
        <input type="password" name="one" /> 
        <br>
        性别:
        <input type="radio" name="a" value="男" />男
        <input type="radio" name="a" value="女" />女
        <br>
        爱好:
        <input type="checkbox" name="like" value="抽烟" />抽烟
        <input type="checkbox" name="like" value="喝酒" />喝酒
        <input type="checkbox" name="like" value="烫头" />烫头
        <br>
        其他:
        <textarea name="jianjie" cols="30" rows="5"></textarea>
        <br>
        籍贯:
        <select name="jiguan">
            <option value="广东省">广东省</option>
            <option value="四川省">四川省</option>
            <option value="河北省">河北省</option>
        </select>
        <br>
        <button>确认</button>
        <input type="reset" />
    </form>
</body>

form：表示该表单信息将提交，action后面写提交位置。#表示无。

账户名（文本栏），密码（密码栏），性别（单选框），爱好（多选框）都是使用input标签，通过使用不同的type类型达到不同的效果。具体参考上面的代码。这些都需要设置该表单的名称，用以告诉对方我方提交的数据用于干嘛。因为账户和密码是用户自己输入的，而性别和爱好是锁定的只能在给出的选项中选择，这种就需要使用value来添加值（单选框和多选框必须要value），账户密码也可以使用value添加值，使用后将在网页中默认显示你添加的值（可以修改）。也可以使用disabled（禁止使用，也可以在其他表单使用）锁定，锁定后将不能修改。

checked：默认选中。

籍贯（下拉菜单）使用select标签，也需要设置名称，使用value添加值，select标签中加入multiple="multiple"(以列表形式展示，不以下拉框显示)。用法参考代码。

其他（文本域）使用textarea标签，同样需要设置名称。cols设置列，rows设置行。可以使用maxlength限制最大输入字数。

确认：使用button标签，其表示按钮。<button>确认</button>表示提交按钮。

<input type="reset" />表示重置，即将上面输入的数据回到最初的样子。

上传文件：使用input标签，type="file"，加multiple属性可以上传多个文件，同样需要名称。

注意：上述所有标签都可以添加id。必须要有name属性，其他属性可以去查。

增加鼠标点击选择框的范围（即点击文字也能选择）：

1、使用label标签将整个代码包裹：

<label><input type="radio" name="a" value="男" />男</label>
2、使用label将文字包裹（需要通过id）：

<fieldset>：表单控件进行分组（给这个组加一个边框）

<legend>主要信息</legend>：分组的标题

input………

</fieldset>

表格标签
先排出表名和表头：

<body>
    <table>
        <caption>学生信息</caption>  - - - 表名
        <thead> - - -表头
            <tr>//行
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
    </table>
</body>




 进行填写第一行：

<body>
    <table>
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>表主体
            <tr>//行
                <td>张三</td> - - - 一个单元格
                <td>男</td>
                <td>20</td>
                <td>汉</td>
                <td>群众</td>
            </tr>
        </tbody>
    </table>
</body>

后面的也写在tbody里面：

<body>
    <table>
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td>汉</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>21</td>
                <td>汉</td>
                <td>团员</td>
            </tr>
        </tbody>
    </table>
</body>

 依此类推

tfoot --- 表脚

        <tfoot>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>共计:2人</td>
        </tfoot>

<th><th/>代表一个单元格有加粗效果

<td><td/>代表一个单元格没有加粗效果

优化
添加边框（在表标签中添加属性）：

<table border="2px">
结合上面的看看效果：

将上面表中单元格间的间隙去除（在表标签中添加属性）：

<table border="2px" cellspacing="0">
效果：

修改单元格大小（在表标签中添加属性）--- 使用width和height属性：

cellspacing=“0” 去除单元格与单元格之间的空隙

height属性只会改变表主体的单元格规格，不会改变表头和表脚。

如果要改变表头和表脚高度可以在<thead>和<tfoot>这两个标签中去添加height属性。

改变文字在表中的对其方式（在对应标签中去加入属性）：

水平方向：align=" "：center（居中）等

垂直方向：valign=""：top（顶端对齐）等

注意：表头，表主体，表脚的高度加起来不能大于表的高度。（若超过会受限）

tr，tbody，tfoot三个标签属性一致，不能设置width属性，而thead可以。

单元格合并
示例（在表主体中进行合并）：

<body>
    <table border="2px" cellspacing="0" width="400px" height="400px">
        <tbody>
            <tr>
                <td></td>
                <td</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

跨行
将（1，1）与（2，1）合并：

<body>
    <table border="2px" cellspacing="0" width="400px" height="400px">
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

在第一行的第一个单元格<tr>里面添加属性。跨两行，所以rowspan="2"。这里要注意的是，将（1，1）与（2，1）合并后变成了一个单元格，所以在第二行的（2，1）应该删去。

跨列
以上面的例子继续：

将（1，3）与（1，4）, (4,1)与（4，2）与（4，3）合并：

<body>
    <table border="2px" cellspacing="0" width="400px" height="400px">
        <tbody>
            <tr bgcolor="pink">
                <td></td>
                <td></td>
                <td colspan="2"></td>
                
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3"></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>

同理，第4行的第一个单元格<tr>里面添加属性。跨三列，所以colspan="3"。同样要注意的是，将(4,1)与（4，2）与（4，3）合并后变成了一个单元格，所以在第4行应该删去（4，2）与（4，3）。

bgcolor="pink"说明此时表格主体背景颜色为粉色