我的H5笔记

SOUT荷包蛋

已于 2024-06-14 22:18:50 修改

阅读量94

点赞数 1

文章标签：笔记

于 2024-06-13 21:31:41 首次发布

本文链接：https://blog.csdn.net/wushengkuang/article/details/139664267

版权

初识H5

<!DOCTYPE html>
<!-- 声明html5 文档类型 -->
<html lang="en">
<!--最大的跟标签 页面的默认语言 英语   ch zh-->

<head>
    <!--头部标签-->
    <meta charset="UTF-8">
    <!--
        mate 写在head标签下
        meta 主要用于设置网页中的
        一些元数据
        charset 指定网页的字符集
        name 指定数据的名称
        content 指定数据的内容
        keywords 表示网站的关键字
        title标签的内容会作为搜索结果的超链接上的文字显示
    -->

    <img src="" alt="">
    <!-- 开始没有结束标签
    单标签 具有功能性的标签
    

    -->

    <div class="" age=""></div>
    <!-- 属性（多个属性空格隔开）属性值 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

实体

<!--

&实体的名字

 空格

>大于号

<小于号

-->

认识标签

<!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>
    <!--
        布局标签（结构语义一标签）

        以下了解
        heade 表示网页的头部
        main 表示网页的主体部分（一个页面只有一个main）
        footer 表示网页的底部
        aside 和主题相关的其他内容（侧边栏）
        article 表示一个独立的文章
         

        重要
        div 没有语义，就用来表示一个区块，目前div还是我们的主要布局元素
        span 行内元素，没有任何语义，一般用在网页中选中文字 设定特殊样式
    -->

    <b>我是b</b><strong></strong>
    <i>我是i</i><em></em>
    <s>我是s</s><del></del>
    <u>我是u</u><ins></ins>

</body>

</html>

两个重要的标签、

1. div 没有语义，就用来表示一个区块，目前div还是我们的主要布局元素

2.span 行内元素，没有任何语义，一般用在网页中选中文字设定特殊样式

列表

<!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>

    <!--
        列表（list）
            1.有序列表
            2.无序列表
            3.定义列表

        有序列表，使用ol标签创建
            使用li表示列表项


        无序列表，ul标签来创建无序列表
            使用li表示列表项

        定义列表，使用dl标签创建
            使用dt定义内容
                dd对内容解释
            
    -->
    <ol>
        <li>结构</li>
        <li>标签</li>
    </ol>

    <ul>
        <li>结构</li>
        <li>标签</li>
    </ul>

    <dl>
        <dt>排球</dt>
        <dd>排球是一种体育运动</dd>
    </dl>

</body>

</html>

超链接

<!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>

    <!--
        超链接：可以从一个页面跳转到其他页面，
            或者本页面的其他位置
            使用 a 标签
                属性：
                href 指定跳转的目标路径
                    -可以是外部网站地址
                    -也可以是内部页面的地址

                    ./表示 当前目录
                    ../表示 上一级目录

            超链接是一个行内元素
            在a标签中，可以嵌套任何元素，不能放a




    -->
    <a href="https://WWW.baidu.com">这是一个超链接</a>
    <br>
    <a href="./07.列表.html">超链接</a>
    
</body>
</html>

可以直接将超联集的hret舒总设置为 # 这样点击后超链接

转到底部

可设置id # 想去哪里去哪里

用 javascript:;来作为href的属性，相当于占位符此时点击啥也没有

图片标签

<!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>
    
    <!--
        图片标签
            img属于替换元素，具有行快两种元素的特点
        属性：
            src 指定图片的路径

            alt 对图片的描述，（不会显示，如果浏览器对图片
            无法加载时显示，搜索引擎会根据alt的描述来识别内容。）

            width  height
            图片的宽度 高度， 设置一个另一个会等比例修改

            tilte 鼠标放到图片上时显示的文字

            （修改一般会在移动端，pc端不建议）
            
    -->
    <img src="./imges/Snipaste_2024-03-21_15-43-48.png" alt="棒极了" width="200" title="bangjile">

</body>
</html>

表单

<!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>

    <input type="text">
    <!-- type radio 圆形
     
    
    -->
    <input type="button">
    <!-- 按钮 -->

    <form method="post">
        <!-- method 提交方式 get 明文 不安全post -->
         <div>
            <input type="text" name="user">
         </div>
         <div>
            <input type="password" name="password">

         </div>
         <div>
            <input type="button" value="写字">
            <input type="submit" value="提交">
         </div>






    </form>
    
</body>
</html>