Web 前端 Day 1

news2024/10/6 16:27:15

课程大纲:

html 结构

css 表现

Js 行为

jquery库 (地位下降趋势 仍旧在用)

bootstrap

前端高端只是:angular angularjs

html 超文本标记语言

相关解释

描述网页的语言

不仅有文字,还有图片、音频、视频等等

超:

超链接,能从一个网页跳转到另外一个网页

标记:

文本要变成超文本,就需要各种标记符号

语言:

每一个标记的写法、读音、使用规则,构成标记语言

语法规则:标签名全部小写

例如:

 

<strong>我是做的第一个网页</strong>    对中间部分内容实现加粗效果
​
<strong>加粗,前标签
</strong>加粗,多一个"/"表示尾标签
​
<marquee>我是做的第一个网页</marquee>  实现文本左右滚动效果
​

<input/> 实现一个文本框

标签可以嵌套

例如:

<marquee>我是做的第一个网页<input/></marquee>

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/727627.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

某网站JS加密、OB混淆与CSS反爬实战分析

1. 写在前面 最近一段时间接触了一些小说网站的业务。发现很多的小说网站&#xff0c;甚至一些小站它们的安全防护措施做的都很到位&#xff01;例如上次说到的的五秒盾也是存在于一个小说小站。今天要讲的这个网站它集JS加密、ob混淆、CSS反爬于一体 目标站点&#xff1a; aH…

用真人模型制作3D虚拟人物,岂不是更真实?

3D虚拟人物是指利用计算机技术和图形学技术创建的一种能够模拟真实人体形态、行为和语言的虚拟实体。与传统的平面图像或视频不同&#xff0c;3D虚拟人物具有立体感和真实感&#xff0c;能够在虚拟环境中实现人机交互和情感交流&#xff0c;给用户带来全新的沉浸式体验。 随着…

文件批量改名新技巧:轻松将日期插入到文件名中,整理更有序!

在数字化时代&#xff0c;我们每天都面临着大量的文件&#xff0c;而合理整理和命名这些文件对于我们的工作和生活至关重要。特别是在需要存档或分享文件时&#xff0c;具有清晰的命名规则可以极大地提升工作效率和组织性。 首先&#xff0c;进入文件批量改名高手的文件批量重…

表征材料表面性质​的第一性原理计算方法:功函数

功函数计算是指通过计算材料表面或界面上的电子结构能量差来确定材料的界面特性的方法。在材料科学和表面科学领域&#xff0c;界面的性质对于材料的功能和性能具有重要影响。通过理解和控制界面&#xff0c;可以优化材料的电子传输、光学性能、催化活性等关键特性。 功函数表示…

网络协议【图解TCP/IP(笔记二)】

文章目录 网络协议随处可见的协议协议的必要性生活中的协议计算机中的协议分组交换协议协议的标准化 网络协议 随处可见的协议 在计算机网络与信息通信领域里&#xff0c;人们经常提及“协议”一词。互联网中常用的具有代表性的协议有IP、TCP、HTTP等。而LAN&#xff08;局域…

企业元宇宙虚拟场景开发公司广州华锐互动

元宇宙是一个虚拟的世界&#xff0c;可以模拟现实世界中的场景和交互方式。利用元宇宙搭建线上元宇宙互动展厅可以让企业在虚拟环境中展示产品、服务和品牌形象&#xff0c;与客户进行互动交流&#xff0c;提高企业的知名度和影响力。 通过搭建线上元宇宙互动展厅&#xff0c;利…

【python学习】matplotlib绘制仅有y轴的数值条码图/台阶图(隐藏特定坐标轴)

matplotlib绘制仅有y轴的数值条码图/台阶图 图形来源图形绘制思路绘图代码 图形来源 今天看文章&#xff0c;文章中有一幅图&#xff0c;图的表达形式很适合我目前的数据展示&#xff0c;于是想要用python画出来。 文章来源&#xff1a;Yun-Hua Cheng_2017_Scientific Report…

web学习笔记1

计算机&#xff1a; 课程大纲&#xff1a;html&#xff08;五条猫结构&#xff09; 结构 css 表现 JavaScript 行为 html&#xff1a;超文本标记语言 超&#xff1a;超链接&#xff0c;能从一个网页跳转到另一个网页 标记&#xff1a;文本要变成超文本&#xff0c;就需要各…

pwn05(应对简单栈溢出的常规套路)

目录 一、常规检查&#xff08;nc、file、checksec&#xff09; 二、IDA反编译&#xff0c;只找两个东西即可 1、寻找造成栈溢出的函数的地址到ebp的距离 2、 寻找我们所要利用的函数的地址&#xff08;即我们希望程序最后返回到哪里&#xff09; 三、编写并运行exp脚本 一…

eNSP-NAT网络地址转换服务

NAT网络地址转换服务 文章目录 NAT网络地址转换服务一、题目要求二、题目分析三、拓扑结构四、基础配置五、测试验证 一、题目要求 1.私网地址使用192.168.1.0/24进行子网划分 2.Telnet Server设备启动Telnet服务 3.isp设备仅配置IP地址 4.PC6,PC7,PC8均可以访问PC9 5.内网…

python 第十章 函数

系列文章目录 第一章 初识python 第二章 变量 第三章 基础语句 第四章 字符串str 第五章 列表list [] 第六章 元组tuple ( ) 第七章 字典dict {} 第八章 集合set {} 第九章 常用操作 文章目录 系列文章目录10.1函数的作用10.2函数的使用步骤定义函数调用函数函数的注意事项 10…

Linux 内存泄漏检测的实现原理与实现

在使用没有垃圾回收的语言时&#xff08;如 C/C&#xff09;&#xff0c;可能由于忘记释放内存而导致内存被耗尽&#xff0c;这叫 内存泄漏。由于内核也需要自己管理内存&#xff0c;所以也可能出现内存泄漏的情况。为了能够找出导致内存泄漏的地方&#xff0c;Linux 内核开发者…

抖音seo矩阵系统源码开发部署--开发文档分享

目录 一、抖音seo矩阵系统源码自研概况分析 二、 技术开发语言及功能框架 技术要求&#xff1a; 功能框架&#xff1a; 三、 抖音seo矩阵系统开发原则 四、 抖音seo矩阵系统源码开发示例 一、抖音seo矩阵系统源码自研概况分析 关于抖音seo矩阵系统源码自研&#xff0c;在开…

零零信安-DD数据泄露报警日报【第202期】

2023.07.07共发现匿名网络资讯信息79,948条&#xff1b;最近7天同比增长-20.6%&#xff1b;最近30天共发现匿名网络资讯信息2,587,590条。 北京零零信安科技有限公司成立于2020年&#xff0c;是国内首家专注于外部攻击面管理&#xff08;EASM&#xff09;的网络安全公司。基于…

Python3,10行代码竟然让URL变短了,没想到还可以这么玩。

让URL变短的方法 1、引言2、代码实战2.1 安装2.2 示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;有没有什么方法&#xff0c;能让url变短一点 小鱼&#xff1a;我去~ url怎么惹你了&#xff0c; 你让它变短。&#xff1f; 小屌丝&#xff1a;没有了&#xff0c; 我…

python scrapy爬取网站数据(一)

框架介绍 scrapy中文文档 scrapy是用python实现的一个框架&#xff0c;用于爬取网站数据&#xff0c;使用了twisted异步网络框架&#xff0c;可以加快下载的速度。 scrapy的架构图&#xff0c;可以看到主要包括scheduler、Downloader、Spiders、pipline、Scrapy Engine和中间…

你如何准备测试数据?

目录 前言&#xff1a; 一、基于 GUI 操作生成 二、调用 API 生成 三、通过数据库操作生成 四、综合运用 API 和数据库的方式生成 前言&#xff1a; 在进行自动化测试时&#xff0c;准备好合适的测试数据是十分重要的。 准备测试数据是我们测试过程中非常重要的一环&…

RocketMQ5.0--顺序消息

RocketMQ5.0–顺序消息 一、顺序消息概览 RocketMQ支持局部消息顺序消费&#xff0c;可以确保同一个消费队列中的消息被顺序消费&#xff0c;如果做到全局顺序消费则可以将主题配置成一个消费队列。并发&#xff08;默认&#xff09;消息消费参考​ 《RocketMQ5.0.0消息消费&…

java中对象字段转换

文章目录 前言一、对象属性转换问题二、如何处理转换?三 、处理办法1 利用 JsonProperty 改变转出属性2 利用 JsonAlias 增加接收的属性 总结 前言 在java中,有时候会涉及到一些对象的转换,为什么转换呢? 由于接受参数和用的时候对应不上由于经历过一些修改,为了兼容 一、对…

mac上 如何批量在文件名后加相同的文字?

mac上如何批量在文件名后加相同的文字&#xff1f;不管你是使用windows电脑还是使用mac电脑&#xff0c;很多小伙伴都会在电脑上进行文件批量重命名的操作&#xff0c;不过这项操作对于使用windows系统电脑的小伙伴来说会简单一些&#xff0c;因为在网上可以搜索到很多这样的教…