Html总结---持续更新中 2022.8.4

一、网页结构/基础

文件类型为html，超文本标记语言

DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标题title>
head>
<body>
	主体
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13

二、基础标签

1.img 图片标签

<img src="图片地址" alt="图片飞走了" title="椰子树">
1

alt: 当图片无法正常加载时，显示此提示文字

title: 当鼠标悬停在图片上时，显示此文字

绝对路径-如

C:\Users\w5725\Desktop\预科062\0704\img\161H4HI-2.jpg

相对路径-

…/ 回到上一级
./ 或直接写名字是统计文件
/ 打开下级文件

    <img src="C:\Users\w5725\Desktop\预科062\0704\img\161H4HI-2.jpg" alt="图片飞走了" title="椰子树">
    
    <img src="../img/161H4HI-2.jpg" alt="">
    <img src="03.jpg" alt="" style="width: 200px;height: 200px;">
1
2
3
4

路径问题(重点)

相对路径:

…/回到上一级

./或直接写名字是同级的文件

/打开，下一级

2.常用标签 h1~h6 p br

p 段落标签块级标签
h1~h6 标题标签
br 块级标签

代码显示：

    <p>p>
    <h1>h1>
    <h3>h3>
    <h6>h6>
    <br>
1
2
3
4
5

3.超链接

最简单的书写方式
<a href="">a>
1
2

属性

hrdf: 超链接地址可以是本地文件可以链接页面内的ID元素

taiget: 常用的值有 _blank 在打开链接时，不关闭本页

可以嵌套

<a href="#id"><img src="./image/1.jpg" alt="">a>
1

在点击a标签内的元素时，跳转到a链接href

4.标签 strong em sub sup

strong 加粗
em 斜体
sub 下标
sup 上标

    <strong>加粗strong>
    <em>斜体em>
    <sub>下标sub>
    <sup>上标sup>
1
2
3
4

5.div与span

div 块级元素占满一行有宽高
span 行内元素不占满一行没宽高靠内容撑开

<div>块级div>
<span>行内span>
1
2

三、标签分类

行内标签
1. 不独占一行，设置宽高无效
块级标签
1. 独占一行，可以设置宽高
嵌套关系

块级元素能嵌套行内标签和块级标签

p标签不能嵌套其他块级

行内标签能嵌套行内标签

a不能嵌套自己

转换元素类型

/* 元素类型转化,转化为行内块元素 */
            display: inline-block;
            
            
            inline：行内类型
            block：块级类型
            inline-block：行内块类型
1
2
3
4
5
6
7

四、标签的嵌套

1.表格

    <table border="1px solid">
        <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.无序列表

   <ul>
        <li>1111234567
            <ul>
                <li>2222li>
                <li>2222li>
                <li>2222li>
            ul>
        li>
        <li>1111234567li>
        <li>1111234567li>
        <li>1111234567li>
        <li>1111234567li>
    ul>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.有序列表

    <ol>
        <li>有序列表
            <ul>
                <li>无序嵌套li>
                <li>无序嵌套li>
                <li>无序嵌套li>
            ul>
        li>
        <li>有序列表li>
        <li>有序列表li>
        <li>有序列表li>
    ol>
1
2
3
4
5
6
7
8
9
10
11
12

4.标题列表

    <dl>
        <dt>一级、、dt>
        <dd>二级
            <ul>
                <li>dhkali>
                <li>dhkali>
            ul>
        dd>
        <dd>二级dd>
        <dd>二级dd>
        <dt>一级dt>
        <dd>二级dd>
        <dd>二级dd>
        <dd>二级dd>
        <dt>一级dt>
        <dd>二级dd>
        <dd>二级dd>
        <dd>二级dd>
    dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

相关阅读:
LVGL---使用物理按键代替触摸(groups)
HTML期末作业蛋糕bootstrap响应式网站html+css+javascript+jquery+bootstarp
大学生个人网页设计 HTML个人网页制作 web个人网站模板简单静态HTML个人网页作品
NPM 使用介绍
react源码分析：实现react时间分片
深入实现 MyBatis 底层机制的任务阶段4 - 开发 Mapper 接口和 Mapper.xml
文件改名：一次性解决文件名混乱，批量重命名技巧
2022-2028全球平板电脑主板行业调研及趋势分析报告
C#:实现计算两个点之间的球面距离算法（附完整源码）
SpringBoot项目的发布与运行

原文地址：https://blog.csdn.net/AO_AEO/article/details/126165312