Web 前端 Day 1

最新推荐文章于 2024-07-25 09:24:40 发布

Ljn45521

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量170

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Ljn45521/article/details/131587171

版权

课程大纲：

html 结构

css 表现

Js 行为

jquery库（地位下降趋势仍旧在用）

bootstrap

前端高端只是：angular angularjs

html 超文本标记语言

html骨架

<html>

<head>

</head>

<body>



</body>

</html>

属性名=“属性值”

例如：

<marquee loop="1">我是做的第一个网页<input/></marquee>

空格后

UTF-8 万国码

例如

实现效果:

注意先保存再右键运行

注释标签

注释对代码进行解释

ctrl+/ 快速生成注释

参考文档: w3c官网html标准

搬运工：

w3school 免费

MDN网站对各种名词和标签的概念和用法进行解释

标题标签

h1-h6逐渐变小

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

段落标签

<p>
    
</p>  段落之间实现换行

换行标签、水平线标签

是单标签

<br />   放在某一行尾直接实现换行

<hr />  实现水平下划线

文本格式化标签

<em>文本<em/>  对文本实现倾斜效果

<del>文本<del/> 或者  <s>文本<s/>  删除线效果
<ins>文本<ins/> 或者  <u>文本<u/>  下划线效果

无语义标签

<div>
</div>   
和标题标签一样独占一行
容器作用，可以放任意标签

<span>
</span> 一行可存在多个

图片标签

 <img src="" alt="">  src指向图片地址  alt图片地址出错时，用来提示的字  都是图片的属性，每个属性之间要有空格

 <img src="" alt="" title=“”> title鼠标经过时显示的文字
 weith   设置宽度
 height  设置高（长）度
 border  设置边框

相对路径

同级别文件夹选择地址

绝对路径

在电脑本身的地址

网络上的路径

音频标签

<body>
    <audio src="./images/music.mp3" controls muted autoplay loop></audio>
</body>           src指向音频地址 
controls:控件    autoplay：自动播放    muted：静音播放  loop循环播放

视频标签

<body>
    <!-- width="1800px" height="50px"
    controls:控件
    autoplay：自动播放
    muted:静音播放
    poster：等待加载时的显示图片
    -->
    <video src="./images/video.mp4" controls autoplay muted poster="./images/map.jpg"></video>
</body>       src指向视频地址

链接标签

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

锚链接

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

mp3标签

<body>
    <audio src="./images/music.mp3" controls></audio>
</body>

mp4标签

<body>
    <video src="./images/video.mp4" controls></video>
</body>

有序列表

<body>
    <!-- 有序列表 ol  li-->
    喜欢的食物
    <ol type="a">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>奶茶泡饭</li>
    </ol>
</body>

无序列表

<body>
    你喜欢的明星是？
    <ul type="circle">
        <li>丁真</li>
        <li>法外狂徒张三</li>
        <li>华晨宇</li>
        <li>罗翔</li>
    </ul>
</body>

自定义列表

<body>
    <dl>
        <dt>
            你们喜欢的明星是？
        <dd>
            张三
        </dd>
        <dd>
            里斯
        </dd>
        <dd>
            张三
        </dd>
        </dt>

    </dl>
</body>

iframe框架

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

特殊字符

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