Web前端第一天

一、HTML骨架

<!DOCTYPE html>
<!--声明文档 html5  -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>我是最棒的</title>
</head>

<body>
    我觉得从事地产的生命v但是v
</body>

</html>

二、快速生成+注释

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!-- 注释 :对代码进行解释    ctrl+/-->
    <!-- 不要来,这里代码全是bug,得累死-->
    坚实的基础看得出你是大家


</body>

</html>

三、标题标签

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

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

<body>
    <!-- 标题标签    h1-h6逐渐变小  独占一行-->
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>


</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>
    <!-- 段落标签   p 行与行之间空 -->
    <p>戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。</p>
    <p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    </p>《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
</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>
    <h2>戴尔·卡耐基</h2>
    <hr />
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少

</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>
    <p>戴尔·卡耐基被誉为美国<strong>“成人教育之父”</strong>,他所著的<b>《人性的弱点》</b>汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。</p>
    <p>此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如<em>卡耐基</em>所言:“一个人的成功,只有15%归结于他的专业知识。还有<i
            style="color: pink;">85%</i>归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    </p>《人性的弱点》<ins>"身带穷气,一看便知"</ins>:<u>犯了这些事情,贵人之气会减少</u>

    <del>2999</del> 9.9<br />
    <s>11.0 </s> 11.0
</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>
    <!--容器,独占一行   多用于布局-->
    <div>
        nkdscldscdscdcnkdcds
        <img src="../images/dog.gif" alt="">
    </div>
    <div>
        nkdscldscdscdcnkdcds
    </div>
    <div>
        nkdscldscdscdcnkdcds
    </div>
    <!-- span一行可存在多个 -->
    <span>a</span>
    <span>a</span>
    <span>a</span>
</body>

</html>

八、图片标签

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

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

<body>
    <!-- src指向图片位置  alt:图片地址发生错误时,用来提示的字 
    title:鼠标经过时,显示的文字
    border  边框 
    width:宽度
    height:高度   
-->
    <img src="../images/dog.gif" alt="我是一只最好看的猫咪" title="我是一只狗" height="700px" border="20">
    <img src="C:\Users\21195\Desktop\7-5\day1\images\dog.gif">
    <img src="https://img1.baidu.com/it/u=3113560374,3342883877&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt="">
</body>

</html>

九、视频

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

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

<body>
    <!-- width="1800px" height="50px"
    controls:控件
    autoplay:自动播放
    muted:静音播放
    poster:等待加载时的显示图片
    loop循环
    -->
    <video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video>
</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>
    <audio src="./images/music.mp3" controls muted autoplay loop></audio>
</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="http://www.xianoupeng.com/" target="_blank">去鸥鹏</a>
    <a href="https://www.baidu.com" target="_blank">去百度</a>
    <a href="./09-视频.html">去看小视频了</a>
    <a href="https://www.baidu.com"><img src="./images/dog.gif"></a>
    <a href="http://www.xianoupeng.com"><img src="./images/cat.gif"></a>


</body>

</html>

十二、锚链接

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚链接</title>
    <style>
        body {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <a href="#one">个人经历</a>
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少
    戴尔·卡耐基被誉为美国“成人教育之父”,他所著的《人性的弱点》汇集了其思想精华和最触动人思想的内容,是作者最成功的励志经典。<br />
    <!-- id属性------身份证号 -->
    <div id="one">个人经历</div>
    此书之所以永不过时,就在于卡耐基先生对人性的深刻认识,以及它为根除人性的弱点所开出的有效处方。正如卡耐基所言:“一个人的成功,只有15%归结于他的专业知识。还有85%归于他表达思想、领导他人及唤起他人热情的能力。”只要你不断反复研读,它必将助你获取成功所必备的那85%的能力。
    《人性的弱点》"身带穷气,一看便知":犯了这些事情,贵人之气会减少


</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>
    <!-- 有序列表 ol  li-->
    喜欢的食物
    <ol type="a">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>奶茶泡饭</li>
    </ol>
</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>
    你喜欢的明星是?
    <ul type="circle">
        <li>丁真</li>
        <li>法外狂徒张三</li>
        <li>华晨宇</li>
        <li>罗翔</li>
    </ul>
</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>
    <dl>
        <dt>
            你们喜欢的明星是?
        <dd>
            张三
        </dd>
        <dd>
            里斯
        </dd>
        <dd>
            张三
        </dd>
        </dt>

    </dl>
</body>

</html>

十六、iframe框架

<!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>
    这是我的主页面
    <!-- <iframe src="https://www.taobao.com" width="900px" height="600px"></iframe> -->
    <iframe src="https://www.baidu.com" width="900px" height="600px"></iframe>


    <a href="https://www.taobao.com" target="nn">去淘宝</a>
    <iframe name="nn" frameborder="0" width="800px" height="200px"></iframe>


</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>
    <div>
        &lt;
        &gt;
        <br />
        我最喜欢的大明星是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法外狂徒张三
        31&deg;
    </div>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值