HTML第一天

最新推荐文章于 2024-06-15 21:20:00 发布

lvlv屡屡

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量141

点赞数 1

文章标签： html javascript html5

本文链接：https://blog.csdn.net/m0_65910387/article/details/129297337

版权

网页的组成

1.结构 html

2.表现 css

3.行为 javascript

4.结构和表现由w3c(万维网联盟)制定

5.行为由ECMA(欧洲电脑厂商联合会)制定

HTML的结构

<!-- !+回车 -->

<!-- 声明文档类型 -->

<!DOCTYPE html>



<!-- 根元素 -->

<html lang="en">



<!-- 头部 -->



<head>

    <!-- 设置编码格式 -->

    <meta charset="UTF-8">

    <!-- 设置理想视口 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <!-- 网页标题 -->

    <title>屡屡</title>

    <!-- 网页标题图标 -->

    <link rel="icon" href="../images/广州地铁.png" />

    <link rel="icon" href="../images/广州塔.png">



    <!-- 外部样式css -->

    <!-- <link rel="stylesheet" href="样式路径"> -->



    <!-- 内部样式 -->

    <style>

        /* css代码 */

        img {

            width: 100%;

        }

    </style>



    <!-- 外部行为js -->

    <script src="js文件路径"></script>



</head>



<!-- 身体 -->

<body>

    <!-- 网页上所有内容(文本、图片、表格、表单) -->

    <div></div>

</body>

</html>

HTML语法

<!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>
    <img title="鼠标悬停显示文本" alt="你想要显示的文字" src="../images/y.png" />
</body>

</html>

常用标签

<!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>
    <style>
        p:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <!-- 1.文本标题 h1-h6 -->
    <!-- h$*6{标题$}+回车 -->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <!-- 2.字体倾斜i、em    加粗标记b、strong-->
    <p>
        <i>大量</i>用户<i>收到</i><b>饿了么</b><strong>免单</strong>
    </p>

    <!-- 3.下划线u    删除线s、del -->
    <p>
        <u>马斯克</u>儿子想断绝父子关系原价998现价<del>98</del>
    </p>

    <!-- 4.换行 br  水平线 hr-->
    <hr />
    <p>
        我不再与我的亲生父亲住在一起，也不希望以任何方式或形式与我的生物学父亲有任何关系。”<br />近日美国加州法院文件显示，泽维尔
    </p>

    <!-- 5.上标sup   下标sub -->
    <p>
        广西贵港一套80m<sup>2</sup>房子仅售30w
    </p>
    <p>
        水的化学方程式 = H<sub>2</sub>O
    </p>
    <!-- 6.段落标签 p -->
    <p></p>

    <!-- 7.小段文本 span -->
    <span></span>

    <!-- 8.转义字符 &nbsp; 空格  &copy;版权符号  &yen;人民币  &lt;尖角左 &gt;尖角右-->
    <p>
        女子怕&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy;&yen;头秃3个月&lt;不洗头&gt;
    </p>
</body>

</html>

列表

<!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>
    <style>
        body {
            /* 背景颜色 */
            background-color: #333;
        }

        /* li {
            list-style-type: none;
        } */
        
        dl {
            /* 左浮动 */
            float: left;
            /* 文本水平居中 */
            text-align: center;
            /* 右侧产生外边距 */
            margin-right: 20px;
        }

        dt {
            /* 文本设置简写：字体大小/行高 "字体" */
            font: 12px/40px "宋体";
            /* 文本颜色 */
            color: #fff;
        }

        dd {
            margin: 0;
            font: 12px/18px "宋体";
            color: #999;
        }

        ul {
            display: inline-block;
            /* float: left; */

        }
    </style>
</head>

<body>
    <!-- 1.无序列表 ul>li-->
    <!-- ul>li*3+回车 -->
    <ul>
        <li>海绵宝宝</li>
        <li>天线宝宝</li>
        <li>花园宝宝</li>
    </ul>
    <ul>
        <li>海绵宝宝</li>
        <li>天线宝宝</li>
        <li>花园宝宝</li>
    </ul>
    <!-- 2.有序列表 ol>li   type="a/A/i/I"  start="数字"-->
    <ol type="1" start="3">
        <li>吴凡</li>
        <li>蔡坤</li>
        <li>晗</li>
    </ol>

    <!-- 3.自定义列表 dl>dt+dd-->
    <dl style="margin-top: 50px;" id="last">
        <dt>我是美女</dt>
        <dt>我是美女</dt>
    </dl>
    <dl>
        <dt>我是美女</dt>
        <dd>我是美女</dd>
        <dd>我是美女</dd>
        <dd>我是美女</dd>
        <dd>我是美女</dd>
    </dl>
    <dl>
        <dt>我是美女</dt>
        <dd>我是美女</dd>

    </dl>

</body>

</html>

lvlv屡屡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML第一天

看看我初学前端的第一天学了啥
复制链接

扫一扫

HTML第一天

网页的组成

HTML的结构

HTML语法

常用标签

列表

“相关推荐”对你有帮助么？