html简单回顾

最新推荐文章于 2024-08-29 14:26:44 发布

MIMO. mimo

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量65

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/mimo_mimo/article/details/128499089

版权

html简单回顾

**
vscode插件
1.auto rename tag标签前面改了后边自动改
2.view-in-browser右键快速打开浏览器浏览
3.live sever右键open with live sever 保存后会在浏览器直接显示更新内容

shift+alt+f自行整理格式
alt+上/下快速移动本行

h标签
h$*6生成留个标题
标题位置属性align=“left/right/center"

路径
绝对路径
相对路径
相同级别 000.jpg
向上寻找图片…/
向下寻找图片./
网址

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1 align="left">head1</h1>
    <h2 align="center">head2</h2>
    <h3>head3</h3>


    <p>段落段落段<br>落段落段落段落</p>
    <!-- hr属性颜色宽度高度居中（默认居中） -->
    <hr color="green" width="300px" size="20px" align="right">
    <!-- h$*6 生成六个不同大小标题-->


    <!-- 图片 注意斜杠的方向复制出来以后需要更改-->
    <img src="./img/lll.jpg" alt="无法显示" title="鼠标边上会显示">
    

    <!-- 超文本链接 herf属性描述链接地址 -->
    <a href="https://www.bilibili.com/video/BV1wM411y7yK?p=10&spm_id_from=pageDriver&vd_source=65251e1718ef4628c9ea38c45f5101ce">链接文本</a>
    <a href="https://baidu.com">
        <img src="./img/lll.jpg" alt="img">
    </a>



    <!-- 文本em b i strong del span -->
    <em>em</em>
    <b>b</b>
    <del>delete</del>
    <span>span</span>
    <strong>strong</strong>
    <!-- 嵌套 -->
    <p>i like <em>apple</em></p>


    <!-- 列表 -->
    <!-- 有序列表 通过type来改变有序列表的计数方式aA1Ii-->
    <h3>有序列表</h3>
    <ol type="a">
        <li>first</li>
        <li>second</li>
    </ol>
    <ol type="A">
        <li>first</li>
        <li>second</li>
    </ol>
    <!-- 嵌套列表 -->
    <ol type="1">
        <li>first
            <ol>
                <li>one</li>
                <li>two</li>
            </ol>
        </li>
        <li>second</li>
    </ol>
    <h3>无序列表</h3>
    <!-- 无序列表 ul>lili*5快捷生成  粗体圆点标记type -->
    <ul type="disc">
        <li>disc</li>
        <li>second</li>
    </ul>
    <ul type="circle">
        <li>circle</li>
        <li>second</li>
    </ul>
    <ul type="square">
        <li>square</li>
        <li>second</li>
    </ul>
    <ul type="none">
        <li>none</li>
        <li>second</li>
    </ul>
    <p>无序列表的 <b>导航作用</b> 通过css调整成横着的</p>
    <p>快捷键生成无序列表ul>lili*5</p>


    <!-- 表格 -->
    <h3>表格2*3</h3>
    <!-- tr表示行td表示列 -->
    <table>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    <p>快捷键生成表格table>tr*5>td*6{文本}</p>
    <p>表格属性border添加表格线 width设置表格宽度 height设置表格高度</p>
    <p>表格单元格合并colspan水平合并 rowspan垂直合并</p>
    <p>水平合并保留左边删除右边，垂直合并保留上边删除下边，属性的数值为合并单元格的数量</p>
    <table border="1" width="600px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td colspan="2">单元格45</td>
            
            <td>单元格6</td>
        </tr>
        <tr>
            <td>单元格7</td>
            <td>单元格8</td>
            <td rowspan="3">单元格9 12 15</td>
        </tr>
        <tr>
            <td>单元格10</td>
            <td>单元格11</td>
            
        </tr>
        <tr>
            <td>单元格13</td>
            <td>单元格14</td>
        </tr>
    </table>


    <h3>表单form 登录注册等搜集用户信息的地方</h3>
    <p>表单属性action服务器地址 name表单名称 method=get/post，get提交数据url可以看到，post看不到，get提交少量数据，post提交大量数据</p>
    <p>文本框type=text</p>
    <form action=""></form>
    <form >
        name:<input type="text">
        密码: <input type="password">
        <input type="submit" value="value设置提交按钮文字">
    </form>


    <h3>块元素和行内元素</h3>
    <p>块元素独占一行，可以设置宽高，可以包含行内元素和其他块级元素 <br> <em>div form h hr p table ul</em> </p>
    <p>内联元素只占自身大小，设置宽高无效，内敛元素包含内联元素不包含块元素<br> <em>a b em i span strong</em></p>
    <p>行内块级元素 不换行，但可以识别宽高<br> <em>img input button</em></p>

    <h3>div</h3>
    <p>div容器增加清晰度，通过id识别属性。<br> <b> h5新标签header头部 nav导航 article独立的完整的内容块（完整的博客，帖子，评论） section定义文档中的节（章节，页眉） aside侧边栏 fooder腳部</b></p>
    <div id="nav">主导航</div>
    <div id="ad">广告</div>

</body>
</html>